javascript - 相同形式的干扰

我有两种形式的问题，即由同一按钮提交。
提交第一个表单时，该表单将被隐藏，而另一个表单将显示。
现在，当我单击第二个表单上的按钮时，变量值仍包含第一个表单中选择框中的'give'。

我究竟做错了什么？

jQuery代码：

$('.submit_button').click(function() {
    var value = $(".input_action").val();
    alert(value);

    switch(value) {
        case 'give':
            $('#content_wrapper').hide();
            $('#send_wrapper').show();
            break;

        default:
            alert("default");
            break;
    }
});

HTML代码：
表格1：

<div id='content_wrapper'>
<form class='form_content' method='post' action=''>
<select name='action' class='input_action'>
<option selected='give'>Give</option>
</select>
<input class='submit_button' type='button' name='button' value='submit'>
</form>

表格2：

<div id='send_wrapper'>
<form name='form_content' class='form_content' method='post' action=''>
<input name='input_action' class='input_action' value='' type='hidden'>
<input class='submit_button' type='button' name='button' value='submit'>
</form>
</div>

最佳答案

$(".input_action").val()将始终为您提供文档中第一个匹配的元素的值。

如果要从当前表单中获取一个，则需要找到当前表单，然后在其中找到匹配的元素。

事件处理程序的上下文将是被单击的元素，因此您可以使用this来实现。

您可以使用form属性获取表单。

然后，您可以使用jQuery find方法获取所需的元素。

var value = $( this.form ).find('.input_action').val();