Can't get input field value using javascript?

Question

I seem to have a problem with getting field value using javascript and i think the facebook popup jquery script is blocking it but i don't know why...

I would appreciate if someone could help me out because right now im about to tear my hair off.

<input type="text" id="photo_album_name" style="width: 280px; height: 20px; color: #525252;" />
<textarea id="photo_album_desc" style="width: 280px; height: 100px; color: #525252;"></textarea>

function submit_photoalbum()
{
    var albumname = document.getElementById('photo_album_name').value; 
    var albumdesc = document.getElementById('photo_album_desc').value;

    alert("Album name: "+ albumname + ", Album Desc: " + albumdesc);
}  

You can view a live example at http://goo.gl/op6r4

Answer 1

Your problem is that you have mutiple elements with the same id => invalid HTML

<input type="text" id="photo_album_name" style="width: 280px; height: 20px; color: #525252;">
<input type="text" id="photo_album_name" style="width: 280px; height: 20px; color: #525252;">

<textarea id="photo_album_desc" style="width: 280px; height: 100px; color: #525252;"></textarea>
<textarea id="photo_album_desc" style="width: 280px; height: 100px; color: #525252;"></textarea>

Answer 2

You need to run your function on some event where the elements have value, or add value to them if you are running this on load.

FIDDLE

Answer 3

change the input to:

<input class="photo_album_name" style="width: 280px; height: 20px; color: #525252;" type="text"/>

and

<textarea class="photo_album_desc" style="width: 280px; height: 100px; color: #525252;"/>

and your selector to:

   var albumname = $('#facebox').find('.photo_album_name').val(); 
   var albumdesc = $('#facebox').find('.photo_album_desc').val();

Note this duplicate ID also:

<input id="add" style="padding-bottom: 3px; padding-left: 5px; padding-right: 5px; font-size: 13px; margin-right: 15px; padding-top: 3px;" onclick="submit_photoalbum();" type="button" value="Create Photo Album"/>

change to:

<input class="add" style="padding-bottom: 3px; padding-left: 5px; padding-right: 5px; font-size: 13px; margin-right: 15px; padding-top: 3px;" onclick="submit_photoalbum();" type="button" value="Create Photo Album"/>

Answer 4

Ok.. It seems that you're replicating your form. You have it on your HTML and when you call the facebox it replicates the hidden HTML. This replicates the ID's (as gdoron was stating).

It may be a good practice to use another framework, or to change the jQuery plugin to a more stable one (like http://fancybox.net ). Anyways. You can change your submit_photoalbum function to:

function submit_photoalbum()
{
    var albumname = $("#facebox > input").val(); 
    var albumdesc = $("#facebox > textarea").val();

    alert("Album name: "+ albumname + ", Album Desc: " + albumdesc);
} 

It's a bit hardcoded but it'll work for this.

Answer 5

既然你正在使用jQuery我只想尝试使用jQuery获取值，所以它应该是：

var albumname = $('#photo_album_name').val();