从多个表单中获取选择框的值

时间:2013-06-01 18:00:05

标签: javascript jquery

基本上,我重复这种形式,每次都有自己的提交按钮。在这种情况下,我无法将表单中的所有选择框组合成一个表单。

<form method="post" action="">
  <select name="hour" class="hour">
     // option tags
  </select>
  <select name="minutes" class="minutes">
    // option tags
  </select>
<input type="submit" name="submit" class="submit">
</form>

我正在使用AJAX处理te值。

$(".submit").click(function() {
   var hour = $(".hour").val();
   var minutes = $(".minutes").val();
// AJAX code here
});

但是,变量'hour'和'minutes'只会保存第一个表单中选择框的值。如果在第三个表单的第二个上单击提交按钮,我怎么能让这些变量具有正确的值?

2 个答案:

答案 0 :(得分:2)

你可以这样做:

$(".submit").click(function () {
    var $form = $(this).closest('form');
    var hour = $form.find(".hour").val();
    var minutes = $form.find(".minutes").val();
    // AJAX code here
});

单击提交按钮,它将转到最近的form并找到其中的选择列表并相应地获取相应的值。然后你就可以处理数据了。

答案 1 :(得分:1)

添加上下文,例如:

$(".submit").click(function() {
   var hour = $(".hour", $(this).parent()).val();
   var minutes = $(".minutes", $(this).parent()).val();
// AJAX code here
});

修改 此代码仅供您参考。如果DOM结构不同,则可能需要更改。

您也可以使用'submit'事件代替'click'。在这种情况下,您可以使用$(this)作为上下文。