How to pass multiple input fields having same class and name to ajax request and change corresponding fields based on reply?

Question

I have a form like below;

<form>
  <table>
    <tr><td><input class="asdf" type="text" name="qwerty" value=""/></td></tr>
    <tr><td><input class="items" type="text" name="item" value=""/></td></tr>
    <tr><td><input class="items" type="text" name="item" value=""/></td></tr>
    <tr><td><input class="items" type="text" name="item" value=""/></td></tr>
    <tr><td><input class="items" type="text" name="item" value=""/></td></tr>
    <tr><td><button id="mybutton">clickme</button></td></tr>
  </table>
</form>

I have some fields with similar name. I want to pass these into my ajax handler in a single instance. Also according to the ajax reply, the corresponding input field's value may be changed to either true or false.

$('#mybutton').click(function(){
  var myitem = $('.items').val();
  $.ajax({
    type: 'POST',
    url: 'ajaxhandler.php',
    data: 'qwerty='+$('.asdf').val()+'&item='+myitem,
    cache: false,
    success: function(result) {
      if(result == "true"){
        //change each correspinding input field to true
      }else{
        //change each correspinding input field to false
      }
    }
  });
});

Also I am little confused how to do the ajax reply. How can I achieve this? Below is an image showing the form before and after ajax (what I am trying to achieve);

Requirement

The input form fields (items) are generated dynamically. Sometimes there may be 1, sometimes 5 or 10. So it is not possible to give them separate names (like item1, item2 etc) and a common class, and catch them inside php like $_POST['item1'], $_POST['item2'] etc. I want to know how to set the JavaScript as well as the ajax PHP.

use `serialize()` function to post all form data in ajax request and change `name=item` to `name=item[]` — Gopal, Dec 31 '13 at 08:52
Or use `$('.items').serializeArray()` and `json_decode()` in the handler. — Barmar, Dec 31 '13 at 08:53
Take a look at this one: http://stackoverflow.com/questions/19133629/processing-dynamic-form/19133722#19133722 — Jumpa, Dec 31 '13 at 10:22

score 4 · Answer 1 · answered Dec 31 '13 at 08:54

Try with this

<form>
<table>
    <tr><td><input class="asdf" type="text" name="qwerty" value="0"/></td></tr>
    <tr><td><input class="items" type="text" name="item[]" value="1"/></td></tr>
    <tr><td><input class="items" type="text" name="item[]" value="2"/></td></tr>
    <tr><td><input class="items" type="text" name="item[]" value="3"/></td></tr>
    <tr><td><input class="items" type="text" name="item[]" value="4"/></td></tr>
    <tr><td><button id="mybutton">clickme</button></td></tr>
  </table>
</form>

Script

$('form').serialize()

In your code

$('#mybutton').click(function(){
  var mydata = $('form').serialize()
  // it will return like this qwerty=0&item%5B%5D=1&item%5B%5D=2&item%5B%5D=3&item%5B%5D=4
  $.ajax({
    type: 'POST',
    url: 'ajaxhandler.php',
    data: mydata,
    cache: false,
    success: function(result) {
      if(result == "true"){
        //change each correspinding input field to true
      }else{
        //change each correspinding input field to false
      }
    }
  });
});

and what about ajaxhandler.php? how can i return corresponding true and false? also i want to set true or false in form fields. For example, if the item1 value found false in php, the form field value may be changed from item1 to false. — Alfred, Dec 31 '13 at 09:24

How to pass multiple input fields having same class and name to ajax request and change corresponding fields based on reply?

1 Answers1