防止页面刷新和提交表单数据

所以我试图提交表单数据，但不希望页面更改/刷新。同时，我希望在完成时弹出一个jquery对话框。

这是我的原文:

 <script>
  $( function() {
    $('#dialog-message').dialog({
      autoOpen: false,
      title: 'Basic Dialog'
    });

 $( "#subbutton" ).click(function( event ) {
       event.preventDefault();
       $.post("formaction.php",function(){
         $('#dialog-message').dialog('open');
         return false;
     });
 });
  });
  </script>

向DB提交空白数据，但它确实插入了新行。删除event.preventDefault ();提交除页面更改外的所有数据到form .php .

我试着做民意调查，但我不确定如何做得正确。我将在几分钟内提供该代码，因为它在另一台计算机上。

$( function() {
    $('#dialog-message').dialog({
      autoOpen: false,
      title: 'Basic Dialog'
    });
  });
    $( "#subbutton" ).click(function( event ) {
      $('#dialog-message').dialog('open');
      event.preventDefault();
      $(function poll(){
        setTimeout( function(){
          $.ajax({
            type:'POST',
            dataType: 'json',
            url:'formaction.php',
            success: function(data){
            },
            complete: poll
          }),
        },
        5000);
      })

      /*
      $.post("formaction.php",function(){
      return false;
    });
    event.preventDefault();
    */
  });
  poll();

添加表单以获取更多细节

<div id="lostForm">
      <form name="lostForm" method="post" action="formaction.php" enctype="multipart/form-data">
        <h1> Owner Information</h1>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname"  placeholder="First name" required>
        <br>  <br>
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname"  placeholder="Last name" required>
        <br>  <br>
        <label for="mnumber">Mobile</label>
        <input id="mnumber" name="mobilenumber"  placeholder=" (###)###-####" required>
        <br>  <br>
        <label for="email">Email</label>
        <input type="text" id="email" name="email"  placeholder="email@example.com" required>
        <br>
        <br>
        <hr>
        <h1> Pet Information </h1>
        <br>
        <label for="pname">Pet Name</label>
        <input type="text" id="pname" name="petname" placeholder="Pet Name" required>
        <br> <br>
        <label for="petgen">Pet Gender</label>
        <select name="petgen" id="petgen" required>
          <option value="male"> Male </option>
          <option value="female"> Female </option>
        </select>
        <br> <br>
        <label for="pname">Pet Age</label>
        <input type="text" id="page" name="petage" placeholder="How old is your pet?" required>
        <br> <br>
        <label for="primary">Primary Color</label>
        <select name="color1" id="primary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="secondary">Second Color</label>
        <select name="color2" id="secondary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="markings">Markings</label>
        <input type="text" id="markings" name="marking" placeholder="Indetifiable Markings" optional>
        <br><br>
        <label for="fileToUpload">Upload Image:</label>
        <br>
        <input id="fileToUpload" type="file" name="fileToUpload">
        <br>
        <br>
        <hr>
        <h1> Location Lost </h1>
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address"
          onFocus="geolocate()" type="text"></input>
        </div>
        <table id="address">
          <tr>
            <td class="label">Street address</td>
            <td class="slimField"><input class="field" id="street_number"
              disabled="true" name="streetAdd"></input></td>
              <td class="wideField" colspan="2"><input class="field" id="route"
                disabled="true"></input></td>
              </tr>
              <tr>
                <td class="label">City</td>
                <td class="wideField" colspan="3"><input class="field" id="locality"
                  disabled="true" name="city"></input></td>
                </tr>
                <tr>
                  <td class="label">State</td>
                  <td class="slimField"><input class="field"
                    id="administrative_area_level_1" disabled="true" name="state"></input></td>
                    <td class="label">Zip code</td>
                    <td class="wideField"><input class="field" id="postal_code"
                      disabled="true" name="zip"></input></td>
                    </tr>
                    <tr>
                      <td class="label">Country</td>
                      <td class="wideField" colspan="3"><input class="field"
                        id="country" disabled="true"></input></td>
                      </tr>
                    </table>

                    <button type="submit" value="Submit" name="submitbtn" id="subbutton">Submit </button>
                  </form>