jQuery POST form data

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 to what was done in process.php.

<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").submit( function () {    
            $.ajax({   
                type: "POST",
                dataType: "html", 
                cache: false,  
                url: "process.php",   
                success: function(data){
                    $("#results").html(data);                       
                }   
            });   
            return false;   
        });

        //$("#myform").submit( function () {
            //$('#results').html("yay");                    
        //}  
            // });  
        //} );          
    });
</script>

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">zoom</label>  
    <input type="text" name="zoom" id="zoom" size="30" value=""/>  
    <br>
</select>


<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>

<!-- FORM END ----------------------------------------  -->


<!-- RESULTS START ---------------------------------------- -->
    <div id="results">nooooooo<?PHP $_SESSION[''] ?><div>
    <!-- <input type="image" name="mapcoords" border="0" src="mapgen.php"> ---- -->
<!-- RESULTS END ---------------------------------------- -->

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>

How to use jquery $.post() method to submit form values, You have to select and send the form data as well: $("#post-btn").click(function(){ $.post("process.php", $("#reg-form").serialize(), function(data)� serialize takes a form (or a set of inputs) and turns all of the input, select, and textarea tags into a string suitable for sending as the body of an HTTP POST request (or as the query string of a GET request). For example, serializing a form with the single field, <input name="firstName" value="Sean"> becomes "firstName=Sean".

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

Test it

jQuery post() Method, Change the text of a <div> element using an AJAX POST request: $("input"). keyup(function(){ var txt = $("input").val(); $.post("demo_ajax_gethint.asp", { suggest:� Visit james.padolsey.com/jquery and search for post () method to see the jQuery source code. The second parameter is a data to submit in JSON format, where key is the name of a parameter and value is the value of parameter. The third parameter is a success callback function that will be called when request succeeds.

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>

Ajax Form Submit examples using jQuery – Sanwebe, Submit HTML Form data using regular jQuery ajax() function. It is very flexible and can be configured to the heart content. JQUERY. jQuery $.post () method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the request has been sent without page refresh. $.post () method sends request along with some data using an HTTP POST request.

jQuery Ajax Post Data Example, This jQuery Ajax example will help you to learn how to post data using <div id= "main"> <h2>jQuery Ajax $.post() Method</h2> <hr> <form� JQuery Ajax POST Method Sends an asynchronous http POST request to load data from the server. Its general form is: jQuery.post(url [, data ] [, success ] [, dataType ])

jQuery post() method, jQuery post() Method � url: request url from which you want to submit & retrieve the data. � data: json data to be sent to the server with request as a form data. A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax(). If you will be using jQuery’s Ajax Form Submit, you can send the form data to the server without reloading the entire page. This will update portions of a web page – without reloading the entire page.

jQuery Ajax Form Submit with FormData Example, jquery ajax form submit example | In this tutorial, you will learn how to send multipart data, FormData or multiple files of forms using the jquery� jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery Misc Load data from the server using a HTTP POST request: $("button").click(function() Login Form HTML

Comments
  • So, what's the question?
  • Your code seems to do that (cold inspection). What is the problem?
  • keepitterron that code worked but now i want to change one thing... i have <select name="drop1" id="selectOwner" size="42" style = "width:190px;"> and i want to be able to run the above code when the user selects something from the list