javascript: submitting forms and processing

问题

I need to be able to have one submit button for multiple forms. I only took two forms from my coding for the sake of simplicity. Each form has its own unique ID, but each form is very much identical to one another save a few discrepancies. My problem is only the first form is submitted successfully. I realize the reason for that is my input fields have the same name in each and every form so it will not recognize a duplicate input field currently. Is there a way that each field can be submitted successfully even though the input fields are the same, I hope that with help I will be able to submit both 'input_1' values and process it as 'form1:input_1' and 'form2:input_1' respectively. Thank you very much in advance

     <body><form name="form1">
     <input type="hidden" name="formID" value="form2"/>
     <input type="hidden" name="redirect_to" value=""/>
     <INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
     <INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>

     <INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
     <INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
     <INPUT TYPE=TEXT NAME="Answer" SIZE=12>
     <input type="hidden" name="val" value="298" />
     <INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>

     <form name="form2">
     <input type="hidden" name="formID" value="form2"/>
     <input type="hidden" name="redirect_to" value=""/>
     <INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
     <INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>

     <INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
     <INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
     <INPUT TYPE=TEXT NAME="Answer" SIZE=12>
     <input type="hidden" name="val" value="298" />
     <INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
     <input type="submit" name="Submit" id="button" value="Submit" onClick="submitAllDocumentForms()"></body>

Javascript code:

    <script language="javascript" type="text/javascript">
    /* Collect all 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 = "process.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; 
    var nElems = frm.length;
    for(var ix = nElems - 1; ix >= 0 ; ix--)
    frmCollector.appendChild(frm[ix]);
    return frmCollector;
    }
    </script>

回答1:

name is not a standard attribute for the form tag. I suggest that you use id for identiying your forms.

I have not tested the below changes, but I expect them to work:

function appendFormVals2Form(frmCollectFrom, frmCollector) {
    var currentEl;
    var frm = frmCollectFrom.elements; 
    var nElems = frm.length;
    for(var ix = nElems - 1; ix >= 0 ; ix--) {
        currentEl = frm[ix];
        currentEl.name = frmCollectFrom.name + ':' + currentEl.name;
        frmCollector.appendChild(currentEl);
    }
    return frmCollector;
}

来源：https://stackoverflow.com/questions/11870042/javascript-submitting-forms-and-processing

标签

javascript-events

submit