jQuery的 - 按钮的onclick目标最接近的输入，并获得价值

Question

我希望同时使用具有相同的类名的形式为基础设计的按钮&输入。

如果单击1个按钮，它触发的形式和发送“空”值。

是否有可能通过jQuery的方式来指定按钮点击“最近的”输入。

请让我知道意见或投入来解决这个问题？

感谢

HTML：

<form> 
<div class="loginMHNo"> 
    <input class="login-MH--no" type="text" name="MHNumber" /> 
</div> 
<div class="loginPassword"> 
    <input class="login-MH--password" name="Password" type="password" /> 
</div> 
    <button class="loginSubmit btn" type="submit">Login</button> 
</form> 


<form> 
<div class="loginMHNo"> 
    <input class="login-MH--no" type="text" name="MHNumber" /> 
</div> 
<div class="loginPassword"> 
    <input class="login-MH--password" name="Password" type="password" /> 
</div> 
    <button class="loginSubmit btn" type="submit">Login</button> 
</form> 

Answer 1

您需要使用$(this).closest('form')得到closest()形式，当你点击提交按钮，使用$(this).closest('form').serialize()得到填充表单中的序列化值：

$(".loginSubmit").on('click', function(e) { 
 
    e.preventDefault(); 
 
    var closestForm = $(this).closest('form'); 
 
    console.log($(this).closest('form').serialize()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="loginMHNo"> 
 
    <input class="login-MH--no" type="text" name="MHNumber" /> 
 
    </div> 
 
    <div class="loginPassword"> 
 
    <input class="login-MH--password" name="Password" type="password" /> 
 
    </div> 
 
    <button class="loginSubmit btn" type="submit">Login</button> 
 
</form> 
 

 

 
<form> 
 
    <div class="loginMHNo"> 
 
    <input class="login-MH--no" type="text" name="MHNumber" /> 
 
    </div> 
 
    <div class="loginPassword"> 
 
    <input class="login-MH--password" name="Password" type="password" /> 
 
    </div> 
 
    <button class="loginSubmit btn" type="submit">Login</button> 
 
</form>

Answer 2

如果更改按钮，如：

loginSubmit类型提交按钮的onclick事件(onclick="login_clicked(this)")功能;

function login_clicked(_this){ 
    var params = $(_this).closest("form").serialize(); 
    ajax... 
} 

Answer 3

使用这样的代码：

$('.loginSubmit').click(function(){ 
    $(this).parents('form').serialize(); 
}); 

如果你想提交表单

$('.loginSubmit').click(function(){ 
    $(this).parents('form').submit(); 
}); 
//to submit the particular forms 

这里是serialize()函数文档和parents()功能。