-33 Votes

jQuery: Submit complete form and receive content with Ajax

Tutorial by Stefan Trost | Last update on 2021-04-30 | Created on 2012-08-21

In this tutorial, I would like to show you, how to use jQuery and Ajax to submit a complete form and send the information to an arbitrary script.

For the following example, on the one hand we need an HTML page with our form and on the other hand, we also need a PHP script, that we save in script.php.

The HTML Page

Our HTML page contains the following content, in which for the sake of clarity, I have abstained from any design and any meta tags and other things like that:

<html>
  <head></head>
  <body>
    <form id="form1" action="">
      <p>Please enter your name:</p>
      <input name="input1" value="">
      <input type="submit" value="Send">
    </form>
 
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#form1").submit(function(e){
          e.preventDefault();
          $.post("script.php",$("#form1").serialize(),function(msg){
            alert(msg);
          });
        });
      });
    </script>
  </body>
</html>

In the upper part, we can see our form "form1", which consists of an input field "input1" and a submit button to send the data. Among them, we include a recent version of jQuery and write in a script section the necessary instructions to intercept the submission of the form.

The function $(document).ready(... is executed, as soon as the complete page is loaded. With $("#form1").submit(), we catch the submit event of our form. That means, in other words, that whenever clicking on the submit button, it is happening that, what we have defined in this function. First of all, we are using an e.preventDefault() here. This means, that we inhibit the normal behavior (submit and load page again). Instead, with $.post() and $("#form1").serialize(), we send all data of the form to the script "script.php". The output of this script, we catch with the function behind (msg) and show the output with the help of an alert().

So, after pressing the submit button, an alert dialog should open, in which the result of the script is displayed.

The Script

Our script file "script.php" has the following content:

<?php
  echo 'Hello ',$_POST['input1'],'!';
?>

We catch the data, that we have sent via POST from our form, with $_POST[] and output this information along with "Hello" and "!" in our script. So, once you have entered your name in the form before and you have clicked on the submit button, you name will be displayed in a JavaScript alert.

This small example should only explain briefly, how to implement a jQuery Ajax call when submitting a form. Of course, you can extend this function and especially the script to do lots of other reasonable things with it. Especially, you should always check the data before being further processed, in order to prevent a possible manipulation by the user. Because in this example only the pure concept should be shown, I omitted such things here.

If you should have any questions, feel free to write a comment. Gladly, I will expand this tutorial or write other tutorials to the issues of interest.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

jQuery: Send HTML5 Canvas to Server via Ajax

Tutorial | 0 Comments

Send HTML5 Canvas as Image to Server

Tutorial | 0 Comments

How to resize Image before Upload in Browser

Tutorial | 13 Comments

JavaScript: Catch Submit of Form

Tutorial | 0 Comments

Send form input as an array to PHP script

Tip | 0 Comments

PHP: Send Output of a Script by Mail

Tutorial | 0 Comments

jQuery: Disable Submit Button if no Checkbox is selected

Tutorial | 7 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.