Sending data via ajax with multiple inputs having the same name

Question

I am attempting to accomplish the following using jQuery.

I have 7 inputs, one for each day in the week. The html for this is generated server side. For each day I have a text input and a link for submitting the text for that day only via ajax to the server.

So far I have

<script type="text/javascript">
    $().ready(function(){
       $('.add_dish').click(function(){
          var mydata = $('form input[name=user_input]').val();
          window.alert(mydata)

          $.ajax({
            type: 'POST',
            url: '/add',
            data: mydata,
            cache: false,
            success: function(result) {
              if(result == "true"){
              }else{
              }
            }
          });
       });
    });
</script>

Server side generated code:

<h1>First day</h1>
<form>
<input type="text" name="user_input">
<a href="#" class="add">Add</a>
</form>

<h1>Second day</h1>
<form>
<input type="text" name="user_input">
<a href="#" class="add">Add</a>
</form>

<h1>Third day</h1>
<form>
<input type="text" name="user_input">
<a href="#" class="add">Add</a>
</form>

When I click Add ~~the alert box is empty~~ the value of the the input of the first day is always displayed. How can it be changed to reflect the selections of the element in the same <form> as the submitting link is in?

EDIT:
Highlighted the second part of the question.

Yaje · Accepted Answer · 2014-08-22T08:38:24.410

1

you are using jQuery selector the wrong way.

it should be like :

 var mydata = $('form input[name=user_input]').attr('value','something');

and if you just want the value of the input box to put in mydata :

var mydata = $('form input[name=user_input]').val();

EDIT :

For iterating on all the inputs with same name you have to use .each():

    $('.add_dish').click(function(){

              $('form input[name=user_input]').each(function(){
              var mydata = $(this).val();
              window.alert(mydata);
              });


              $.ajax({
                type: 'POST',
                url: '/add',
                data: mydata,
                cache: false,
                success: function(result) {
                  if(result == "true"){
                  }else{
                  }
                }
              });
           });

References :

jQuery Input Selector

jQuery Class Selector

jQuery .each()

edited Aug 22 '14 at 08:38

answered Aug 22 '14 at 08:28

Yaje

2,753
18
32

That helped. But this will always display the data of the first input. – kasperhj Aug 22 '14 at 08:33
This does indeed iterate through all the input boxes, but is there a way of only getting the value of the input box in the same `
` scope as the link that invoke the ajax function?
– kasperhj Aug 23 '14 at 13:08
Figure it out with some `id`. – kasperhj Aug 24 '14 at 07:46

score 0 · Answer 2 · answered Aug 22 '14 at 08:27

0

You are trying to select element using class name but "user_input" is not a class name:) Use http://api.jquery.com/attribute-equals-selector/

answered Aug 22 '14 at 08:27

akmed0zmey

553
6
14

Sending data via ajax with multiple inputs having the same name

2 Answers2

Linked