Stop form refreshing page on submit
You can prevent the form from submitting with
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault()
will stop the submit.
Without jQuery:
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
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");
});
});
});
How to prevent form to reload page after onsubmit
Prevent the default behavior of the submit
using event.preventDefault
. Then use ajax to submit the form value.
Also in addEventListener while attaching the event you dont need to immediately call the getGridValues
, so avoid the ()
after the function name
function getGridValues(e) { e.preventDefault(); const inputHeight = document.getElementById('inputHeight').value; const inputWidth = document.getElementById('inputWidth').value; console.log(`Height: ${inputHeight}, Width: ${inputWidth}`);
// Here use ajax to submit the value}
document.getElementById('submit').addEventListener("click", getGridValues);
<form id="sizePicker"> Grid Height: <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width: <input type="number" id="inputWidth" name="width" min="1" value="1"> <input type="submit" id="submit"></form>
Basic React form submit refreshes entire page
Just call event.preventDefault
method to prevent default behavior of form
afterSubmission(event) {
event.preventDefault();
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
}
}
Stopping page from refreshing when submitting a form
Calling the .preventDefault
method of the event fired should stop the page from submitting.
change
newForm.addEventListener("submit", changeFinish);
to
newForm.addEventListener("submit", event => {
event.preventDefault();
changeFinish(event);
});
Stop refresh on form submit when using javascript
Add type ="button"... otherwise it will consider it as type="submit" and hence the page refresh
<button type ='button' id="encode">encode</button>
How to prevent form resubmission when page is refreshed (F5 / CTRL+R)
Use the Post/Redirect/Get pattern. http://en.wikipedia.org/wiki/Post/Redirect/Get
With my website, I will store a message in a cookie or session, redirect after the post, read the cookie/session, and then clear the value of that session or cookie variable.
Related Topics
Download File Using an Ajax Request
How to Check Whether a Checkbox Is Checked in Jquery
How to Create a ≪Style≫ Tag With JavaScript
Get Class List For Element With Jquery
Jquery/JavaScript Collision Detection
Encode HTML Entities in JavaScript
How to Autosize a Textarea Using Prototype
How Can Get the Text of a Div Tag Using Only JavaScript (No Jquery)
Submit Multiple Forms With One Submit Button
How to Save an Html5 Canvas as an Image on a Server
Html-Encoding Lost When Attribute Read from Input Field
How to Read CSS Rule Values With JavaScript
How to Make a ≪Button≫ Not Submit a Form
Why Is "Element.Innerhtml+=" Bad Code
Why Is the Value of My Input Always Empty If I Store It in a Variable