Unable to submit form with a jquery button

I have a html that sends data to my Google spread sheet when clicking the submit button.

My functioning form

  const scriptURL = 'https://script.google.com/macros/s/AKfycbyHTdMGwmC0sq_tnTfFASuSRDla5CoUm_p1iJa-SSZUIBk8eFKHypQZQzb32wKEN6D6Dw/exec'
    const form = document.forms['google-sheet']
  
    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => console.log("You have successfully submitted."))
        .catch(error => console.error('Error!', error.message))
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />

   

  <form id="myform" method="post" autocomplete="off" name="google-sheet">
<center><br><br>
     <h1>Registration Form</h1><br>
     <table border="5"> 
        
         <tr><td><b>Name : </b></td>
         <td><input type="text" name="Name" value="" /></td>
        </tr>
        <tr><td><b>Email : </b></td>
        <td><input type="text" name="Email"   required="" /></td>
        </tr>
        <tr><td><b>Phone no. : </b></td>
        <td><input type="number" name="Phone"   required="" /></td>
        </tr>
        <tr><td><b>Gender : </b></td>
         <td><input type="radio"  name="Gender" value="male" >male
        <input type="radio"  name="Gender" value="female"  >female<br/></td>
         </tr>
         <input type="submit" name="submit" value="Submit" form="myform"/>
     </table>
     <br><br>
</center>
  </form> 

Now, I want to use jquery dialog to let the user to confirm if they really want to submit the form or not. However, the button inside the jquery dialog is not submitting anything.

What is wrong is my script?

    $( "#dialog1" ).dialog({
          options,
          buttons: {
            "Send": function() {
            $('#myForm').submit(function(e) {
              e.preventDefault();    
              fetch(scriptURL, { method: 'POST', body: new FormData(form)})
              .then(response => console.log("You have successfully submitted."))
              .catch(error => console.error('Error!', error.message))              
            });
            },
            "Cancel": function() {
              $(this).dialog("close");
            }},
            close: function() {
            }
        });

Using jquery button

$( "#dialog1" ).dialog({
      autoOpen: true,
      maxWidth:500,
      maxHeight: 600,
      width: 500,
      height: 600,
      buttons: {
        "Send": function() {
        $('#myForm').submit(function(e) {
          e.preventDefault();    
          fetch(scriptURL, { method: 'POST', body: new FormData(form)})
          .then(response => console.log("You have successfully submitted."))
          .catch(error => console.error('Error!', error.message))              
        });
        },
        "Cancel": function() {
          $( "#dialog_d" ).dialog("open");
          current_state = $(this);
          $(this).dialog("close");
        }},
        close: function() {
        }
    });

  const scriptURL = 'https://script.google.com/macros/s/AKfycbyHTdMGwmC0sq_tnTfFASuSRDla5CoUm_p1iJa-SSZUIBk8eFKHypQZQzb32wKEN6D6Dw/exec'
  const form = document.forms['google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log("You have successfully submitted."))
      .catch(error => console.error('Error!', error.message))
  })     

});
  <div id="dialog1" title="Are you sure to send the form?">
  </div>

  <form id="myform" method="post" autocomplete="off" name="google-sheet">
<center><br><br>
     <h1>Registration Form</h1><br>
     <table border="5"> 
        
         <tr><td><b>Name : </b></td>
         <td><input type="text" name="Name" value="" /></td>
        </tr>
        <tr><td><b>Email : </b></td>
        <td><input type="text" name="Email"   required="" /></td>
        </tr>
        <tr><td><b>Phone no. : </b></td>
        <td><input type="number" name="Phone"   required="" /></td>
        </tr>
        <tr><td><b>Gender : </b></td>
         <td><input type="radio"  name="Gender" value="male" >male
        <input type="radio"  name="Gender" value="female"  >female<br/></td>
         </tr>
         <input type="submit" name="submit" value="Submit" form="myform"/>
     </table>
     <br><br>
</center>
  </form> 

Answer

You’re not submitting the form when you click the Send button. You’re adding a listener that submits it when the user clicks the Submit button.

Get rid of the call to $("#myform").submit(), and just call fetch() immediately.

$("#dialog1").dialog({
  options,
  buttons: {
    "Send": function() {
      fetch(scriptURL, {
          method: 'POST',
          body: new FormData($("#myForm")[0])
        })
        .then(response => console.log("You have successfully submitted."))
        .catch(error => console.error('Error!', error.message));
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  },
  close: function() {}
});