<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body onload="Ajax.Request('services/connector.php?method=get', Page.onResponse);"> <p/> <div id="comments"> <div id="formPost_41" class="post" style="margin: 10px; float: left;"> <form id="comments" action="javascript:Page.saveNewPost(73,73);" name="comments"> <div id="title" class="title"> <input id="formTitle_73" type="text" onkeypress="return submitenter(this,event)" value="" size="60" name="title"/> </div> <input type="button" onclick="javascript:Page.saveNewPost(73,73);" value="save" name="submit"/> </form> </div> <script language="JavaScript" type="text/javascript"> document.getElementById('comments').getElementById('formPost_41').getElementById('comments').getElementById('title').getElementById('formTitle_73').focus(); </script> </div> </body> </html> Code (markup): Can anyone see what is wrong with the Javascript at the end ? It should focus the input box but it doesn't for some reason I can't fathom
the function "getElementById" is a function of the 'document' object, and cant be used like you use it. instead of what you wrote, try: document.getElementById('formTitle_73').focus();
I've tried that as well and it didn't work. I also tried: <script type="text/javascript"> window.onload = document.getElementById('formTitle_73').focus; </script> Code (markup): I can't figure out why it's not working.
Well, you close a paragraph that isn't open, but that's not your REAL problem. Your getelementByID is nested in a way that should NEVER resolve. Since id's are unique .comments CANNOT be both AROUND formPost_41 and INSIDE formPost_41 at the same time - that's your big problem, you are trying to use the same ID more than once, and that's invalid markup and likely why your script is fizzling. On top of which, since Id's are UNIQUE, there should be zero reason to EVER do this: document.getElementById('comments').getElementById('formPost_41').getElementById('comments').getElementById('title').getElementById('formTitle_73').focus(); since THIS: document.getElementById('formTitle_73').focus(); should be the EXACT same thing. Remember, ID's are unique and can only be used ONCE on a page. Because they are unique there is NO reason to getelementById off a getElementById. EVER. I'm not entirely certain what it is you are trying to accomplish, but I'm reasonably certain you've overthought both your markup and your scripting - possibly throwing scripting at something that could be done better WITHOUT javascript.... like trying to focus an element on pageload when you should probably be using TABINDEX. Also doesn't help this appears to be a simple form but you have no scripting off fallback handling.
Still not working, I've replaced the Javascript with this: <script type="text/javascript"> window.onload = alert('testing'); </script> Code (markup): and a few other combinations and I don't see the alert box at all, obviously the Javascript isn't being fired properly.
Thanks for the tips mate, I've changed the name of the form but still not working , what I'm trying to accomplish is a form field that gets the focus every time the page loads ..... a good example is logging on to Yahoo Mail when they just want to reconfirm your password. The password field is the only field needing input so that field is focussed (via Javascript).
Well, unless some of your other code is interfering, I'm not entirely seeing what else could be causeing problems, apart from possibly all the invalid markup and excess number of div's. This is a list of stuff I see 'wrong' with your markup - none of it should really be causing problems, but it's just differences from how I'd be handling writing that. You've got a div around the form, probably for no reason There's never a reason to put a name on a form - does nothing. You've got a perfectly good class on your outer div, what's with the inline styling? One of your inputs is not in a block level container, that's invalid markup. Your form only has a javascript handler with no non-script fallback. The action should be pointing at server side code, and you should be trapping for tha ajaxed nonsense with onsubmit. The onclick method on the type='button' is... ok, why isn't that a submit? Waste of code. The submit element doesn't need a name, though a CLASS to apply styling might be nice - likewise I'd drop a class on the input[text]. I'd move the script out of the parent div - it is slightly possible that the getElementById is firing before that element section renders. Move it to right before </body> to be sure. The language attribute went away a decade ago, get rid of that as that too is invalid markup. ... and this is just me, I like to have nice neat rows of attribute="value" So... <div id="comments"> <form id="formPost_41" action="#" onsubmit="javascript:Page.saveNewPost(73,73);" > <!-- this div is lip service to make it validate, a REAL form should probably use a fieldset with a legend, as well as LABELS on the INPUTS --> <div> <input type="text" id="formTitle_73" name="title" class="title" onkeypress="return submitenter(this,event)" value="" size="60" /> <input type="submit" value="save" class="name" /> </div> </form> <!-- #comments --></div> <script type="text/javascript"><!-- document.getElementById('formTitle_73').focus(); --></script> Code (markup): Is about all you should have in your body. That should VALIDATE and work just fine.
Thanks for the help I'll have to read through your post a few times to digest the information I'm very new to AJAX stuff, but I'm trying to modify this http://www.webreference.com/programming/javascript/kh/ to my needs (which is one reason why there is some funny stuff in there), and if it's not part of that example then it's what I've added in Basically what I'm aiming for is a page that has one input field that always has the focus. The user enters some text which is submitted by hitting enter, at which point the text is submitted to a database; refreshed to a div on the page (via AJAX) and focus is returned to the input field for the next message to be entered. I have that all working, except for the focus on the input field but obviously I may need to change other things to get that working. Oh, and if I move the script to just before the /body tag there is an error, as you suspected the element isn't rendered before it gets there. Again, thanks for the help, I hope you can stick with me to fix this
See, I hate it when I see code like that because it not only doesn't cover the mere possibility of the user not having javascript, but it also uses invalid and wasteful markup in the examples... Much less it's javascript is total rubbish. Like that all five if statements run on the last pass OR even if the first condition is true (in which case all the other ones are already false) OR the three conditions that all do the same thing (wow, talk about /FAIL/ hard, apparantly the writer of that article has never heard of SWITCH), or that it returns true if done, but doesn't return false when not done! Even minor *** like using slower double quotes on elements that don't need them.