Formular von Umleiten stoppen?

Question

Diese Frage wurde schon mehrmals gestellt und beantwortet. Ich habe in der Umgebung von SO gesucht und konnte keine Lösung finden, die funktioniert hat. Ich versuchte e.preventdefault() und return false. Keine funktionierte. Dann sah ich, dass ich zurück zu AJAX gehen muss und kann kein Versprechen nehmen, und ich weigere mich, dies zu tun, und ich weigere mich zu denken, dass es keinen Weg gibt, es mit Versprechungen zu tun.

Wie dem auch sei,

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> 

Auch ich versuche, die Form nichts zu tun haben, aber Daten einreichen (wird später benutzerdefinierte Ereignisse hinzufügen) ohne Refresh oder neu zu laden.

Vielen Dank!

Answer 1

event.preventDefault funktioniert tatsächlich. Als wies darauf hin, Sie nicht zeigen, wo Sie es ausprobiert, aber ich vermute, dass Sie es nicht richtig, mehr als wahrscheinlich, Sie nicht die event in den Handler und e oder event (was auch immer Sie es genannt) war eigentlich undefined. Hier ist ein Beispiel für eine Möglichkeit, es richtig zu nutzen:

$('.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>