Question

我有一个早期形式的应用程序，允许您设定目标，然后您可以接受它们。每个目标都有一个单独的唯一ID，允许通过使其接受＆＃34;来识别和接受它。数据库中的字段＆＃39; 1＆＃39;。

每个目标都是以下代码的迭代：

<div id='goal'>
<div class='setby'>Set on $timeset by $name</div>
<div class='goal'>$goal</div>
<div class='completeby'>Complete by $goaltime.</div>
<form id='acceptGoal' method='post'>
<input type='hidden' class='id' name='id' value='$gid'>
<input type='button' class='submit' value='Accept?'></button>
</form>
</div>

我的问题是，无论我在多个页面上接受哪个目标，jQuery都只返回列表中第一个的ID。我尝试将id的{{1}}字段更改为<input>字段，但这不起作用，并且还尝试了其他修补程序，例如class和{{ 1}}，然后完全卡住了。任何帮助将不胜感激！

的script.js

[id=id]

Answer 1

尝试更改：

var data = $("[class=id]").val();

为：

var data = $(this).prev().val();

您需要选择相对于单击的输入，这将执行此操作。如果由于某种原因输入的顺序可能会改变，您也可以这样做：

var data = $(this).closest('form').find('input[name="id"]')val();

Answer 2

您只能在id元素上复制form。

您甚至不应该在页面上重复id。

替代表单元素上的submit事件，并在一个操作中序列化其中的所有输入：

$('form').submit(function(event){
     event.preventDefault();    // Stop the normal form postback
     var data = $(this).serialize();
     $.ajax({
         type: "POST",
         url: "accept.php",
         datatype: "json",
         data: data,
         success: function(response){
             $("[id=result]").html(response);
         },
         error: function(response) {
             alert("error");
         }
    });
});

Answer 3

首先：这个选择器有什么用？

$("[class=id]").val()

将其更改为：

$(".id").val()

正如TrueBlueAussie所说，你不应该在一个页面上拥有多个相同的id。要获取表单字段的值，您可以使用：

$('form').submit(function(e){
    //Prevent an actual submit from happening
    e.preventDefault();

    //Get the value of the field with classname id in this form
    var data = $(this).find('.id').val();

    //Do your AJAX awesomeness here
});

$（this）用于将表单字段查找到此表单，而不是首页出现在页面上的某个位置。

只选择第一个div类

3 个答案: