javascript - 在 JQuery 中选择当前表单的值

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

可能想把你的代码改成这样

<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 并找到与表单节点相关的所有子字段。