submit() löst überhaupt nicht aus

Question

Ich bin mir nicht sicher, warum submit() überhaupt nicht auslöst. Das Klickereignis und der zugrunde liegende AJAX-Aufruf funktionieren einwandfrei, das Formular wird jedoch nicht übermittelt. Ich habe auch versucht $("#storeForm").unbind().submit(); und es hat keine Wirkung.

$(document).on("click", '#submit', function(e) { 
    e.preventDefault(); 
    var frm = $("#storeForm"); 
    var address = $("#address").val(); 
    var state = $("#state option:selected").text(); 
    var city = $("#city").val(); 
    var country = "USA"; 
    var addressToSearch = state + " " + state + " " + country; 
    var urlGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyAfAyG4l207wcJUn-D8XsOUZvCSwJv27zs&&address=' + addressToSearch; 

    jQuery.ajax({ 
    url: urlGeoCode, 
    success: function(result) { 
     var location = result.results[0].geometry.location; 
     $("#longitude").val(location.lng); 
     $("#latitude").val(location.lat); 
     $('#storeForm').submit(); 
    }, 
    }); 
}); 

Edited: das Ergebnis resultOutput auf richtiges Format

Answer 1

Es gibt diese wunderbaren Browser-Funktion, die Ihre id="submit" nimmt und verwandelt es in eine Eigenschaft auf dem Formular. Dies hat den unglücklichen Nebeneffekt, dass die Methode .submit des Formularknotens überschrieben wird, weshalb jQuery dieses Formular nicht senden kann.

Lösung ist natürlich zu entfernen id="submit", möglicherweise ersetzt es durch etwas anderes oder Handhabung der reichen einen anderen Weg.

Answer 2

Ihr Problem bezieht sich nicht auf das Auslösen des Ereignisses submit() überhaupt. Wenn Sie die Konsole überprüfen erhalten Sie eine Fehlermeldung angezeigt:

resultOutput is not defined

Dies ist, weil Sie einen Syntaxfehler in der Art und Weise haben Sie zum Antworttext in den success Handler zugreifen. Als Ergebnis wird submit() nicht einmal aufgerufen.

Um dies zu beheben, müssen Sie var location = resultOutput.geometry.location; zu var location = result.results[0].geometry.location; ändern. Dies wird dann die richtigen Daten vor dem Absenden Ihres Formulars erhalten. Versuchen Sie folgendes:

$(document).on("click", '#submit', function(e) { 
 
    var urlGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyAfAyG4l207wcJUn-D8XsOUZvCSwJv27zs&&address=Florida Florida Orlando'; 
 

 
    jQuery.ajax({ 
 
    url: urlGeoCode, 
 
    success: function(result) { 
 
     var location = result.results[0].geometry.location; 
 
     $("#longitude").val(location.lng); 
 
     $("#latitude").val(location.lat); 
 
     $('#storeForm').submit(); 
 
    } 
 
    }); 
 
}); 
 

 
$('#storeForm').on('submit', function(e) { 
 
    e.preventDefault(); 
 
    console.log('form submission...'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="storeForm"> 
 
    <input type="text" id="longitude" /> 
 
    <input type="text" id="latitude" /> 
 
</form> 
 

 
<button type="button" id="submit">Get location...</button>