Prevent redirect/ refresh after submit in popup window

Question

I'm trying to make a login and signup form in the same popup window and the problem is, when I press login button or signup button, it just closes the popup window.

I want the popup window to stay open even if login or signup button is clicked. And I want it to display error or success message within the popup window. The error message does show up in the popup window if there is any error. But the popup window closes after submit, therefore, I have to reopen the popup window and check if there is any error message.

Also, I made a popup window in the header. And the popup window is only visible when show login button is clicked.

header.php

<input type="button" id="show_login" value="Show Login">

    <?php
        if(isset($_POST['loginSubmit'])){

            $username = $_POST['username1'];
            $password = $_POST['password1'];

            if(isset($_POST['username1'])){ 
                $_SESSION['username1'] = $username;
                header('Location: index.php');
                exit;

            } else {
                $error[] = 'Wrong username or password';
            }
        }
    ?>
        <div id="popupLogin">
        <div class="x">CLOSE</div>

        <form id="loginForm" name="login" action="#" method="post">

            <div>LOGIN</div>

            <div>

            <?php
                if(isset($error)){
                    foreach($error as $error){
                        echo '<p>'.$error.'</p>'; }
                }
            ?>

            </div>

            <input class="c" name="username1" type="text" placeholder="Username" value="<?php if(isset($error)){ echo $_POST['username1']; } ?>" tabindex="1" />

            <input class="c" name="password1" type="password" placeholder="Password"/>

            <button id="btnloginSubmit" type="submit" name="loginSubmit">Log in</button>

            <div id="btnSignup">Sign Up Here</div>

        </form>

    <?php

        if(isset($_POST['signupSubmit'])){

            if(strlen($_POST['username']) < 3){
                $error[] = 'Username is too short.';}

            if(strlen($_POST['password']) < 3){
                $error[] = 'Password is too short.';}

            if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
                $error[] = 'Please enter a valid email address';}
        }
    ?>
        <form id="signupForm" name="registration" method="post"  action="#">

        <div>
            <?php

                if(isset($error)){
                    foreach($error as $error){
                        echo '<p>'.$error.'</p>';}
                }
            ?>
        </div>

            <input class="c" name="email" type="text" placeholder="Email" value="<?php if(isset($error)){ echo $_POST['email']; } ?>" />

            <input class="c" name="username" type="text" placeholder="username" value="<?php if(isset($error)){ echo $_POST['username']; } ?>" />

            <input class="c" name="password" type="password" placeholder="Password"/>

            <button name="signupSubmit" type="submit">Sign up</button>

            <div id="btnLogin">Log in Here</div>    
        </form>

index.php

<?php include_once('header.php'); ?>
    <body>
            <p>Welcome!</p>
        <script src="jquery-3.1.1.min.js"></script>
        <script src="script.js"></script>
    </html>

script.js

$(document).ready(function()
    {

        $("#show_login").click(function(){
            showpopup();
        });

        $(".x").click(function(){
            hidepopup();
        });

        $("#btnSignup").click(function(){
            $("#signupForm").css({"visibility":"visible","display":"block"});
            $("#loginForm").css({"visibility":"hidden","display":"none"});
        });

        $("#btnLogin").click(function(){
            $("#loginForm").css({"visibility":"visible","display":"block"});
            $("#signupForm").css({"visibility":"hidden","display":"none"});
        });
    });

    function showpopup()
    {
     $("#popupLogin").fadeIn();
     $("#popupLogin").css({"visibility":"visible","display":"block"});
     $("#signupForm").css({"visibility":"hidden","display":"none"});
    }

    function hidepopup()
    {
     $("#popupLogin").fadeOut();
     $("#popupLogin").css({"visibility":"hidden","display":"none"});
     $("#loginForm").css({"visibility":"visible","display":"block"});

     //the code below does not work
     $('#signupForm').submit(function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data) {
            console.log('success!')
          }
        });
        e.preventDefault();
    });
    }

When your page reloads do you get a hash in your url? `http://someurl.com/#` ? If so, it might be your method hash attribute on your form element. — Garrett Sanderson, Jan 17 '17 at 00:55
@GarrettSanderson yes it does. after clicking "sign up" button, i get a hash at the end of the url like this: "index.php#" but even though I set action = " " for the form tag, it removes the hash but it still closes the popup window box — H.Kim, Jan 17 '17 at 01:02
You may need to call `e.preventDefault();` on the first line inside of your submit function? Before you declare the variables. — Garrett Sanderson, Jan 17 '17 at 01:04
Checkout this post, may be of help for you. http://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault — Garrett Sanderson, Jan 17 '17 at 01:08

score 0 · Accepted Answer · answered Jan 17 '17 at 01:20

0

Just try this :

     $('#signupForm').submit(function(e) {
     e.preventDefault();
     e.stopPropagation();
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
        console.log('success!')
      }
    });
    return false;
});

answered Jan 17 '17 at 01:20

Adhan Timothy Younes

560
3
12

thank you. I have one more question, if I wanted to validate form, how can I achieve that by using ajax? – H.Kim Jan 17 '17 at 23:16
What kind of validation you want? – Adhan Timothy Younes Jan 18 '17 at 00:58
username and email validations using if statements, such as `if (name =="") {do someting}`. how do I do it with ajax? – H.Kim Jan 18 '17 at 01:02
thank you for your effort however I do know how to validate forms. I just don't know how to validate the form and submit the form with ajax at the same time. please have a look at my code [link](https://jsbin.com/dipekojimi/2/edit?html,output) – H.Kim Jan 18 '17 at 01:43
it seems like it is the same code that I've written could you provide the link please – H.Kim Jan 18 '17 at 01:52

Prevent redirect/ refresh after submit in popup window

1 Answers1