Untitled

<script>
    $( function() {
      var dialog, form

      function editField() {
        //redirection to another page

        $('#dialog-form').click(function(e){
          e.preventDefault();
          if($('#abreviation').val() == "" || $('#description').val() == "" || $('#largeur').val() == "" || $('#longueur').val() == "" ){
            alert("Vous n'avez pas rempli tout les champs!")
          } else {
            let abre = $('#abreviation').val();
            let desc = $('#description').val();
            let larg = $('#largeur').val();
            let long = $('#longueur').val();

            $.ajax({
              type:"POST",
              cache:false,
              url:"testsql.php",
              data: 'abre='+ abre  +'&desc='+ desc + '&larg='+ larg +'&long='+ long,   // multiple data sent using ajax
              success: function (responseJson) {
                if(!responseJson){
                    alert('An error occured!')
                } else {
                    let arr = JSON.parse(responseJson);
                    let html = "<tr><td>"+arr[0]+"</td><td>"+arr[1]+"</td><td>"+arr[2]+"</td><td>"+arr[3]+"</td></tr>";
                    console.log(html);
                    $('#tbody').append(html);
                }
              }
            });
          }
        });

        dialog.dialog( "close" );
      }

      dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        buttons: {
          "Confirm": editField,
          Cancel: function() {
            dialog.dialog( "close" );
          }
        }
      });


      $('#mailbutton').click(function() {
        dialog.dialog( "open" );
      });

    });
  </script>
</head>
<body>

<div id="dialog-form" title="Edit">
  <form id="formtest">
    <fieldset>
      <label for="abreviation">Abréviation</label>
        <input type="text" name="abreviation" id="abreviation" value="M1" class="text ui-widget-content ui-corner-all">
      <label for="description">Description</label>
        <input type="text" name="description" id="description" value="Rack Mistrello" class="text ui-widget-content ui-corner-all">
      <label for="largeur">Largeur</label>
        <input type="number" name="largeur" id="largeur" value="390" class="text ui-widget-content ui-corner-all">
      <label for="longueur">Longueur</label>
        <input type="number" name="longueur" id="longueur" value="6" class="text ui-widget-content ui-corner-all">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div id="users-contain" class="ui-widget">
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Abréviation</th>
        <th>Description</th>
        <th>Largeur</th>
        <th>Longueur</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td>M1</td>
        <td>Rack Mistrello</td>
        <td>390</td>
        <td>6</td>
        <td id="mailbutton">Edit</td>
      </tr>
    </tbody>
  </table>
</div>
</body>