jQuery POST form data

Question

When I click submit I\'d like all form data to be POSTed to process.php. Then on process.php I want to echo out the POST data and finally replace everything in results div t

Answer 1

$("#myform").submit( function () {    
    $.ajax({   
        type: "POST",
        data : $(this).serialize(),
        cache: false,  
        url: "process.php",   
        success: function(data){
            $("#results").html(data);                       
        }   
    });   
    return false;   
});

Test it

Answer 2

You can call $.post passing form data serialized. like this:

<script type="text/javascript">
        $(document).ready(function(){
            $("#myform").submit( function () {    
              $.post(
               'process.php',
                $(this).serialize(),
                function(data){
                  $("#results").html(data)
                }
              );
              return false;   
            });   
        });
</script>

Answer 3

There is but another way to do it all. This example uses the jQuery validate plugin. Here, all the form fields are validated automatically. Download jquery from here :

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

Download validation plugin from here :

http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.validate.1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#customForm").validate({
    debug: false,
    rules: {
      name: {required:true,minlength:8,maxlength:8},
      email: {required:true,email:true},
    },
        submitHandler: function(form) {
     // do other stuff for a valid form 
     $('#rsltx').html('<img src="WhiteLoading.gif"> Processing... please wait');
     $.post('post.php', $("#customForm").serialize(), function(data) {
                        $('#rsltx').html(data);
         });
        }
  });
});
</script>

<form method="post" id="customForm" action="">
<div>
 <label for="name">Name</label>
 <input id="name" name="name" type="text" autocomplete="off" required/>
</div>
<div>
 <label for="email">E-mail</label>
 <input id="email" name="email" type="email" autocomplete="off" required/>
</div>
<div>
 <input id="send" name="send" type="submit" value="Send" />
</div>
</form>