JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<button id="entra">
entra
</button>

<form id="area-login">
  <label>Hello:<input name="hello"></label>
</form>

<div id="message">

</div>

JavaScript

$("#entra").click(function(e) {


  e.preventDefault();
  //recupera tutti i valori del form automaticamente
  var dati = Object.fromEntries(new FormData(document.querySelector('#area-login')));
  var msg = "Invio con successo";

  //questo alert per capire come vengono passati i dati
  //alert(dati);

  //invio
  $.ajax({
      type: "POST",
      url: "/echo/json/",
      cache: false,
      contentType: false,
      processData: false,
      dataType: 'json',
      data: dati,
      success: function(data, textStatus) {
          $('#message').text(`${msg}: ${JSON.stringify(dati)} ${JSON.stringify(data)}`);
      },

      error: ()=> $('#message').text("Chiamata fallita, si prega di riprovare...")
    }

  ); //ajax

}); //bottone click