Question

我正在尝试使用jQuery完成以下操作。

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

到目前为止我已经

了

<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 ~~警告框为空~~时，始终显示第一天输入的值。如何更改以反映提交链接所在的相同 <form>中元素的选择？

修改：
突出了问题的第二部分。

Answer 1

你正在以错误的方式使用jQuery选择器。

应该是这样的：

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

如果您只想将输入框的值放入mydata：

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

编辑：

要迭代所有具有相同名称的输入，您必须使用.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 Input Selector

jQuery Class Selector

jQuery .each()

Answer 2

您正在尝试使用类名选择元素，但“user_input”不是类名:)使用http://api.jquery.com/attribute-equals-selector/

通过具有相同名称的多个输入的ajax发送数据

2 个答案: