CODEWITHSUNDEEP
javascripthtmljqueryformsevents
LinuxTux
LinuxTux

Reputation: 1

Form submit event not working with jquery

$(document).ready(function () {
    $("#send").submit(function (event) {
        event.preventDefault();
        $.ajax({
            type: "POST",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            url: "/api/send",
            data: JSON.stringify({
                destinatario: $('#destinatario').val(),
                importo: $('#importo').val(),
                casuale: $('#casuale').val()
            }),
            success: function (result) {
                console.log("worked")
            },
            error: function (result) {
                console.log("not worked")
            }
        });
        return false;
    });
    $('#exampleModal').on('hide.bs.modal', function (e) {
        $("#bodymodal").empty();
    })
})
<form id="send">
    <div class="mb-3"><input class="form-control" type="text" id="destinatario"   placeholder="Destinatario" minlength="3" maxlength="8"></div>
    <div class="mb-3"><input class="form-control" type="text" id="casuale"  placeholder="Casuale" minlength="3" maxlength="15"></div>
    <div class="mb-3"><input class="form-control" type="number" placeholder="Importo" id="importo" step="10" min="0" ></div>
    <div><input type="submit" class="btn btn-primary d-block w-100" value="Invia"></div>
</form>

My problem is that when I submit the form it doesn't execute the javascript but it does a redirect to the main link adding a "?" pls help me.

Upvotes: 0

Views: 101

Answers (1)

Akash Patel
Akash Patel

Reputation: 86

Try this one.

First of all change the input type to button and give id to it.

<input type="button" id="btn_id" class="btn btn-primary d-block w-100" value="Invia">

Then change your script like this.

$(document).ready(function() {
  $(document).on("click", "#btn_id", function () {
    console.log('clicked');
    $("#send").submit(function(event){
      event.preventDefault();
      $.ajax({
        type: "POST",
        datatype:"json",
        contentType: "application/json; charset=utf-8",
        url: "/api/send", // you have to set complete url location
        data:JSON.stringify({
          destinatario : $('#destinatario').val(),
          importo: $('#importo').val(),
          casuale: $('#casuale').val()
        }),
        success: function(result)
        {
          console.log("worked")
        },
        error: function()
        {
          console.log("not worked")
        }
      });
    });
  });
  $('#exampleModal').on('hide.bs.modal', function (e) {
    $("#bodymodal").empty();
  });
});

Upvotes: 0

Related Questions