Send form data using ajax

Question

I want to send all input in a form with ajax   I have a form like this    lt form action  target php  method  post   gt       lt input type  text  name  lname    gt       lt input type  text  name  fname    gt       lt input type  buttom  name   send  onclick  return f this form  this form fname  this form lname     gt   lt  form gt    And in  js file we have following code    function f  form  fname  lname        att form attr  action           post att   fname   fname   lname  lname   done function data           alert data               return true    But this is not working i don t want to use Form data

User · Accepted Answer

as far as we want to send all the form input fields which have name attribute, you can do this for all forms, regardless of the field names:

First Solution

function submitForm(form){
    var url = form.attr("action");
    var formData = {};
    $(form).find("input[name]").each(function (index, node) {
        formData[node.name] = node.value;
    });
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}

Second Solution: in this solution you can create an array of input values:

function submitForm(form){
    var url = form.attr("action");
    var formData = $(form).serializeArray();
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}

User · Answer

I have written myself a function that converts most of the stuff one may want to send via AJAX to GET of POST query  Following part of the function might be of interest     if data tagName  null amp  amp data tagName toUpperCase     FORM           Get all the input elements in form     var elem   data elements        Loop through the element array     for var i   0  i  lt  elem length  i              Ignore elements that are not supposed to be sent       if elem i  disabled  null amp  amp elem i  disabled  false  elem i  type   button   elem i  name  null   elem i  type   checkbox  amp  amp elem i  checked  false           continue           Add  amp  to any subsequent entries  that means every iteration except the first one         if data string length gt 0          data string    amp            Get data for selectbox       if  elem i  tagName toUpperCase       SELECT                   data string    elem i  name         encodeURIComponent elem i  options elem i  selectedIndex  value                    Get data from checkbox       else if elem i  type   checkbox                   data string    elem i  name        elem i  value  null  on  elem i  value                   Get data from textfield       else                 data string    elem i  name    elem i  value           encodeURIComponent elem i  value                          return data string         It does not need jQuery since I don t use it  But I m sure jquery s   post accepts string as seconf argument   Here is the whole function  other parts are not commented though  I can t promise there are no bugs in it   function ajax create request string data  recursion      var data string           Zpracovani formulare   if data tagName  null amp  amp data tagName toUpperCase     FORM           Get all the input elements in form     var elem   data elements        Loop through the element array     for var i   0  i  lt  elem length  i              Ignore elements that are not supposed to be sent       if elem i  disabled  null amp  amp elem i  disabled  false  elem i  type   button   elem i  name  null   elem i  type   checkbox  amp  amp elem i  checked  false           continue           Add  amp  to any subsequent entries  that means every iteration except the first one         if data string length gt 0          data string    amp            Get data for selectbox       if  elem i  tagName toUpperCase       SELECT                   data string    elem i  name         encodeURIComponent elem i  options elem i  selectedIndex  value                    Get data from checkbox       else if elem i  type   checkbox                   data string    elem i  name        elem i  value  null  on  elem i  value                   Get data from textfield       else                 if elem i  className indexOf  autoempty    -1              data string    elem i  name                        else           data string    elem i  name    elem i  value           encodeURIComponent elem i  value                          return data string           Loop through array   if data instanceof Array        for var i 0  i lt data length  i            if data string              data string    amp          data string  recursion     i      data i             return data string          Loop through object  like foreach    for var i in data        if data string            data string    amp        if typeof data i    object           if recursion  null          data string   ajax create request string data i   i         else         data string   ajax create request string data i   recursion     i                 else if recursion  null        data string  i     data i       else        data string  recursion     i      data i         return data string

User · Answer

can you try this    function f     fname       input name  fname     val    lname       input name  fname     val    att form attr  action       post att   fname   fname   lname  lname   done function data   alert data       return true

User · Answer

In your function form is a DOM object  In order to use attr   you need to convert it to jQuery object   function f form  fname  lname        action     form  attr  action          post att   fname   fname   lname  lname   done function  data            alert data               return true      With  serialize    function f form  fname  lname        action     form  attr  action          post att    form  serialize     done function  data            alert data               return true      Additionally  You can use  serialize

User · Answer

you can use serialize method of jquery to get form values  Try like this   lt form action  target php  method  post   gt   lt input type  text  name  lname    gt   lt input type  text  name  fname    gt   lt input type  buttom  name   send  onclick  return f this form     gt   lt  form gt   function f  form        var formData     form  serialize        att form attr  action           post att  formData  done function data           alert data               return true

User · Answer

ajax     url   target php     type   post     data   fname   fname   amp lname   lname     done function data      alert data

User · Answer

The code you ve posted has two problems   First   lt input type  buttom  should be  lt input type  button       This probably is just a typo but without button your input will be treated as type  text  as the default input type is text   Second  In your function f   definition  you are using the form parameter thinking it s already a jQuery object by using form attr  action     Then similarly in the   post method call  you re passing fname and lname which are HTMLInputElements   I believe what you want is form s action url and input element s values   Try with the following changes   HTML     lt form action   echo json   method  post  gt       lt input type  text  name  lname    gt       lt input type  text  name  fname    gt        lt  -- change  buttom  to  button  -- gt       lt input type  button  name  send  onclick  return f this form  this form fname  this form lname      gt   lt  form gt    JavaScript  function f form  fname  lname        att   form action     Use form action       post att            fname  fname value     Use fname value         lname  lname value    Use lname value        done function  data            alert data               return true      Here is the fiddle

[javascript] Send form data using ajax

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax