Form within inline div

Page: 1

Author Post
duja
Guest
Hello,
I'm having problems with the form inside the inline div (not on its own html page) - the form has 6 input text fields and one link at the bottom which calls javascript function when clicked on. The problem is that from this js function all the input fields' values are empty strings when i access them through document.getElementById('input_field_id').value , even though the fields are filled with some text.
Also, there's another minor problem with the form - i can't navigate through the input fields by pressing the 'tab' on keyboard.

I tried to put the contact form from this site into a inline div and have same problems.

Can anyone help me?
Administrator
Registered: Aug 2008
Posts: 3382
Inline div content is not a good choice when the content includes element IDs. This is because the div content gets copied into the floatbox and when this occurs you end up with duplicate IDs. Since the inline div appears first in the document, getElementById is most likely to return the element from there rather than the copied element inside the floatbox. So while you think you are talking to the floatbox form, the .value calls are actually referring to the original hidden div content.

The better approach is to load the form via ajax. Then you end up with only one form element with a particular ID on your page. To do this, just take your code from the inline div, put it in a separate *.html file (or other name if you like), set your anchor's href to this file path, and include "type:ajax" in the anchor's rev attribute.

Tabbing works as expected in all the floatboxed forms I've tried. Perhaps by magic it will work ok when the form comes in via ajax.
duja
Guest
Thanks for a quick reply... I'll give it a shot.
duja
Guest
Loading content via ajax really helped - I can now access the field values through the fields IDs.
The tabbing is still not working however, might that be caused by the fact that I have other forms defined on the main page?
duja
Guest
Oh, and I just noticed - the 'space' is not working either while filling some field.
Administrator
Registered: Aug 2008
Posts: 3382
Hmmm.
I may have steered you wrong with the ajax recommendation. I don't currently have time to test it, but I'm now suspecting that your forms will work correctly only if loaded as iframe content in floatbox. What appears to be happening is that the keyboard handler is getting in your way. (Tab for resize, space for pause/play on a slideshow). If the form is iframed it will get its own window and the floatbox keyboard handler won't apply in that window.

Could you please try loading the form as an iframe and see if this makes everything happy? It should work just by dropping "type:ajax" from the rev attribute, but ideally you should make your form page a proper html document with a doctype header, head section, body section, etc.

I'm pretty sure this will work out and I'd appreciate hearing back as to whether it does or not.
duja
Guest
Thanks for you reply, using tabs and spaces is now working fine (having the "type:ajax" attribute dropped).

Page: 1