使用ajax提交后隐藏表单

Question

I've created a form using a bit of jquery, ajax and php. The ajax, validation and php processing works well. I came up with the following code to hide my form after submitting, but I don't know if this is the good way to do that. I would like your advise.

Below the js script with the ajax call

<script type="text/javascript">
$(document).ready(function(){
$("#submitContact").click(function() {
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'form/process.php',
    data: $("#contact_form").serialize(),
    success: function(response) {
        $("#formstatus").hide().html(response).slideToggle(600);
    }
    });
});
});
</script>

The above code will call the php to validate and populates the div#formstatus to notify the user if the form is sent or not.

Within my process.php, I will hide the form if there are no errors found using echo js script.

// If no errors found echo succes message
if (!($formerrors)) :

    //Hide the form
    echo '<script type="text/javascript">
            $(document).ready(function(){
               $("#contact_form").hide();
            });
          </script>';

    // display success message
    echo '<div>
            Your message has been sent. <br />
            Thank you for contacting us!
          </div>';

    Etc....

To sum up:

Should I use this method to hide my form? (Because it does work)

Note. I'm new to jquery and ajax :)

Answer 1

I think it would be better to return a JSON object which contains the information relevant to the request.

For example:

if (!($formerrors)){
    echo json_encode(array(
        'success'=> true,
        'message'=> 'Your message has been sent. <br> Thank you for contacting us!'
    ));
}
else{
    echo json_encode(array(
        'success'=> false,
        'message'=> 'Error processing form',
        'errors'=> array(
                        'phone'> 'A phone number is required'
                    )
    ));
}

This will be easy to work with on the client side (jQuery will automatically parse the json)

<script type="text/javascript">
$(document).ready(function(){
$("#submitContact").click(function() {
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'form/process.php',
    data: $("#contact_form").serialize(),
    success: function(response) {
        if(response.success){
            $("#formstatus").hide().text(response.message).slideToggle(600);
        }
        else{
            jQuery.each(response.errors,function(){ ... });
        }
    }
    });
});
});