Form submit event not working with jquery

Question

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

Your code actually performs the submit and invoke the submit event handler that you specified. I added a console.log on top of it to make sure. Of course the event.preventDefault() will stop the submit default behaviour .. and I have no idea why the ajax request maybe is not working in your scenario. But that's the problem I think. I would not encode the object with JSON.stringify anyway... look here: api.jquery.com/jquery.ajax — Diego D
– Diego D, Commented Jul 28, 2022 at 9:24
i have the same ajax code for another form, that works this doesn't, but I try to do what you suggested — Irrisolto
– Irrisolto, Commented Jul 28, 2022 at 9:35

Akash Patel · Accepted Answer · 2022-07-28 12:50:50Z

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

Collectives™ on Stack Overflow

Form submit event not working with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related