jqueryのフォームから入力値を取得できません

Question

フォームページから値を取得して検証しています。 jqueryを使用して入力オブジェクトを処理し、ユーザーが入力した値をフェッチします。

私のHTMLコードは次のとおりです。

<form id="userDetails"> 

    <table class="containFormTable" cellspacing="8"> 

    <tr> 
     <td class="detail">Name:</td> 
     <td> 
     <input name="name" type="text" id="name" /> 
     </td> 
    </tr> 

    <tr> 
     <td class="detail">Email-Id:</td> 
     <td> 
     <input name="emailId" type="text" id="emailId"> 
     </td> 
    </tr> 

    <tr> 
     <td class="detail">Phone-No:</td> 
     <td> 
     <input name="phoneNo" type="text" id="phoneNo"> 
     </td> 
    </tr> 

    <tr> 
     <td colspan="2" style="padding-top: 50px"> 
     <input type="button" value="Submit" id="submit"> 
     </td> 
    </tr> 



    </table> 


</form> 

データをフェッチしている私のjavascriptのファイルのコードは次のとおりです。

$(document).ready(function() { 
    $('#submit').click(function() { 

    var name = $('#name').find('input[name="name"]').val(); 

    var emailId = $('#emailId').find('input[name="emailId"]').val(); 

    var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val(); 

    }); 
}); 

私は変数名で取得していたり​​、他には「未定義」である結果。 どこが間違っていますか？

Answer 1

ちょうど各セレクタ

$(document).ready(function(){ 
 

 

 

 

 
         $('#submit') 
 
          .click(
 
            function() { 
 

 
             var name = $('#name').val(); 
 

 
             var emailId = $('#emailId').val(); 
 

 
             var phoneNo = $('#phoneNo').val(); 
 

 
console.log(name); 
 
             console.log(emailId); 
 
             console.log(phoneNo); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="userDetails"> 
 

 
       <table class="containFormTable" cellspacing="8"> 
 

 
        <tr> 
 
         <td class="detail">Name:</td> 
 
         <td><input name="name" type="text" id="name"/></td> 
 
        </tr> 
 

 
        <tr> 
 
         <td class="detail">Email-Id:</td> 
 
         <td><input name="emailId" type="text" id="emailId"></td> 
 
        </tr> 
 

 
        <tr> 
 
         <td class="detail">Phone-No:</td> 
 
         <td><input name="phoneNo" type="text" id="phoneNo"></td> 
 
        </tr> 
 

 
        <tr > 
 
        <td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td> 
 
        </tr> 
 

 

 

 
       </table> 
 

 

 
      </form>

.find('input[name="name"]')からを削除します

Answer 2

あなたがする必要があるのは、このように、要素から値を取得している：あなたのコードはinput要素がそうでない（そして、子要素を探して、フォームフィールドへの参照を

var name = $('#name').val(); 
var emailId = $('#emailId').val(); 
var phoneNo = $('#phoneNo').val(); 

を得ていました持っている、従ってundefined）はあなたがすでに見つけた要素と同じものであり、それからその価値を得ようとします。