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();

  });
});

我得到的变量名称或其他任何结果是＆＃34; undefined＆＃34;。我在哪里错了？

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>

无法从jquery中的表单中获取输入值

2 个答案: