How to know which <input> is submited when several ones are defined within a <form>?

Asked 7/11, 2013 at 15:42 Answered 7/11, 2013 at 18:26

Solved javascript ajax forms form-data xmlhttprequest-level2

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.

How to detect the pressed <input> and retrieve the corresponding formaction?

( 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... EDIT: 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>

( I have implemented this snippet after reading XMLHttpRequest to Post HTML Form, Sending POST data with a XMLHttpRequest and the excellent MDN documentation. )

Rube answered 7/11, 2013 at 15:42 Comment(4)

You are stricly limited to html5. – Dulse 7/11, 2013 at 15:51

Hi @LorenzMeyer. I do not care to be html5 limited. The website is internal to my company (The browser is the GUI of some server tools). Maintaining pure JS may be easier/simpler than having to learn also a JS framework... isn't it? Cheers ;) – Rube 7/11, 2013 at 16:3

It depends how far you want to go. On your form pure JS is OK. If you liked to start with a lightbox or similar JQuery will be where to go. If you want a full fledged UI in JS you will head over to Ext... So all depends on what you want to do. – Dulse 7/11, 2013 at 16:13

@LorenzMeyer We just require a basic webpage to avoid connecting to remote server (ssh password), running a script (search the command line in the doc) and reading log files. I have just added a basic favicon to make the webpage a bit more appealing. Cheers ;) – Rube 7/11, 2013 at 16:24

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

Oliviero answered 7/11, 2013 at 16:25 Comment(3)

What is you browser? I am testing your code using Firefox v25. May you post the full code you have successfully tested? Cheers ;) – Rube 7/11, 2013 at 17:16

Hi. I finally fixed your version. Thank you for your help. Please can you tell me what you think about my version? (I have also posted an answer to give a complete functional example) Why were you using e.srcElement? Cheers :-D – Rube 7/11, 2013 at 18:46

Oops, I now see I left the sentence about the IDs in the answer, it isn't needed actually, that was for a slightly different version. – Oliviero 7/11, 2013 at 21:14

The 11684's answer is a good start point, but does not work for me...

I have finally fixed it (successfully tested on Firefox 25, does not work on IE9)

Therefore I provide my version if this can help someone else:

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

Rube answered 7/11, 2013 at 18:26 Comment(0)

Recommended topics

Hot tags