jQuery How to retrieve the name of an input text field using JQuery

Question

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    var pValue = $(".blah").find("p").html();
        alert(" Information in Paragraph tag is ### " + pValue);`enter code here`

    $(".blah").find($("input:text")).each(function(){
        alert("Value inside the Input text field is #### " + this.value);
    });
}); 

  </script>
</head>
<body>

    <div class="blah">
      <p>he he he</p>
      <input "type = text name ="userName" value = "abc"/>
      <input "type = text name ="id" value = "xyz"/>
    </div>
</body>
</html>

Question:

When i run the above HTML code i get the following alerts

Information in Paragraph tag is ### he he he
Value inside the Input text field is #### abc
Value inside the Input text field is #### xyz

I want to retrieve the input text field names (username and id) and place it in the alerts dynamically so that my alerts look as shown below. I want this functionality because if the user enters his username and not the id. i want to display that his id is empty.

Information in Paragraph tag is ### he he he
Value inside the userName is #### abc
Value inside the id is #### xyz

Thanks a lot in advance.

slandau · Accepted Answer · 2011-08-12 19:49:25Z

2

If you had a field like this:

<input id="tb" type="text" name="userName" value="abc"/>

And you wanted to get the name attribute in JQuery, it would look like this:

$('#tb').attr("name");

However your inputs are malformed and they do not have Id's or Classes, and looping through them would be extremely inefficient.

answered Aug 12, 2011 at 19:49

slandau

24.2k43 gold badges124 silver badges186 bronze badges

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

Comments

Robert · Accepted Answer · 2011-08-12 19:52:38Z

2

Try:

$(".blah").find($("input:text")).each(function(){         
    alert("Value inside "+$(this).attr("name")+" is #### " + this.value);     
});

answered Aug 12, 2011 at 19:52

Robert

8,7672 gold badges29 silver badges34 bronze badges

Comments

davecoulter · Accepted Answer · 2011-08-12 19:50:06Z

0

I am not really sure what your question is. However, to get the name of the control you are selecting:

var nameValue = $('.blah').attr('name');

answered Aug 12, 2011 at 19:50

davecoulter

1,82413 silver badges15 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-08-12 19:52:02Z

0

Your markup has a bunch of error, first fix those errors and to get the name of any input field just say

$("inputIdOrValidSelector").attr('name');

Try this

      <div class="blah">
          <p>he he he</p>
          <input type="text" name="userName" value="abc"/>
          <input type="text" name="id" value="xyz"/>
        </div>

 $(document).ready(function(){

    var pValue = $(".blah").find("p").html();
    alert(" Information in Paragraph tag is ### " + pValue);

    $(".blah").find($("input:text")).each(function(){
        alert("Value inside the " + this.name + " is " + this.value);
    });
});

answered Aug 12, 2011 at 19:52

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

ipr101 · Accepted Answer · 2011-08-12 19:53:33Z

0

alert("Value inside the userName is " + $("input:text[name=userName]").val());
alert("Value inside the id is " + $("input:text[name=id]").val());

Working demo - http://jsbin.com/aruhej

answered Aug 12, 2011 at 19:53

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

Jason Gritman · Accepted Answer · 2011-08-12 19:59:24Z

0

The this object from within your each call corresponds to the input element from the DOM. This element has the name attribute available on it. For example:

    alert("Value inside the " + this.name + " is #### " + this.value);

I've created a jsFiddle of this code as well.

answered Aug 12, 2011 at 19:59

Jason Gritman

5,3314 gold badges32 silver badges38 bronze badges

Collectives™ on Stack Overflow

jQuery How to retrieve the name of an input text field using JQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related