8

I have created a HTML form which has two buttons (instead of a submit button), each programmatically sending the form to a unique form action address.

<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>

The scripts:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
    form.submit();
}
function form2() {
    form.action="example2.php";
    form.submit();
}

Work well, responding to which button you press. However, the same html form validation that worked before (when using a 'submit' button), no longer shows a hint and the form sends regardless of whether there is input or not.

I have read that because I am calling the form.submit() programmatically, it bypasses the onSubmit() function of a form, which is where the validation takes place.

My question is: Can I programmatically force the onSubmit() so that I get the validation pop up? I must make clear that I am NOT wanting to create a JavaScript form validation, i.e. using an alert; rather, use JavaScript to enforce the HTML validation as found here, when you click submit: https://jsfiddle.net/qdzxfm9u/

5
  • 4
    You can merely change your button's type from button to submit and drop the form.submit() from your JS part.
    – cFreed
    Dec 21, 2015 at 19:38
  • 1
    If you can use JQuery, have a look at this answer.
    – Daniel
    Dec 21, 2015 at 19:40
  • Cheers @cFreed, That has solved the problem! If you'd like to provide it again in the answer part, I will happily accept as the solution. Thanks!
    – dantan04
    Dec 21, 2015 at 20:00
  • That's done! Glad to help, and glad you accept my answer :)
    – cFreed
    Dec 21, 2015 at 20:13
  • @dantan04, you may consider <input type="submit" onClick="form1()" value="Form Action 1" /> instead of <label type="submit" onClick="form2()">Form Action 2</label> as the latter is not a valid HTML, put your form html inside the body in validator.w3.org/nu/#textarea and click on check Dec 21, 2015 at 22:00

3 Answers 3

3

You can merely change your button's type to submit and drop the form.submit() from your JS part.

So the HTML part becomes:

<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>

This way, clicking any button does submit by itself, but before is executed the JS part:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
}
function form2() {
    form.action="example2.php";
}

EDIT

Warning: I originally based my solution on a copy of the OP HTML part, where the "pseudo-buttons" used a strange element <label type="input"...>, so I read (too quickly) as if it was <button type="button"...> and simply changed type from input to submit!
This way, it couldn't work as expected.

It is now corrected in the above code.

13
  • "clicking any button does submit by itself, but before is executed the JS part" he has to execute the js part since he needs to decide which action has to be attached to the form Dec 21, 2015 at 20:14
  • @Mi-Creativity. I don't understand what you mean. I agree that the JS part must be executed, but it's just what happens.
    – cFreed
    Dec 21, 2015 at 21:05
  • I mean if the JS part won't be executed what will be the action= attribute of the form - example1.php or example2.php - considering it is only set through JS? Dec 21, 2015 at 21:08
  • @Mi-Creativity. Strictly responding, if the JS part is not executed then we know that default applies, i.e. the current script is used as action value. But in the current case, this will not happen, since it is written so that each submit button has its own onclick event firing the needed handler.
    – cFreed
    Dec 21, 2015 at 21:16
  • Just bear with me please, so the JS part will be executed on click then the form submits according to your code, check this link phpfiddle.org/lite/code/rt18-mzu9 - hit run to execute - which is exactly your code with a bit of CSS, I wonder if it shows the HTML validation and submits and works for you. Dec 21, 2015 at 21:46
3

Maybe something like this :

var form = document.getElementById("formExample");

function form1() {
  form.action="example1.php";
}

function form2() {
  form.action="example2.php";
}
<form id="formExample">
  <input type="text" id="input1" required>
  <input type="submit" onClick="form1()" value="Form Action 1" />
  <input type="submit" onClick="form2()" value="Form Action 2" />
</form>

1
  • This is spot on! The only reason why I haven't accepted it as the answer, is because someone came up with the same idea just before you on my comments feed. I appreciate the effort.
    – dantan04
    Dec 21, 2015 at 20:18
2

How about making a dropdown list - could be radio buttons instead - containing the form two actions with one submit button like in this JS Fiddle, then having one function on form submit

var form = document.getElementById("formExample"),
    select = document.getElementById("slct");

form.addEventListener('submit', function() {
  if (select.value == 1) {
    form.action = "example1.php";
  } else {
    form.action = "example2.php";
  }
  // alert for demo only
  alert(form.action);
  form.submit();
});
<form id="formExample">
  <input type="text" id="input1" required>
  <select id="slct" required>
    <option></option>
    <option value="1">Form Action 1</option>
    <option value="2">Form Action 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.