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/

Improve this question
5
  • 4
    You can merely change your button's type from button to submit and drop the form.submit() from your JS part. Commented Dec 21, 2015 at 19:38
  • 1
    If you can use JQuery, have a look at this answer. Commented 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! Commented Dec 21, 2015 at 20:00
  • That's done! Glad to help, and glad you accept my answer :) Commented 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 Commented Dec 21, 2015 at 22:00

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

"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
@Mi-Creativity. I don't understand what you mean. I agree that the JS part must be executed, but it's just what happens.
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?
@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.
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.
|
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>

Improve this answer

1 Comment

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

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.