通过具有相同名称的多个输入通过ajax发送数据 [英] Sending data via ajax with multiple inputs having the same name

问题描述

我正在尝试使用jQuery完成以下任务.

I am attempting to accomplish the following using jQuery.

我有7个输入，一周中每天有1个输入.用于此的html是在服务器端生成的. 对于每一天，我都有一个文本输入和一个链接，用于仅通过ajax将当天的文本提交到服务器.

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>

服务器端生成的代码:

<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>

当我单击Add 警报框为空时，总是显示第一天输入的值.

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.

推荐答案

您使用jQuery选择器的方式错误.

you are using jQuery selector the wrong way.

应该是这样的:

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

，如果您只是想将输入框的值放在mydata中:

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

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

要迭代具有相同名称的所有输入，必须使用.each():

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

参考文献:

jQuery输入选择器

jQuery类选择器

jQuery .each()

这篇关于通过具有相同名称的多个输入通过ajax发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！