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
– Gopal, Commented Dec 31, 2013 at 8:52
Or use $('.items').serializeArray() and json_decode() in the handler. — Barmar
– Barmar, Commented Dec 31, 2013 at 8:53
Take a look at this one: stackoverflow.com/questions/19133629/processing-dynamic-form/… — Jumpa
– Jumpa, Commented Dec 31, 2013 at 10:22

Sridhar R · Accepted Answer · 2013-12-31 08:54:49Z

4

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
      }
    }
  });
});

answered Dec 31, 2013 at 8:54

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alfred Over a year ago

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 Over a year ago

how can i grab each item inside php?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related