page refreshes after data submitted. register.php Bootstrap Example <meta name="viewport&...

Page refresh after click on register in jquery ajax php

page refreshes after data submitted.

    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    
    
    
    <div class="container">
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Register Now</button>
    
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title bg-primary text-center">Register</h4>
            </div>
            <div class="modal-body" id="away">
         
                <form method="post" name="form" id="login" align="center">
                Email:<input type="email" name="email" id="email"  placeholder="email"  autocomplete="off" required/> <br/>  <br/>
                Password:<input type="password" name="password" id="password" placeholder="password" required> <br/> <br/>
                <input type="submit" id="register" name="register" value="Create Account" class="btn btn-info  save" /> &nbsp;
    
                <a class="btn btn-info" href="login.php" > Login </a>
                </form>
    
            </div>
            <div class="modal-footer">
              <button class="btn btn-danger" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
            <script>
                     $(document).ready(function(){                     
                        $('#register').on('click',function(){
                         var email = $('#email').val();
                         var password = $('#password').val();
    
                         $.ajax({
                            method:"POST",
                            url:"registeruser.php",
                            data:{ email:email, password:password},
                        });
                        });              
                        });
                       
                     
            </script>

registeruser.php

<?php
include('db.php');

if(isset($_POST['email']) && isset($_POST['password']) ) 
{
    $email = $_POST['email'];
    $password = $_POST['password'];

    $query = "insert into newtable (email,password) values ('$email','$password')";
    $result = mysqli_query($conn,$query);


}


?>

The problem is that, my data is submitted successfully, but i used ajax jquery. my data is submitted and page also refreshes. i don’t want my page to refresh. please help to find my mistake. i also used event.preventDefault() function to stop refresh. but it also did not work. it stops full functionality to save data.

Answer

The simplest approach is probably to make the button no longer be a “submit” button:

<input type="button" id="register" name="register" value="Create Account" class="btn btn-info save" />

or:

<button type="button" id="register" class="btn btn-info save">Create Account</button>

Additionally, if you don’t want to post a <form> and aren’t otherwise using that <form>, you can simply remove that element entirely:

<div class="modal-body" id="away">
    Email:<input type="email" name="email" id="email"  placeholder="email"  autocomplete="off" required/> <br/>  <br/>
    Password:<input type="password" name="password" id="password" placeholder="password" required> <br/> <br/>
    <input type="submit" id="register" name="register" value="Create Account" class="btn btn-info  save" /> &nbsp;
    <a class="btn btn-info" href="login.php" > Login </a>
</div>

That way there’d be nothing to accidentally be submitted in the first place.

Advertisement

Answer