Reputation: 339
This question has been asked and answered quite a few different times. I've searched around SO and couldn't find a solution that worked. I tried e.preventdefault()
and return false
. Neither worked. Then I saw that I need to go back to AJAX and can't use a promise and I refuse to do so and I refuse to think that there isn't a way to do it with promises.
Anyway,
Code:
var submitDataForm = function () {
console.log("button called");
var email = document.getElementById('email');
var first = document.getElementById('first-name');
var last = document.getElementById('last-name');
var web = document.getElementById('domain');
var city = document.getElementById('city');
var obj = document.getElementById('obj');
var describe = document.getElementById('describe');
var brandpower = document.getElementById('brandpower');
if (email.checkValidity() && first.checkValidity() && web.checkValidity() && city.checkValidity() && obj.checkValidity()) {
var emailV = email.value;
var firstV = first.value;
var webV = (web.value == undefined) ? 'null' : web.value;
var cityV = city.value;
var objV = obj.options[obj.selectedIndex].value;
var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;
var brandpowerV = (brandpower && brandpower.options && brandpower.selectedIndex) ? brandpower.options[brandpower.selectedIndex].value : brandpower.value;
var radio = jQuery('input[name="dealer"]:checked').val();
jQuery.post("/form-one/?" + "email=" + emailV + "&first=" + firstV +
cityV + "&domain=" + webV + "&obj=" + objV + "&describe=" + describeV + "&brandpower=" + brandpowerV +
"&radio=" + radio, function () {
console.log("data sent");
})
.done(function () {
console.log("data success");
})
.fail(function () {
console.log("data failed");
})
.always(function () {
console.log("data finished");
email.value, first.value, web.value, city.value, obj.value, describe.value, brandpower.value = "";
//window.location.href = "/";
});
} else {
$('#error').css('display', 'block').delay(5000).queue(function (next) {
jQuery('#error').fadeOut('slow').css('display', 'none');
});
}
}
<button id="next" class="green-button" onClick="submitDataForm()">Next</button>
Again, I'm trying to have the form do nothing but submit data (will add custom events later) without refresh or reload.
Thank you!
Upvotes: 1
Views: 101
Reputation: 19571
event.preventDefault
does indeed work. As nnnnnn
pointed out, you dont show where you tried it but I suspect that you were not using it correctly, more than likely, you were not passing the event
into the handler and e
or event
(whatever you named it) was actually undefined
. Here is an example of one way to use it properly:
$('.ajax-submit').click(function(event) {
event.preventDefault();
console.log("button called");
//... all your other code here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<button id="next" class="green-button ajax-submit" > Next</button>
</form>
Upvotes: 1