無法從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

您需要做的就是從元素中獲取值，如下所示：

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

您的代碼獲取對表單字段的引用，然后查找與您已經找到的元素相同的子元素（這些input元素沒有，因此undefined ），然后嘗試獲取該元素的值。

Answer 2

只需從每個選擇器中刪除.find('input[name="name"]')

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