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

jQuery Post Form Data with .Ajax() Method

Zorglub answered on February 28, 2022 Popularity 9/10 Helpfulness 3/10

answer jQuery Post Form Data with .Ajax() Method

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 javascript jquery-post

Link to this answer
Share Copy Link

Contributed on Feb 17 2023

Zorglub

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Feb 28 2022

Defeated Dolphin

0 Answers Avg Quality 2/10

Ajax Form All Data Send

Comment

 $('#submit').on('click', function() {
             $.ajax({
                 url: "controller/php/add_project.php",
                 type: "POST",
                 data:  new FormData(document.getElementById("add_project_form")),
                 contentType: false,
                 processData:false,
                 cache: false,
                 success: function(dataResult){
                        console.log(dataResult);
                        var dataResult = JSON.parse(dataResult);
                        
                 },
                 error:function(dataResult){
                     console.log(dataResult);
                     alert('error / Add Project Again');
                 }
             });
         });

Popularity 10/10 Helpfulness 9/10 Language javascript

Source: Grepper

Tags: ajax

Link to this answer
Share Copy Link

Contributed on May 30 2022

faheem

0 Answers Avg Quality 2/10

jQuery Post Form Data with .Ajax() Method

Contents

More Related Answers

jQuery Post Form Data with .Ajax() Method

Closely Related Answers

jquery ajax post form

Ajax Form All Data Send

Grepper

Documentation

Social

Legal

Contact

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