prevent refresh of page when button inside form clicked
Let getData()
return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
How do I make an HTML button not reload the page
there is no need to js or jquery.
to stop page reloading just specify the button type as 'button'.
if you dont specify the button type, browser will set it to 'reset' or 'submit' witch cause to page reload.
<button type='button'>submit</button>
Can I nest a button element inside an a using HTML5?
No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
In other words, you can nest any elements inside an <a>
except the following:
<a>
<audio>
(if the controls attribute is present)<button>
<details>
<embed>
<iframe>
<img>
(if the usemap attribute is present)<input>
(if the type attribute is not in the hidden state)<keygen>
<label>
<menu>
(if the type attribute is in the toolbar state)<object>
(if the usemap attribute is present)<select>
<textarea>
<video>
(if the controls attribute is present)
If you are trying to have a button that links to somewhere, wrap that button inside a <form>
tag as such:
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
However, if your <button>
tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a>
tag and style it the same way.
How to prevent page from reloading after form submit - JQuery
The <button>
element, when placed in a form, will submit the form automatically unless otherwise specified. You can use the following 2 strategies:
- Use
<button type="button">
to override default submission behavior - Use
event.preventDefault()
in the onSubmit event to prevent form submission
Solution 1:
- Advantage: simple change to markup
- Disadvantage: subverts default form behavior, especially when JS is disabled. What if the user wants to hit "enter" to submit?
Insert extra type
attribute to your button markup:
<button id="button" type="button" value="send" class="btn btn-primary">Submit</button>
Solution 2:
- Advantage: form will work even when JS is disabled, and respects standard form UI/UX such that at least one button is used for submission
Prevent default form submission when button is clicked. Note that this is not the ideal solution because you should be in fact listening to the submit event, not the button click event:
$(document).ready(function () {
// Listen to click event on the submit button
$('#button').click(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("process.php", {
name: name,
email: email
}).complete(function() {
console.log("Success");
});
});
});
Better variant:
In this improvement, we listen to the submit event emitted from the <form>
element:
$(document).ready(function () {
// Listen to submit event on the <form> itself!
$('#main').submit(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("process.php", {
name: name,
email: email
}).complete(function() {
console.log("Success");
});
});
});
Even better variant: use .serialize()
to serialize your form, but remember to add name
attributes to your input:
The name
attribute is required for .serialize()
to work, as per jQuery's documentation:
For a form element's value to be included in the serialized string, the element must have a name attribute.
<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="janedoe@email.com">
And then in your JS:
$(document).ready(function () {
// Listen to submit event on the <form> itself!
$('#main').submit(function (e) {
// Prevent form submission which refreshes page
e.preventDefault();
// Serialize data
var formData = $(this).serialize();
// Make AJAX request
$.post("process.php", formData).complete(function() {
console.log("Success");
});
});
});
The page will strangely refresh when I click the button
You should add type="button"
to your <button>
.
If you don't specify a type
of a <button>
in a <form>
, it will behave like a submit button by default, which refreshes the page.
Docs:
<type="submit">
The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
Related Topics
Download File Using an Ajax Request
Why Are Inline Event Handler Attributes a Bad Idea in Modern Semantic Html
How to Get Value of Selected Radio Button
How to Dynamically Change a Web Page'S Title
How to Correctly Iterate Through Getelementsbyclassname
How to Read the Post Request Parameters Using JavaScript
Use Html5 to Resize an Image Before Upload
Browser/Html Force Download of Image from Src="Data:Image/Jpeg;Base64..."
How to Insert a Row in an HTML Table Body in JavaScript
How to Save an Html5 Canvas as an Image on a Server
Why Is Using Onclick() in HTML a Bad Practice
How to Write Data to File Using Only JavaScript
In What Situations Would Ajax Long/Short Polling Be Preferred Over Html5 Websockets
Executing ≪Script≫ Injected by Innerhtml After Ajax Call
Page Content Is Loaded With JavaScript and Jsoup Doesn't See It