Getting value of an element inside facebox div using jquery

Question

Hello,

I have two div tags as shown below on my page. When i reference the value of itemName element,using $('#itemName').val(); which i have in both the divs, i always get the value of the element in the first div which is ""(blank). Is there a way to get the value of the itemName element in the 2nd div i.e. facebox using jquery ?

info div

<div id="info" style="display: none;">
<center>
<strong>Name</strong>
<input id="itemName" type="text"/>
<br/>
<br/>
<strong>Price  </strong>
<input id="itemPrice" type="text"/>
<br/>
<br/>
</center>
</div>

facebox div

<div id="facebox" style="top: 27.3px; left: 478px; display: none;">
<div class="popup">
<table>
<tbody>
<tr>
</tr>
<tr>
<td class="b"/>
<td class="body">
<div class="content" style="display: block;">
<div id="info" style="">
<center>
<strong>Name</strong>
<input id="itemName" type="text"/>
<br/>
<br/>
<strong>Price  </strong>
<input id="itemPrice" type="text"/>
<br/>
<br/>
<input type="button" onclick="updateTab();" value="Add"/>
</center>
</div>
</div>

Thank You

Answer 1

An element id must be unique within a document. Your document is invalid and this is one of the consequences.

Make use of a validator, it is a cheap form of QA that makes it easy to grab some low hanging fruit.

Answer 2

IDs have to be unique on the page - the simple answer is you need to rename one of them.

If you really can't change them then you could use something like this:

$('#facebox input[type=text]:first').val();

Answer 3

If you look inside facebox.js, you'll see that there is an event that is triggered when facebox opens, so you just need to bind to that event, then obtain the value:

$(document).bind('reveal.facebox', function() { 
 $('#facebox #itemName').val();
})