Form submit event not working with jquery-CodePudding

i have this js code:

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

and this form:

<form id="send">
   <div ><input  type="text" id="destinatario"   placeholder="Destinatario" minlength="3" maxlength="8"></div>
   <div ><input  type="text" id="casuale"  placeholder="Casuale" minlength="3" maxlength="15"></div>
   <div ><input  type="number" placeholder="Importo" id="importo" step="10" min="0" ></div>
   <div><input type="submit"  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

CodePudding user response：

Here in this demo I just changed the way you craft the input for the ajax request and added the console.log to show the submit event is occurring anyway.

$(document).ready(function() {
  
  $("#send").submit(function(event) {
    console.log('Submit event occurred!');
    event.preventDefault();
    $.ajax({
      type: "POST",
      datatype: "json",
      contentType: "application/json; charset=utf-8",
      url: "/api/send",
      //here I removed the JSON.stringify
      data: {
        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();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="send">
  <div >
    <input
      
      type="text"
      id="destinatario"
      placeholder="Destinatario"
      minlength="3"
      maxlength="8">
  </div>
  <div >
    <input
      
      type="text"
      id="casuale"
      placeholder="Casuale"
      minlength="3"
      maxlength="15">
  </div>
  <div >
    <input
      
      type="number"
      placeholder="Importo"
      id="importo"
      step="10"
      min="0">
  </div>
  <div>
    <input type="submit"  value="Invia">
  </div>
</form>

CodePudding user response：

Try this one.

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

<input type="button" id="btn_id"  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();
  });
});