javascript:提交表单和处理

时间:2012-08-08 17:35:45

标签: javascript-events submit

我需要能够为多个表单提供一个提交按钮。为简单起见,我只从编码中提取了两种形式。每个表单都有自己唯一的ID,但每个表单彼此非常相同,只是存在一些差异。我的问题是只有第一个表单成功提交。我知道原因是我的输入字段在每个表单中都有相同的名称,因此它当前不会识别重复的输入字段。是否有一种方法可以成功提交每个字段,即使输入字段相同,我希望有了帮助,我将能够提交'input_1'值并将其处理为'form1:input_1'和'form2:input_1 ' 分别。 非常感谢您提前

     <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代码:

    <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 个答案:

答案 0 :(得分:0)

name不是表单标记的标准属性。我建议您使用id来识别表单。

我没有测试过以下更改,但我希望它们可以正常工作:

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;
}