Tengo el siguiente formulario en una ventana modal de Bootstrap
<form id="formCsv" class="row gy-2" enctype="multipart/form-data"> <div class="col-md-5 "> <input class="form-control" type="file" id="file" name="file"> </div> <div class="col-md-3"> <button type="submit" id="csvBtn"class="btn btn-primary" name="something"> Upload </button> </div> <div id="loading" class="clearfix col-md-2"> <div class="spinner-border text-primary float-right" role="status"></div> </div> <div class="col-md-2"> <button type="button" id="export-btn" class="btn btn-primary" disabled>Export CSV</button> </div> </form>archivo JQuery
console.log("Works"); $(document).ready( function() { // Submit form data via Ajax $("#formCsv").on('submit', function(e) { alert("test"); e.preventDefault(); var form_data = new FormData($(this)[0]); $.ajax({ type: 'POST', url: 'src/positionen/getCsvData.php', data: form_data, contentType: false, cache: false, processData:false, success: function(response) { console.log(response); var json = JSON.parse(response); addToTable(json); }, }); }); });El console.log() funciona. La alerta () dentro no se activa y no se generan errores.
¿Alguna idea de por qué es así?
Sin el formulario en un modal, simplemente funciona bien.
Veo el problema.
El formulario se carga más tarde en el DOM, necesita cambiar su oyente a $(document).on('submit', '#formCsv', function() {//your code})
De esa manera, Jquery también escuchará el contenido que se agrega más tarde mediante una llamada ajax.