Unable to fetch the input values from the form in jquery

Question

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.

My HTML code is:

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

My javascript file code which is fetching the data is:

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

  });
});

The result I am getting in the variable name or any other is "undefined". Where am I going wrong in it?

Scott Marcus · Accepted Answer · 2017-02-04 19:13:42Z

1

All you need to do is get the value from the elements, like this:

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

Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.

answered Feb 4, 2017 at 19:13

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Curiousdev · Accepted Answer · 2017-02-04 19:14:46Z

Just remove .find('input[name="name"]') from each selector

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

Collectives™ on Stack Overflow

Unable to fetch the input values from the form in jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related