Forcing an HTML Form Using JavaScript

Question

I created an HTML form that has two buttons (instead of a submit button), each of which programmatically sends 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> 

Scenarios:

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

Work well by answering which button you click. However, the same html form check that worked before (using the submit button) no longer displays hints, and the form is submitted regardless of whether there is an input or not.

I read that since I call the form.submit () programmatic form, it bypasses the onSubmit () function of the form in which the validation takes place.

My question is: can I programmatically force onSubmit () to get confirmation? I must clearly indicate that I do NOT want to create JavaScript form validation, i.e. Use alert; rather, use JavaScript to provide HTML validation, as shown here when you click submit: https://jsfiddle.net/qdzxfm9u/

Answer 1

You can simply change your button type to submit and drop 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> 

So pressing any button really represents, but before executing the JS part:

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

---

EDIT

A warning. I originally based my decision on a copy of the OP HTML part where the “pseudo-buttons” used the weird <label type="input"...> element, so I read (too fast) as if it were a <button type="button"...> , and just changed the type from input to submit !
Therefore, it cannot work properly.

Now it is fixed in the above code.

Answer 2

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> 

Answer 3

How about creating a dropdown list - there may be switches instead - containing two actions with one submit button, as in this JS Fiddle , then with one function in the submit form

 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>