Issue getting value of textarea when displayed in Facebox

[Solarpitch]

Hi,

 

I'm using the JQuery lightbox "Facebox" to display a textarea. I display the text area with a button. When the user types text into the textarea and clicks submit it wont pass the value to the Jquery function, but works fine when the textarea is not displayed in the lightbox.

 

JQuery Function

$(function() {
$(".insert").live('click', function() {

	var desc = $("freetext").val();
	alert(desc);


	return false;
});
});

 

 

<a href="#freetext" rel="facebox">Add Free Text</a> // popup lightbox with textarea and button


   <div id="free_text" style="display:none;">
  
<TEXTAREA NAME="freetext" id="freetext" class="freetext" COLS=40 ROWS=6>Test</TEXTAREA><br/>
<INPUT TYPE=SUBMIT VALUE="Insert"  class="insert" id="insert">

  </div>

 

So basically, when I click insert in the lightbox it returns the value as "Test" which has been hard coded in the textarea. However when I ad anything to this it still returns "Test" so is not picking up the dynamic input at all.

[seanlim]

try using $("#freetext").val(); instead?

[Solarpitch]

I've tried all of em... .val(), .text(), .html() .. still no joy. It's very strange but something simple I suspect  :-\

[seanlim]

i meant including the hash sign in front as in ID selector...

[Solarpitch]

Ah right.. sorry yeah thats in my code already.

[seanlim]

Any example page?

 

I plugged your HTML code and JQuery into a page and everything works, after changing "display:none" to "display:block" and using $("#freetext").val(). Note the #freetext. It is probably something else on the page that is causing the unexpected behaviour if using the ID selector still does not solve the issue.

[Solarpitch]

It seems to be that the jQuery only reads from the value of the textfield when it is not display using Facebox. When we use Facebox to popup the textfield and click insert, it still reads from the textfield on the page so to speak, like, kinda ignores the value in the lightbox.

 

I dont have an example page at the moment but can probably set one up later if you have no other suggestions.

[seanlim]

can you try:

 

alert($("[id=freetext]").length);

 

just to see if there are actually multiple elements on the page with id="freetext"?

[Solarpitch]

I just ran that and it returns 2? ... U'm but there's only one in the code. When it displays it in the lightbox I wonder if it's referencing it twice because of that.

[JustLikeIcarus]

Problem is facebox is not moving the content you display in a facebox but its making a copy of it.  So therefore you have 2 instance of the textarea when it displays.  If you change the click handler to the following it works.

$(function() {
$(".insert").live('click', function() {

	var desc = $(this).parent().find('textarea').val();
	alert(desc);


	return false;
});
});

[seanlim]

I've never used facebox, but I don't think it's right to have 2 elements with the same ID. Defeats the entire purpose of IDs IMO, and can cause these kinda unexpected stuff to happen. IDs were never meant to be duplicated!

[Solarpitch]

Problem is facebox is not moving the content you display in a facebox but its making a copy of it.  So therefore you have 2 instance of the textarea when it displays.  If you change the click handler to the following it works.

$(function() {
$(".insert").live('click', function() {

	var desc = $(this).parent().find('textarea').val();
	alert(desc);


	return false;
});
});

 

This sorted the problem. And Sean your right, doesnt make sense to have two ID's the same but Facebox basically copied the one that's set to display:none; and shows it in the lightbox (Facebox). Thanks for your help guys.