0

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://www.seominds.com/test/test.html

Improve this question
2
  • Start using frameworks like JQuery Commented Apr 24, 2012 at 18:03
  • If you're running your javascript on load and not on an event, the two elements above will have no value, as they don't have a value attribute. Commented Apr 24, 2012 at 18:04

5 Answers 5

Reset to default
5

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

@keune. in the live example he linked in his question. look at the HTML.
Huh? i don't see that at all or am i blind?
I don't see it either, there are no duplicate ID's on the page I'm redirected to ?
@adeneo. I see it when i open the popup window.
Yeah, been looking for it, and found it, the facebox script creates elements with the same ID's as the one's that are already there.
|
0

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

Improve this answer

1 Comment

Answered a little too quickly, just testet the code and got a response when I added a value to the elements, and figured that was the problem. gdoron has already identified what the probably cause for not being able to retrieve the elements is.
0

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"/>
Improve this answer

1 Comment

Hello Mark I did try that too and if do that it wont even trigger the submit_photoalbum();
-1

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.

Improve this answer

4 Comments

You just changed his code to jQuery to do the same thing with slower code. how did you fix his problem???
Really? How slower could it be to do it with jQuery. He is already loading the framework.
look at this test. anyway the main problem with your answer is that it just doesn't fix anything.
I've updated the answer =) You were right. I didn't put you a -1 since I can't. But I removed it. It's replicating the IDs
-2

Since you are using jQuery anyway I would just try to grab the value using jQuery so it should be:

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

Improve this answer

4 Comments

You didn't even try it, did you?
No, your right I didn't try it. This does not work either. I saw that someone mentioned above to use .click() instead. My guess is that will not work either since the popup is hidden when the document is loaded. You may have success with .live() So you may be able to do something like: $("#add").live("click", function(){ var albumname = document.getElementById('photo_album_name').value; var albumdesc = document.getElementById('photo_album_desc').value; alert("Album name: "+ albumname + ", Album Desc: " + albumdesc); });
Neither works. See @gdoron's answer to see why it doesn't work :)
@John, have you tried moving the script after the </body> tag?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.