How do I cancel submitting a form in the onclick submit button?

Question

I am working on an ASP.net web application.

I have a form with a submit button. The submit button code looks like <input type='submit' value='submit request' onclick='btnClick();'> .

I want to write something like the following:

 function btnClick() { if (!validData()) cancelFormSubmission(); } 

How to do it?

Answer 1

You better do ...

 <form onsubmit="return isValidForm()" /> 

If isValidForm() returns false , your form is not submitted.

You must also wrap the event handler from the string.

 document.getElementById('my-form').onsubmit = function() { return isValidForm(); }; 

Answer 2

Change your input to this:

 <input type='submit' value='submit request' onclick='return btnClick();'> 

And return false to your function

 function btnClick() { if (!validData()) return false; } 

Answer 3

You need to change

 onclick='btnClick();' 

to

 onclick='return btnClick();' 

and

 cancelFormSubmission(); 

to

 return false; 

However, I would try to avoid the attributes of inline events in favor of an unobtrusive JS with a library (such as YUI or jQuery) that has a good event handling API and binds to an event that really matters (i.e. a form submission event instead of a click event buttons).

Answer 4

you must change the type from submit to button :

 <input type='button' value='submit request'> 

instead

 <input type='submit' value='submit request'> 

you will get the name of your button in javascript and associate any action you want with it

 var btn = document.forms["frm_name"].elements["btn_name"]; btn.onclick = function(){...}; 

worked for me hope this helps.

Answer 5

You need to return false; :

 <input type='submit' value='submit request' onclick='return btnClick();' /> function btnClick() { return validData(); } 

Answer 6

Sometimes onsubmit does not work with asp.net.

I decided it very easily.

if we have this form

 <form method="post" name="setting-form" > <input type="text" id="UserName" name="UserName" value="" placeholder="user name" > <input type="password" id="Password" name="password" value="" placeholder="password" > <div id="remember" class="checkbox"> <label>remember me</label> <asp:CheckBox ID="RememberMe" runat="server" /> </div> <input type="submit" value="login" id="login-btn"/> </form> 

Now you can catch this event before submitting the form and stop it from postback and do whatever ajax you want using this jquery.

 $(document).ready(function () { $("#login-btn").click(function (event) { event.preventDefault(); alert("do what ever you want"); }); }); 

Answer 7

Why not change the submit button to a regular button and in the click event send your form if it passes your checks?

eg

 <input type='button' value='submit request' onclick='btnClick();'> function btnClick() { if (validData()) document.myform.submit(); } 

Answer 8

It's simple, just return false;

The code below is included in the onclick submit button using jquery ..

 if(conditionsNotmet) { return false; } 

Answer 9

use onclick='return btnClick();'

and

 function btnClick() { return validData(); } 

Answer 10

 function btnClick() { return validData(); } 

Answer 11

You need onSubmit . Not onClick , otherwise someone can just press Enter and it will bypass your check. Regarding the cancellation. you need to return false. Here is the code:

 <form onSubmit="return btnClick()"> <input type='submit' value='submit request'> function btnClick() { if (!validData()) return false; } 

Change onSubmit belongs in the form tag.

Answer 12

 <input type='button' onclick='buttonClick()' /> <script> function buttonClick(){ //Validate Here document.getElementsByTagName('form')[0].submit(); } </script>