it-swarm.com.de

So verhindern Sie, dass die Seite nach dem Absenden des Formulars erneut geladen wird - JQuery

Ich arbeite an einer Website für meine App-Entwicklungsklasse und habe das seltsamste Problem.

Ich benutze ein bisschen JQuery, um Formulardaten an eine PHP-Seite namens 'process.php' zu senden und sie dann in meine DB hochzuladen. Der seltsame Fehler ist, dass die Seite nach dem Absenden des Formulars neu geladen wird und ich nicht oder nur im Hintergrund herausfinden kann, wie die JQuery weiterlaufen soll. Das ist sozusagen der Sinn von JQuery, haha. Wie auch immer, ich werde alle relevanten Codes einreichen, lassen Sie mich wissen, wenn Sie etwas anderes brauchen.

<script type="text/JavaScript">

$(document).ready(function () {
  $('#button').click(function () {

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});
</script>
<div class= "main col-xs-9 well">
  <h2 style="color: black" class="featurette-heading">Join our mailing list!</h2>
  <form id="main" method = "post" class="form-inline">
    <label for="inlineFormInput">Name</label>
    <input type="text" id="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
    <label for="inlineFormInputGroup">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <input type="text" id="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">
    </div>
    <!--Plan to write success message here -->
    <label id="success_message"style="color: darkred"></label>
    <button id ="button" type="submit" value="send" class="btn btn-primary">Submit</button>
  </form>

Dies ist mein PHP, wenn es relevant ist:

<?php
  include 'connection.php';

  $Name = $_POST['name'];
  $Email = $_POST['email'];

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `contact_list` (`name`, `email`) VALUES ('$Name', '$Email')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);

    echo "unsuccessfully";
  }

  echo "successfully";
?>

Dies ist ein Screenshot des Protokolls:

screenshot of log

10

Das Element <button> Sendet das Formular, wenn es in ein Formular eingefügt wird, automatisch, sofern nichts anderes angegeben ist. Sie können die folgenden 2 Strategien verwenden:

  1. Verwenden Sie <button type="button">, Um das Standardübermittlungsverhalten zu überschreiben
  2. Verwenden Sie event.preventDefault() im Ereignis onSubmit, um das Senden von Formularen zu verhindern

Lösung 1:

  • Vorteil: einfache Umstellung auf Markup
  • Nachteil: Untergräbt das Standardverhalten von Formularen, insbesondere wenn JS deaktiviert ist. Was ist, wenn der Benutzer zum Senden die Eingabetaste drücken möchte?

Fügen Sie ein zusätzliches type Attribut in Ihr Schaltflächen-Markup ein:

<button id="button" type="button" value="send" class="btn btn-primary">Submit</button>

Lösung 2:

  • Vorteil: form funktioniert auch, wenn JS deaktiviert ist, und beachtet die Standardformular-UI/UX so, dass mindestens eine Schaltfläche für die Übermittlung verwendet wird

Verhindern Sie das Senden von Standardformularen, wenn Sie auf die Schaltfläche klicken. Beachten Sie, dass dies nicht die ideale Lösung ist, da Sie das Submit-Ereignis und nicht das Button-Click-Ereignis abhören sollten:

$(document).ready(function () {
  // Listen to click event on the submit button
  $('#button').click(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

Bessere Variante:

Bei dieser Verbesserung hören wir uns das vom Element <form> Ausgegebene submit-Ereignis an:

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

Noch bessere Variante: Verwenden Sie .serialize() , um Ihr Formular zu serialisieren, aber denken Sie daran, Ihrer Eingabe name -Attribute hinzuzufügen:

Das name -Attribut ist erforderlich, damit .serialize() gemäß jQuery-Dokumentation funktioniert:

Damit der Wert eines Formularelements in die serialisierte Zeichenfolge aufgenommen werden kann, muss das Element ein Namensattribut haben.

<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">

Und dann in Ihrem JS:

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    // Prevent form submission which refreshes page
    e.preventDefault();

    // Serialize data
    var formData = $(this).serialize();

    // Make AJAX request
    $.post("process.php", formData).complete(function() {
      console.log("Success");
    });
  });
});
49
Terry