<p>Im trying to submit a HTML form using AJAX using this example.</p> <p>My HTML code:</p> <pre class="prettyprint"><code><form id="formoid" action="studentFormInsert.php" title="" method="post"> <div> <label class="title">First Name</label> <input type="text" id="name" name="name" > </div> <div> <label class="title">Name</label> <input type="text" id="name2" name="name2" > </div> <div> <input type="submit" id="submitButton" name="submitButton" value="Submit"> </div> </form> </code></pre> <p>My script:</p> <pre class="prettyprint"><code><script type="text/javascript"> $(document).ready(function() { $('#formoid').ajaxForm(function() { alert("Thank you for your comment!"); }); }); </script> </code></pre> <p>This is not working, I'm not even getting the alert message and when I submit I don't want to redirect to another page, I just want to show the alert message.</p> <p>Is there a simple way of doing it?</p> <p>PS: I have several fields, I have just put two as an example.</p>

<h3>Quick Description of AJAX</h3> <p>AJAX is simply Asyncronous JSON or XML (in most newer situations JSON). Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience. In this specific case we are doing a FORM submission using AJAX.</p> <p>Really quickly there are 4 general web actions <code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>; these directly correspond with <code>SELECT/Retreiving DATA</code>, <code>INSERTING DATA</code>, <code>UPDATING/UPSERTING DATA</code>, and <code>DELETING DATA</code>. A default HTML/ASP.Net webform/PHP/Python or any other <code>form</code> action is to "submit" which is a POST action. Because of this the below will all describe doing a POST. Sometimes however with http you might want a different action and would likely want to utilitize <code>.ajax</code>.</p> <h3>My code specifically for you (described in code comments):</h3> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-js lang-js prettyprint-override"><code>/* attach a submit handler to the form */ $("#formoid").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get the action attribute from the <form action=""> element */ var $form = $(this), url = $form.attr('action'); /* Send the data using post with element id name and name2*/ var posting = $.post(url, { name: $('#name').val(), name2: $('#name2').val() }); /* Alerts the results */ posting.done(function(data) { $('#result').text('success'); }); posting.fail(function() { $('#result').text('failed'); }); });</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="formoid" action="studentFormInsert.php" title="" method="post"> <div> <label class="title">First Name</label> <input type="text" id="name" name="name"> </div> <div> <label class="title">Last Name</label> <input type="text" id="name2" name="name2"> </div> <div> <input type="submit" id="submitButton" name="submitButton" value="Submit"> </div> </form> <div id="result"></div></code></pre> </div> </div> <hr> <h3>Documentation</h3> <p>From jQuery website <code>$.post</code> documentation.</p> <p><em><strong>Example</strong>: Send form data using ajax requests</em></p> <pre class="prettyprint"><code>$.post("test.php", $("#testform").serialize()); </code></pre> <p><em><strong>Example</strong>: Post a form using ajax and put results in a div</em></p> <pre class="prettyprint"><code><!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" /> </form>  <div id="result"></div> <script> /* attach a submit handler to the form */ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $(this), term = $form.find('input[name="s"]').val(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, { s: term }); /* Put the results in a div */ posting.done(function(data) { var content = $(data).find('#content'); $("#result").empty().append(content); }); }); </script> </body> </html> </code></pre> <hr> <h3>Important Note</h3> <p>Without using OAuth or at minimum HTTPS (TLS/SSL) please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)</p>

<p>If you add:</p> <blockquote> <p>jquery.form.min.js</p> </blockquote> <p><strong>You can simply do this:</strong></p> <pre class="prettyprint"><code><script> $('#myform').ajaxForm(function(response) { alert(response); }); // this will register the AJAX for <form id="myform" action="some_url"> // and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response </script> </code></pre> <h3>NOTE:</h3> <p>You could use simple $('FORM').serialize() as suggested in post above, but that will not work for <strong>FILE INPUTS</strong>... ajaxForm() will.</p>

Submitting HTML form using Jquery AJAX

Tags:

jquery

ajax

form-submit

Im trying to submit a HTML form using AJAX using this example.

My HTML code:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

My script:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

This is not working, I'm not even getting the alert message and when I submit I don't want to redirect to another page, I just want to show the alert message.

Is there a simple way of doing it?

PS: I have several fields, I have just put two as an example.

472

asked May 01 '13 17:05

Oliveira

3 Answers

Quick Description of AJAX

AJAX is simply Asyncronous JSON or XML (in most newer situations JSON). Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience. In this specific case we are doing a FORM submission using AJAX.

Really quickly there are 4 general web actions GET, POST, PUT, and DELETE; these directly correspond with SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, and DELETING DATA. A default HTML/ASP.Net webform/PHP/Python or any other form action is to "submit" which is a POST action. Because of this the below will all describe doing a POST. Sometimes however with http you might want a different action and would likely want to utilitize .ajax.

My code specifically for you (described in code comments):

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

Documentation

From jQuery website $.post documentation.

Example: Send form data using ajax requests

$.post("test.php", $("#testform").serialize());

Example: Post a form using ajax and put results in a div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Important Note

Without using OAuth or at minimum HTTPS (TLS/SSL) please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)

148

answered Sep 25 '22 14:09

abc123

var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })

answered Sep 23 '22 14:09

Varun S

If you add:

jquery.form.min.js

You can simply do this:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

NOTE:

You could use simple $('FORM').serialize() as suggested in post above, but that will not work for FILE INPUTS... ajaxForm() will.