CODEWITHSUNDEEP
jquery
Elitmiar
Elitmiar

Reputation: 36839

How to get a value of an element by name instead of ID

How could I get the value of an element via the attribute name instead of the ID. eg if I use by id it would be $('#id').val();

Upvotes: 144

Views: 491888

Answers (11)

Neeraj Kumar
Neeraj Kumar

Reputation: 31

You can use as per your HTML structure and the name attribute,

Example: 1

HTML

<input type="text" name="employee_name" />

jQuery Code

$("input[name='employee_name']").val();

Example: 2

HTML

<input type="text" name="employee['name']" />
<input type="email" name="employee['email']" />

jQuery Code

$("input[name='employee\\[name\\]']").val();
$("input[name='employee\\[email\\]']").val();

Demo

$("#btn_get_name").click(function(){
  alert("Employee name: " + $("input[name='employee_name']").val());
});


$("#btn_get_info").click(function(){
  alert("Employee name: " + $("input[name='employee\\[name\\]']").val() + ", Email: " + $("input[name='employee\\[email\\]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h3>Example: 1</h3>

<input type="text" name="employee_name" placeholder="Name"/>
<button id="btn_get_name">Get Employee Name</button>

<h3>Example: 2</h3>

<input type="text" name="employee[name]" placeholder="Name"/> <br/> <br/>
<input type="text" name="employee[email]" placeholder="Email"/>

<button id="btn_get_info">Get Employee Information</button>

Upvotes: 0

LeMark
LeMark

Reputation: 21

Only one thing more: when you´re using the "crasis variable assignment" you need to use double cotes too AND you do not need to use the "input" word!:

valInput  = $(`[name="${inputNameHere}"]`).val();

Upvotes: 2

Amira Ahmed
Amira Ahmed

Reputation: 1

What element is used for the part with a green background? Just type the name of the element without "<" and ">" characters. For example type P, not <P> if the answer is the <P> element.

Upvotes: 0

jones
jones

Reputation: 755

//name directly given
<input type="text" name="MeetingDateFrom">
var meetingDateFrom = $("input[name=MeetingDateFrom]").val();

//Handle name array
<select multiple="multiple" name="Roles[]"></select>
 var selectedValues = $('select[name="Roles[]"] option:selected').map(function() {
    arr.push(this.value);
  });

Upvotes: 1

Abnormal
Abnormal

Reputation: 21

let startDate = $('[name=daterangepicker_start]').val();
alert(startDate);

Upvotes: 1

Ajay Kumar
Ajay Kumar

Reputation: 11

This works fine .. here btnAddCat is button id 

$('#btnAddCat').click(function(){
        var eventCategory=$("input[name=txtCategory]").val();
        alert(eventCategory);
    });

Upvotes: 1

Anshul
Anshul

Reputation: 549

To get the value, we can use multiple attributes, one of them being the name attribute. E.g 

$("input[name='nameOfElement']").val();

We can also use other attributes to get values

HTML

<input type="text" id="demoText" demo="textValue" />

JS

$("[demo='textValue']").val();

Upvotes: 10

vineel
vineel

Reputation: 3683

Use the name attribute selector:

$("input[name='nameGoesHere']").val();

It is a mandatory requirement to include quotes around the value, see: http://api.jquery.com/attribute-equals-selector/

Upvotes: 17

cyberoot
cyberoot

Reputation: 340

you can also use the class name.

$(".yourclass").val();

Upvotes: -1

rfunduk
rfunduk

Reputation: 30442

$('[name=whatever]').val()

The jQuery documentation is your friend.

Upvotes: 55

Nick Craver
Nick Craver

Reputation: 630429

Use the name attribute selector:

$("input[name=nameGoesHere]").val();

Upvotes: 390

Related Questions