Verhindern Sie Seitenaktualisierung und senden Sie Formulardaten

Question

So versuche ich, Formulardaten einzureichen, aber möchte die Seite nicht ändern/aktualisieren. Gleichzeitig möchte ich, dass ein jquery-Dialog erscheint, wenn er fertig ist.

Das ist meine original:

<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> 

Dies trägt leere Daten auf die DB aber es hat eine neue Zeile einzufügen. Entfernen event.preventDefault(); übergibt alle Daten, aber die Seite wird in formaction.php geändert.

Ich habe versucht, Umfrage zu tun, aber ich bin nicht wirklich sicher, wie es richtig geht. Ich werde diesen Code in einigen als auf einem anderen Computer liefern.

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

Hinzufügen für mehr Detail Form

<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> 

Answer 1

Ihre Ajax $.post() Funktion, um die Daten fehlen, die Sie einfügen möchten.

Der einfachste Weg, das zu addieren, ist die Form zu serialisiert:

... 
event.preventDefault(); 

$.post("formaction.php", $('form').serialize(), function(){ 
    $('#dialog-message').dialog('open'); 
}); 

Nun werden alle Felder im form Element wird auf die Post gegeben werden. Wenn Sie mehrere Formulare haben, können Sie die ID des Formulars verwenden, um die richtige ID zu erhalten:

Answer 2

Verwenden Sie Ajax dafür.

Answer 3

Sie müssen die: success Callback-Funktion verwenden.

$.post("test.php", { name: "John", time: "2pm" }) 
    .done(function(data) { 
    alert("Data Loaded: " + data); 
    }); 

Answer 4

Es gibt eine einfache Lösung, um die Umleitung zu stoppen. Ändern Sie den Typ der Schaltfläche (#subbutton) ein Attribut hinzufügen type="button"