I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?
This question is related to
javascript
html
The problem is that it triggers the form submission. If you make the getData
function return false
then it should stop the form from submitting.
Alternatively, you could also use the preventDefault
method of the event object:
function getData(e) {
e.preventDefault();
}
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);
Add type="button"
to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type
for a button is submit
, which self posts the form in your case and makes it look like a refresh.
This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.
All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
_x000D_
That solves the issue
<form onsubmit="return false;" id="myForm">
</form>
$('#myForm').submit(function() {
doSomething();
});
For any reason in Firefox even though I have return false;
and myform.preventDefault();
in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault();
in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false;
or javascript:this.preventDefault();
. Do not try with javascript:void(0);
which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit
attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.
You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
I was facing the same problem. The problem is with the onclick
function. There should not be any problem with the function getData
. It worked by making the onclick
function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
Return function is not working in all the cases. I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
Source: Stackoverflow.com