[RESOLVED]Processing image on form submit in webmatrix

Can anyone show me an example of disable the submit button and show  processing div on form submit..? and remove it on success?

@Mike,

I used the contact form from you website.  Only this is I don’t understand this line

success: function (data) {
       if (data == "True") {
               $('#success').show();
          } else {
                $('#error').show();
            }
}

All is working except the success div, because "data" parameter is not true. I set an alert  in the script, but I get an Html page in response.. How to get data as true?

The server side code returns True if there isn’t a problem when processing the form. Then it shows the div with the id of "success", otherwise it shows the div with the id of "error". Both divs are hidden to start with.

The file that processes the form should not have a layout set. All you need in it is code to process the form and return a result:

@{
    Layout = null;
    bool result;
    // code to process your form
    // result = true or false depending on the code that processed the form
}    
@result

Hi Mike, it did the same but something is wrong. Page returns "true" but the ajax script still goes to the else statement and shows the error div…

@{
    Layout = null;
    bool resultOfEmail = false;
    var customerEmail = "";
    var sendTo = "";
    var subject = "";
    var message = "";
    Validation.RequireField("customerEmail", "Please enter your email address");
    Validation.Add("customerEmail", Validator.Regex(@"^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$", "Invalid email format!"));
    
    if(IsPost && Validation.IsValid()){
        sendTo = "someone@someone.com";
        customerEmail = Request.Form["customerEmail"];
        try{
            WebMail.Send( to: sendTo, subject: subject, body: "Name : ");    
            resultOfEmail = true;
        }
        catch{
            ModelState.AddFormError("Wrong!");
            resultOfEmail = false;
        }
        
    }
}

@resultOfEmail

the script is :

<script type="text/javascript">
        $(function () {
            $("#iwizcontact").on('submit', function (e) {
                e.preventDefault();
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $(this).validate();
                if ($(this).valid()) {
                    $('#spinner').empty().html('<img src="/images/loading-indicator.gif" /> Please wait...');
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: data,
                        success: function (data) {
                            $('#iwizcontact').slideUp('slow').empty();
                            alert(data);
                            if (data == "True") {
                                $('#success').show();
                                alert("sent");
                            } else {
                                $('#error').show();
                                alert("failed");
                            }
                        },
                        error: function () {
                            $('#iwizcontact').slideUp('slow').empty();
                            $('#error').show();
                            alert("error");
                        }
                    });
                }
            });
        });
    </script>

Are you sure that the function returned "True"? Check the case of the return value. JavaScript is case-sensitive. Also, make sure there is no whitespace in the return value.

How would it return True? Even in the code the value passed is just a "true", boolean true. 

So the code might be like this, 

if(data) {
   // code
}

.. for the function to work as needed. 

Hello Mike, I tried an empty page with just "true" in it and it worked. But it is not working when the below code is there… I set an alert for "data".. and I can see spaces before and after "true". that is why its not working. How do I make the below code
to return true without spaces?

@{
    Layout = null;
    bool resultOfEmail = false;
    if(IsPost){
        var customerEmail = Request["customerEmail"];
        WebMail.Send( to: "gautam@iwiz.in", subject: "hello", body: "Name : ");    
        resultOfEmail = true;
    }
}
@resultOfEmail

You can use the Javascript trim() metod to remove white space or indexOf to see if the response contains "true" anywhere, or (probably simplest) you can use Json.Write to output the value which jQuery should then see as a boolean:

@{
    Layout = null;
    bool resultOfEmail = false;
    if(IsPost){
        var customerEmail = Request["customerEmail"];
        WebMail.Send( to: "gautam@iwiz.in", subject: "hello", body: "Name : ");    
        resultOfEmail = true;
    }
    Json.Write(resultOfEmail, Response.OutPut);
}
success: function (data) {
    if (data) {
        $('#success').show();
    } else {
        $('#error').show();
    }
}

Thank you for your time Mike… It worked!

Leave a Reply