Jquery - 最も近い入力をonclickし、値を取得

Question

ボタンの同じクラス名を持つフォームをデザインに基づいて入力します。&

ボタンをクリックすると、フォームと「空の」値の両方が送信されます。

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').serialize()を使用する場合closest()フォームを取得するために$(this).closest('form')を使用する必要があります。

$(".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

あなたが変更した場合のように、ボタン：ボタンとのonclickイベントに提出

loginSubmitタイプ(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()関数のドキュメントがあります。