Question

我的网站上有很多表单。当在表单上触发提交时，我希望收到表单的ID和选择的选项。

HTML

<form name="order">
  <select id="count">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select><br/>
  <input type="text" name="id" value="6" />
  <input href="#" type="submit" value="Submit" /> 
</form>

JavaScript

    var fancyboxOptions = {
    ajax : {
        type: "POST",
        data: {
            id: null,
            count: null
        }
    }
}

$(document).ready(function() {

    fancyboxOptions.ajax.data.id = $('input[name="id"]').val();
    fancyboxOptions.ajax.data.count = $('#count').val();

    $('div#buy input').fancybox(fancyboxOptions);

    $('#count').change(function() {
        fancyboxOptions.ajax.data.count = $('#count').val();
    });

使用此代码，我只收到第一个表单中的数据 - 当提交被触发时，其他表单我从第一个表单而不是从我按下提交的表单中接收数据。

如何重构我的代码，因此表单提交会触发提交，只向我提供我按下提交的表单中的数据。

PS不要注意花哨的盒子，它的效果很好。

Answer 1

您是否需要遍历页面上的所有表单并在单击一个按钮后获取其值？如果是这样，试试这个：

$('form').each(function(){
    var currentForm = $(this);

    var someValue = currentForm.find('input[name="id"]').val();

    // do the rest here
});

如果这不是你的问题，那么可能它与使用id作为输入而不是类有关。你只能使用一次id，所以如果你的其他形式也包括＆lt; select id =“count”＆gt;然后当jQuery读取该值时，它将只返回第一个值。

希望这会有所帮助......

Answer 2

可能想要将您的代码更改为此类

<script>  
$('input[name=id]').parent().change(function(){
   fancyboxOptions.ajax.data.id = $(this).find('input[name="id"]').val();
   fancyboxOptions.ajax.data.count = $(this).find('#count').val();
});
</script>

这将在每个表单上安装一个包含名为id的输入字段的更改处理程序，并且回调函数（安装在parent()表单上）将可以访问“this”，它可以导航DOM并找到相对于表单节点的所有子字段。

在JQuery中选择当前表单的值

2 个答案: