Question

我遇到两个表单的问题，即由同一个按钮提交。提交第一个表单时，它被隐藏，另一个表单显示。现在，当我单击第二个表单上的按钮时，变量值仍然包含“给”＆＃39;来自第一种形式的选择框。

我做错了什么？

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>

Answer 1

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

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

事件处理程序的上下文将是单击的元素，因此您可以使用this获取该内容。

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

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

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

Answer 2

您的问题是 - 您找不到合适的.input_action元素。试试这个：

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

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

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

Answer 3

首先关闭你的第一个div

<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>
</div>

你的第二个表格是好的

并在你的jquery脚本中将'give'大小写改为'Give'

这是一个fiddle

相同的形式干扰

3 个答案: