Spry Tabbed Panles and forms

Question

Hi,
I am having a problem with my code. My goal is to have a unique form across different tabs.
Basically I want the user to send the entire information clicking only one button that is located outside the tabs.
My first taught was
<div>
<form id="form1">
<div>
<input type=""... name=""
</div>
<div>
<input type=""... name=""
</div>
</form>
<input type="button" value="send" onClick="send()"/>
were send is simply
function send()
document.getElementById("form1").submit();
That code didn’t worked because every time I opened a div in which a part of the form was inserted it performed the form action (specifically it goes to the .php page that collect the information)
Then I tried
<div>
<div>
<form id="form1">
<input type=""... name=""
</form>
</div>
<div>
<form id="form1">
<input type=""... name=""
</form>
</div>
<input type="button" value="send" onClick="send2()"/>
Where now the function send2 is
function send()
document.getElementById("form1").submit();
document.getElementById("form2").submit();
Also this strategy did not worked because was sending only the second (or first i did not remember exactly) form.
So I ended up switching to a function i found on the net the was collecting all the forms in document to one and post it
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
method = "post";
action = "liveit.php";
name = "formCollector";
id = "formCollector";
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
document.body.appendChild(formCollector);
formCollector.submit();
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
This way worked perfectly but has a visually very bad outcome: when I click send it shows for a fraction of second all the checkboxes (that are present in all the different tabs) at the bottom of the screen.
At that point I called a second function in the send button that creates a fake div just to push down the horrible checkboxes that were showing. Obviously that creates a scroll bar that resize my page and has an even worse effect.
Do you have any suggestion?
Thank you very much, and excuse me for my bad English

Answer 1

I was able to figure it out by myself.
I just needed to erase the line
document.body.appendChild(formCollector);
in order to not show the the ugly form that was collecting the data from the other forms.