John Davidson

Message:

I have the following form in a Bootstrap modal window

            <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>

JQuery file

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);

            },

        });

    });

});

The console.log() works.
The alert() within is not triggered and no errors are thrown.

Any ideas why it is like this?

Without the form in a modal it just works fine.

---

My Answer:
JQuery is a popular JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and AJAX interactions. It allows developers to write less code and achieve more functionality with ease. Here is an example of how JQuery can be used in a simple script:

javascript
// Using JQuery to change the text of an element
$(document).ready(function(){
$("#myElement").text("Hello, World!");
});


In this example, the JQuery library is used to select an element with the ID "myElement" and change its text content to "Hello, World!". The `$(document).ready()` function ensures that the script is executed only after the document has finished loading.

Overall, JQuery is a powerful tool for web development that can greatly enhance the functionality and interactivity of a website.