0

我有一个表单任务，该表单请求通过获取字段值分别在多个表单中发布值，所有表单都在每个表单提交调用中应用单个事件函数，因此页面上可能有多个表单具有相同的标识符。请查看这个仅处理第一个字段的值的工作示例，并尽可能在通用 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>
4

2 回答 2

0

一种可能的解决方案：

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

演示：http: //jsfiddle.net/KyHMf/

于 2013-09-09T21:39:31.710 回答
0

请不要多次使用相同的 id，因为它在 html 中是不允许的，并且不会按您的预期工作。

这是您的代码的改进版本：

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/

于 2013-09-09T22:00:08.633 回答