1

我想submitForm()基于XMLHttpRequest和实现以下简单的 JavaScript 函数FormData。此函数在第一个上运行良好，<form>但在第二个上失败：该函数应该使用input.formaction而不是form.action.

如何检测按下<input>并检索相应的formaction？

（大多数 SO 答案建议使用框架（如 jquery）进行此类处理。但我认为仅学习纯 JavaScript 比学习 JS 框架更容易。如果您确信可以使用框架更简单地编写此代码段，请提出你的版本。还请解释为什么你建议的框架在这​​种情况下是相关的/相关的/合适的。我可能决定学习你最喜欢的 JS 框架......编辑：我发现了这个类似的问题：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>

（在阅读XMLHttpRequest to Post HTML Form、使用 XMLHttpRequest 发送 POST 数据和优秀的MDN 文档之后，我已经实现了这个片段。）

4

2 回答 2

1

我建议在 JavaScript 中设置事件侦听器，以便您可以访问 Event 对象。

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;
}
于 2013-11-07T16:25:57.027 回答
0

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>
于 2013-11-07T18:26:28.630 回答