Daten in der Datenbank ohne Umleitung in PHP speichern

Question

Ich habe ein einfaches Formular, und ich möchte die Daten in meiner Datenbank ohne Umleitung speichern. Ich benutze PHP, AJAX und JQuery für meine Seite. Ich weiß nicht, ob ich etwas falsch gemacht habe, aber nachdem ich den Submit-Button gedrückt habe, erscheinen die Formulardaten in der Adresszeile. Die Daten werden erfolgreich in der Datenbank gespeichert, aber die Seite wird ebenfalls neu geladen. Mein Code ist unten angegeben.

HTML

<form> 
<input type="text" placeholder="Full Name*" required pattern= "[a-zA-Z]+" title="Alphabets only" name="name" id="name"> 
<input type="email" placeholder="Email*" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" name="email" id="email"> 
<input type="text" placeholder="Contact*" required pattern="[0-9]\d{9}" title="only 10 digit allowed" name="contact" id="contact"> 
<textarea placeholder="Enquiry(if any)" name="msg" id="msg"></textarea> 
<button type="submit" name="register" id="register_btn">Register</button> 
<span id="success"></span> 
<span id="error"></span> 
</form> 

PHP

include("conn/connect.php"); 
    if(isset($_POST['email'])){ 
    $email= mysqli_real_escape_string($connect, $_POST['email']); 
    $name= mysqli_real_escape_string($connect, $_POST['name']); 
    $contact= mysqli_real_escape_string($connect, $_POST['contact']); 
    $msg= mysqli_real_escape_string($connect, $_POST['msg']); 
    $sql= "INSERT INTO registration(email, name, contact, msg, added_on) values('$email','$name','$contact','$msg', now())"; 
    if(mysqli_query($connect, $sql)) 
    { 
     echo '<h4>Registration Complete</h4>'; 
    } 

}

JAVASCRIPT

<script> 
$(document).ready(function(){ 
$('#register_btn').click(function(){ 
    var name = $('#name').val(); 
    var email = $('#email').val(); 
    var contact = $('#contact').val(); 
    var msg = $('#msg').val(); 
    if(name == '' || email == '' || contact == '') 
    { 
     $('#error').html("<h4>Mandatory field(s) are empty</h4>"); 
     setTimeout(function(){ 
      $('#error').fadeOut("Slow"); 
      }, 3000); 
     } 
    else 
     { 
     $('#error').html(''); 
     $.ajax({ 
      url:"registration.php", 
      type:"POST", 
      data:{name:name, email:email, contact:contact, msg:msg}, 
      success:function(data){ 
      $("form").trigger("reset"); 
      $('#success').fadeIn().html(data); 
      setTimeout(function(){ 
       $('#success').fadeOut("Slow"); 
      }, 3000); 
      } 
     }); 
    } 
    }); 
    }); 
</script> 

Answer 1

Sie rufen eine Veranstaltung unter der submit Schaltfläche an, die Ihre Seite aktualisiert.

Verwenden Sie event.preventDefault() in Ihrer Klickfunktion.

$(document).ready(function(){ 
    $('#register_btn').click(function(event){ 
    event.preventDefault(); 
    }); 
}); 

FYI, wenn Ihre Validierungen aufhören zu arbeiten dann versuchen Sie dies zu tun.

$('#register_btn').click(function(event) { 
    //Check form is valid 
    if ($(this).closest('form')[0].checkValidity()) { 
    // stop form from redirecting to java servlet page 
    event.preventDefault(); 


    $.ajax({ 
     type: form.attr("method"), // use method specified in form attributes 
     url: form.attr("action"), // use action specified in form attributes 
     data: form.serialize(), // encodes set of form elements as string for submission 
     success: function(data) { 
     // get response from servlet and display on page via jQuery 
     } 
    }); 
    } 
}); 

Reference

Answer 2

Wie Loading .. weist darauf hin, Sie Standardereignis verhindern müssen, sondern in Form Veranstaltung einreichen, wie folgt aus:

$('form').on('submit', function(e){ 
    return false; 
}); 

return false auf submit = e.preventDefault + e .sotpPropagation