Breaking News: Grepper is joining You.com. Read the official announcement!

jquery ajax post form

Defeated Dolphin answered on February 28, 2022 Popularity 10/10 Helpfulness 10/10

answer jquery ajax post form

related jQuery Post Form Data with .Ajax() Method

jquery ajax post form

Comment

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var actionUrl = form.attr('action');
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response from the php script.
        }
    });
    
});

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: javascript jquery-ajax post

Link to this answer
Share Copy Link

Contributed on Feb 28 2022

Defeated Dolphin

0 Answers Avg Quality 2/10

Closely Related Answers

jQuery Post Form Data with .Ajax() Method

Comment

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery post form data with .ajax() method by codeofaninja.com</title>
    <style>
      div {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>jQuery post form data with the .ajax() method</h1>
    <div>Filling out and submitting the form below to receive a response.</div>
    <!-- our form -->
    <form id="userForm" action="/form/submit" method="post">
      <div>
        <input type="text" name="firstname" placeholder="Firstname" />
      </div>
      <div>
        <input type="text" name="lastname" placeholder="Lastname" />
      </div>
      <div>
        <input type="email" name="email" placeholder="Email" />
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>
    <!-- where the response will be displayed -->
    <div id="response"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script>
      $(document).ready(function() {
        $('#userForm').submit(function() {
          // showing that something is loading
          $('#response').html("<b>Loading response...</b>");
          /*
           * 'post_receiver.php' - where you will be passing the form data
           * $(this).serialize() - for reading form data quickly
           * function(data){... - data includes the response from post_receiver.php
           */
          $.ajax({
              type: 'POST',
              url: 'post_receiver.php',
              data: $(this).serialize()
            })
            .done(function(data) {
              // demonstrate the response
              $('#response').html(data);
            })
            .fail(function() {
              // if posting your form failed
              alert("Posting failed.");
            });
          // to restrain from refreshing the whole page, it
          returns false;
        });
      });
    </script>
  </body>
</html>

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.w3docs.com

Tags: form-data form

Link to this answer
Share Copy Link

Contributed on Feb 17 2023

Zorglub

0 Answers Avg Quality 2/10

jquery ajax post form

Contents

More Related Answers

jquery ajax post form

Closely Related Answers

jQuery Post Form Data with .Ajax() Method

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.