Referencing Form Fields

[zinjamaster]

1) Script Title:
DHTML Window widget (v1.03)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...ndow/index.htm
3) Describe problem:
I am having the hardest time trying to reference the form that is part of my div I create and passed to the DHTML Window Script. I have tried all kinds of methods to get values from the forms (I can get the value if I have an onChange event send the value to a function, but I need to be able to reference several fields and the end of a form submission (onClick event of the submit button). I have a thread started at www.tek-tips.com (http://www.tek-tips.com/viewthread.c...1412635&page=1) that gives more information about exactly how I am sending the data to the Window Widget script.

Please help, right now I am having to use a passedvar function that stores the field names and values into a javascript Array, but this is not a good method.

Thanks so much,

LJ Wilson

[ddadmin]

Reading that thread only makes it more confusing for me. If you can summarize what you're asking, that would be best. A couple of things to include:

1) How are you calling the DHTML window (ie: iframe, ajax, or inline DIV)?

2) So the form is outside the DHTML window itself, and you wish to reference it within the DHTML window? And by reference, I gather you mean just a way to access the form object in JavaScript within the DHTML window, or more?

[zinjamaster]

Thanks for the reply.

I am calling the DHTML window using the div method. I have a div created on my page (done through document.write in javascript) and set the visibility hidden. I then call the DHTML window using that div after I have set the innerHTML of that div with my form. So the form is in the div and the div is in the DHTML window. I am doing this entirely through javascript and need to be able to reference the form fields from another javascript function that is called when the user hits the "Complete" button at the bottom of the form. I want to be able to do several things that I can't seem to figure out.

1. Set the focus to the first textbox on the form
2. Get the values from the form field (textboxes and checkboxes)
3. Set values on other form fields (textboxes) using the document.getElementById method.

Any assistance would be greatly appreciated.

Thanks,

LJ Wilson

[ddadmin]

You shouldn't have any problem doing the above. The one issue you need to be aware of is this. When you use the "inline DIV" option of the DHTML window to populate it, what the script does is copy the contents of the specified DIV into itself. This means any ID attributes inside this DIV will be duplicated, which semantically isn't allowed in HTML. I suspect this is your problem. You can overcome this by either:

1) Emptying the DIV once the DHTML window has grabbed its contents, so there are no longer 2 identical ID sets out there.

2) Use the "inline" option of DHTML window to directly pass in a string containing your FORM HTML into the DHTML window to be used as its contents.

Below shows how to do this using option 1):

<script type="text/javascript">

//Write out DIV to contain form
document.write('<div id="somediv" style="display:none"></div')

var formcontents='<form id="testform"><br /><input type="text" id="yourname" /><br /><input type="text" id="thoughts" /><br /><input type="submit" /></form>'

//Populate DIV with form
document.getElementById("somediv").innerHTML=formcontents

function opendhtmlwindow(){
divwin=dhtmlwindow.open('divbox', 'div', 'somediv', '#4: DIV Window Title', 'width=450px,height=300px,left=200px,top=150px,resize=1,scrolling=1')
document.getElementById("somediv").innerHTML=""
document.getElementById("yourname").focus()
document.getElementById("thoughts").value="How's it going?"
}

</script>

<p>Play around with Window 4 (Content from a DIV on page)</p>
<a href="#" onClick="opendhtmlwindow();return false"><b>Create/ Open Window 4</b></a>

The line in red empty's the orignal DIV's contents once the DHTML window has grabbed its contents. Once that's done, you can access the form as if it was on the page itself.

[zinjamaster]

I figured out what the problem was. In my php file (the one that renders the html that includes the various javascript external files) - I had neglected to render the html doc type. When I corrected that, everything started working correctly.

Just thought others might want to know that. This was also causing issues with inconsistent json returns. Bad things can happen when you don't render the html properly.

Thanks,

LJ Wilson