如何知道哪些 当若干个被内的限定是submited ?(How to know which

2019-10-18 22:29发布

我想实现以下简单的JavaScript函数submitForm()基础上XMLHttpRequestFormData 。 这个功能运作良好第一上<form>但是未能在第二一个:所述函数应使用input.formaction代替form.action

如何检测按压<input>和检索对应的formaction

(最让答案建议使用一个框架(如jQuery的),这样的处理,但我认为学习只是纯JavaScript比也在学习JS框架更容易。如果你确信这个片段可以用一个框架来写简单的,请申请。您的版本也请解释为什么你的建议的框架是中肯/相关/适合在这种情况下,我可能会决定去学习自己喜欢的JS框架... 编辑:我发现这个类似的问题: JQuery的获得formaction和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>

(我已经看过之后实施这个片段XMLHttpRequest来的POST HTML表单 , 有一个XMLHttpRequest发送POST数据和优异的MDN文档 。)

Answer 1:

我建议成立事件监听器在JavaScript中,这样你就可以访问该事件对象。

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


Answer 2:

在11684的回答是一个很好的起点,但对我没有工作...

我终于修好了(在Firefox 25成功地测试,IE9上不工作)

因此,我提供我的版本,如果这能帮助别人:

<!DOCTYPE html><html>
<head>
<script>
function submitForm(e)
{
  var form   = e.target;
  var input  = e.explicitOriginalTarget;
  var action = input.formAction || form.action;
  var xhr    = new XMLHttpRequest();
  xhr.onload = function() { alert (xhr.responseText); }
  xhr.open ("post", action, true);
  xhr.send (new FormData (form));
  return false; //avoid following the link
}
</script>
</head>
<body onload="var forms = document.querySelectorAll('form');
              for (var i = 0; i < forms.length; ++i) 
                 forms.item(i).onsubmit = submitForm;">

<form id="first" action="first.php">
   <fieldset>
      <legend>First</legend>
      <input type="text" name="data" />
      <input type="submit"  />
   </fieldset>
</form>

<form id="second" >
   <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>


文章来源: How to know which is submited when several ones are defined within a
?