Question

我有一个表单，通过获取字段值分别请求以多个表单发布值的表单，所有表单都在每个表单提交调用中应用单个事件函数，因此页面上可能有多个表单具有相同的标识符。请查看此工作示例，该示例仅处理第一个字段的值，并在可能的情况下在通用JavaScript中提出建议。

<script>
    function Order() {
        var formi=document.getElementById("test").value;
        document.getElementById("result").value=document.getElementById("test").value;
        alert(formi);
    }
</script>

<form onsubmit="Order();return false;">
<input type="text" id="test" value="">
<input type="text" id="result" value="">
<input type="submit" value="Order">
</form>

<form onsubmit="Order();return false;">
<input type="text" id="test" value="">
<input type="text" id="result" value="">
<input type="submit" value="Order">
</form>

Answer 1

一种可能的解决方案：

<form method="post" onsubmit="order(this); return false;">
<input type="text" class="test" value="foo">
<input type="text" class="result" value="bar">
<input type="submit" value="Order">
</form>

<form method="post" onsubmit="order(this); return false;">
<input type="text" class="test" value="abc">
<input type="text" class="result" value="def">
<input type="submit" value="Order">
</form>

<script>
var order = function (form) {
    var fields = form.querySelectorAll('input');
    alert(fields[0].value + ', ' + fields[1].value);
}
</script>

DEMO： http://jsfiddle.net/KyHMf/

Answer 2

请不要多次使用相同的ID，因为html中不允许使用相同的ID，并且无法按预期工作。

以下是代码的改进版本：

var forms = document.getElementsByTagName('form');

function FormSubmit(e) {
    e.preventDefault();
    var text = e.target.children[0].value;
    for (var i = 0; i < forms.length; i++) {
        forms[i].children[1].value = text;
    }
}

for (var i = 0; i < forms.length; i++) {
    forms[i].onsubmit = FormSubmit;
}

你可以在这里试试，为了清晰起见，代码有一些额外的评论。

http://jsfiddle.net/Hq8uz/1/

使用单个函数分别以多种形式发布值

2 个答案: