CODEWITHSUNDEEP
javascriptjqueryhtml
QueSo
QueSo

Reputation: 339

Stop form from redirecting?

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

Answers (1)

Wesley Smith
Wesley Smith

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

Related Questions