javascript - 选择触发功能的表单内的所有输入

Question

我试图找到使用 jquery 选择表单中的所有输入，触发器是从那里启动的。例如，如果在表单 1 中单击按钮，则只会选择表单 1 中的输入，而不会选择表单 2 中的任何内容。

<form action="" method="POST">    <!--form 1-->

<input type="text" />
<input type="text" />
<input type="hidden" value="87678"  />

<input type="button" onclick="doit()" />

</form>




<form action="" method="POST">   <!--form 2-->

<input type="text" />
<input type="text" />
<input type="hidden" value="87678"  />

<input type="button" onclick="doit()" />

</form>

Answer 1

Try this...

$(':button').on('click', function(){
    var form = $(this).parents('form:first');
    $(form).children().each(function(evt){
        if($(this).attr('type') == 'text'){
            alert(this.value);
        }
    });
});

See this Example jsFiddle

Greetings.

Answer 2

使用事件目标到达父表单并查找该表单中的所有输入

function doit(event){
    $(event.target).parent("form").find("input")
}

为此，您需要将锚标记的 html 更改为

<input type="button" onclick="doit(event)" /> 

Answer 3

$('input[type=button]').click(function(){ 
    console.log( $('input',$(this).closest('form')) ) 
});

http://jsfiddle.net/kR3ws/1/

Answer 4

将id字段添加到您的按钮和表单。

<form id="form1" action="" method="POST">    <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678"  />
<input id="btn1" type="button" onclick="doit()" />
</form>

<form id="form2" action="" method="POST">   <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678"  />
<input id="btn2" type="button" onclick="doit()" />
</form>

然后像这样声明事件：

$('#btn1').click(function(){
    var data = $('#form1').serialize();
    alert('form1 : '+data);
});

$('#btn2').click(function(){
    var data = $('#form2').serialize();
    alert('form2 : '+data);
});