What's wrong with this?
HTML:
<form action="<URL>http://localhost:8888/bevbros/index.php/test"
method="post" accept-charset="utf-8" id="cpa-form" class="forms">
<input type="text" name="zip" id="Zip" class="required valid">
<input type="submit" name="Next" value="Submit" class="forms" id="1">
</form>
jQuery:
$("#cpa-form").submit(function(e){
e.preventDefault();
});
This is an ancient question, but the accepted answer here doesn't really get to the root of the problem.
You can solve this two ways. First with jQuery:
$(document).ready( function() { // Wait until document is fully parsed
$("#cpa-form").on('submit', function(e){
e.preventDefault();
});
})
Or without jQuery:
// Gets a reference to the form element
var form = document.getElementById('cpa-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {
e.preventDefault();
});
You don't need to use return false to solve this problem.
$(document).ready(function(){
$("#form_id").submit(function(){
return condition;
});
});
e.preventDefault() works fine only if you dont have problem on your javascripts, check your javascripts if e.preventDefault() doesn't work chances are some other parts of your JS doesn't work also
Well I encountered a similar problem. The problem for me is that the JS file get loaded before the DOM render happens. So move your <script> to the end of <body> tag.
or use defer.
<script defer src="">
so rest assured e.preventDefault() should work.
Just define your button type and this will prevent the form to refresh the webpage
<button type="button" id="saveBtn">Save</button>
$('#saveBtn').click(function() {
});
Worked for me:
$("#submitButtonOnForm").click(function(e) {
if (somecondition) {
e.preventDefault();
console.log('not submitted');
}
//form submission continues, no code needed
});