Jqueryが同じクラス名のフォームからフォームデータを取得しない

Question

同じクラスの2つのフォームの送信時にフォーム値を取得できません。私は、フォームの1提出

、 a）はjQueryがイベントは値が空 bは呼ばれるが提出）提出イベントがスキップされ、私は、データベースに情報を入力するPHPファイルに右取られています

私のjQuery

$(document).ready(function(){ 

    $('body').on('submit', '.newStaff', function(event) { 
    event.preventDefault(); 
    var firstName= this.firstName.value; 
    // do other stuff 
     //complete AJAX call 
    }); 
}); 

マイフォーム

<form class="newStaff" method="post" action="insertStaff.php"> 
    <input type="text" name="firstName" /> 
    // use other inputs..... 
    <input type="submit" value="submit" /> 
</form> 

<form class="newStaff" method="post" action="insertStaff.php"> 
    <input type="text" name="firstName" /> 
    // use other inputs..... 
    <input type="submit" value="submit" /> 
</form> 

私が正しく結合ではないのですか？前にこのような問題はなかった。私はいつも提出されたフォームに基づいてユニークな入力値を得ることができました。

Answer 1

は、あなたが "上の2つの形式提出する" とはどういう意味ですかこの

$(function() { 
 
    $('body').on('submit', '.newStaff', function(event) { 
 
    event.preventDefault(); 
 
    var firstName = $('.newStaff input[name="firstName"]').eq(0).val(); 
 
    alert(firstName); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="newStaff" method="post" action="insertStaff.php"> 
 
    <input type="text" name="firstName" value="1 2 3"/> 
 
    <input type="submit" value="submit" /> 
 
</form> 
 

 
<br/> 
 

 
<form class="newStaff" method="post" action="insertStaff.php"> 
 
    <input type="text" name="firstName" value="a b c"/> 
 
    <input type="submit" value="submit" /> 
 
</form>