如何知道哪些&LT;输入&GT;当几个的是一个&LT中定义的submited;形式GT ;? [英] How to know which <input> is submited when several ones are defined within a <form>?
问题描述
我要实现的下面简单的JavaScript函数 submitForm()
根据 XMLHtt prequest
和 FORMDATA
。这个功能可以很好的第一&LT;形式GT;
,但未能在第二个:该函数应使用 input.formaction
form.action >。
I want to implement the below simple JavaScript function submitForm()
based on XMLHttpRequest
and FormData
. This functions works well on the first <form>
but fails on the second one: the function should use input.formaction
instead of form.action
.
如何检测pssed的$ P $ &LT;输入&GT;
并获取相应的 formaction
?
How to detect the pressed <input>
and retrieve the corresponding formaction
?
(最让答案建议使用一个框架(如jQuery的),这样的处理,但我认为学习只是纯JavaScript比也在学习JS框架更容易。如果你确信这个片段可以用一个框架来写简单,请提出您的版本也请解释为什么你建议的框架是中肯/相关的/适合在这种情况下,我可能会决定去学习自己喜欢的JS框架... 编辑:我发现这个类似的问题: JQuery的GET formaction和formmethod )
( Most of SO answers advise to use a framework (as jquery) for such processing. But I think learning solely pure JavaScript is easier than learning also JS frameworks. If you are convinced that this snippet can be written simpler using a framework, please propose your version. Please explain also why your advised framework is pertinent/relevant/suitable in this case. I may decide to learn your favorite JS framework... I have found this similar question: JQuery get formaction and formmethod )
<!DOCTYPE html>
<html>
<head>
<script>
function submitForm(form)
{
var xhr = new XMLHttpRequest();
xhr.onload = function() { alert (xhr.responseText); }
xhr.open ("post", form.action, true);
xhr.send (new FormData (form));
return false;
}
</script>
</head>
<body>
<form action="first.php" onsubmit="submitForm(this);">
<fieldset>
<legend>First</legend>
<input type="text" name="data" />
<input type="submit" />
</fieldset>
</form>
<form onsubmit="submitForm(this);">
<fieldset>
<legend>Second</legend>
<input type="text" name="data" />
<input type="submit" value="A" formaction="second-A.php" />
<input type="submit" value="B" formaction="second-B.php" />
</fieldset>
</form>
</body>
</html>
(我已阅读 XMLHtt prequest到的POST HTML表单,的Sending POST数据与XMLHtt prequest 和出色的<一个href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt$p$pquest/Using_XMLHtt$p$pquest#Using_FormData_objects"相对=nofollow> MDN文档。)
推荐答案
我会建议成立事件监听器在JavaScript中,这样你就可以访问该事件的对象。
I'd propose to set the event listener in JavaScript, so you can access the Event object.
function submitForm(e) {
// Get the DOM element that submitted the form
var caller = e.target || e.srcElement;
// Set the action to 'formaction' attribute of the caller if it exists, otherwise use the action of the form the caller is in
var action = caller.getAttribute("formaction") || caller.form.action;
// This is your code, I just changed the variable name for the action to 'action'.
var xhr = new XMLHttpRequest();
xhr.onload = function() { alert (xhr.responseText); }
xhr.open ("post", action, true);
xhr.send (new FormData (form));
}
// Get all forms
var forms = document.querySelectorAll("form");
// Iterate over the forms
for (var i = 0; i < forms.length; ++i) {
// Set the event listener
forms.item(i).onsubmit = submitForm;
}
这篇关于如何知道哪些&LT;输入&GT;当几个的是一个&LT中定义的submited;形式GT ;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!