0

I have registration page as below where I'm posting back to same page.

<?php
    session_start();
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $_SESSION["registered"] = "success";
        $count = insert_record($_POST['fname'],$_POST['lname'],$_POST['email'],$_POST['regusername'],$_POST['regpassword']);
        header("Location: login.php");
    }
    $page_title = "Registration";
    if(isset($_SESSION["username"]))
        include('includes/header_authorized.html');
    else
        include('includes/header.html');

?>

<div class="container">
    <div class="regform">
        <form  name="registration" id="registration" method="post" action="registration.php">
            <p><span class="req">* required field.</span></p>                      
            <ul>
                <li><label for="fname">First Name:</label>
                    <input type="text" class="textboxborder" id="fname" name="fname" size="20" maxlength="25" autofocus="autofocus" value="<?php if(isset($_POST['fname'])) echo $_POST['fname'];?>"/>
                    <span class="error" id="errfname">*<?php if(isset($errfname)) echo $errfname;?></span>
                </li>
                <li><label for="lname">Last Name:</label>
                    <input type="text" class="textboxborder" id="lname" name="lname" size="20" maxlength="25" value="<?php if(isset($_POST['lname'])) echo $_POST['lname'];?>"/>
                    <span class="error" id ="errlname">*<?php if(isset($errlname)) echo $errlname;?></span>
                </li> 
                <li><label for="email">Email:</label>
                    <input type="text" class="textboxborder" name="email" id="email" size="40" maxlength="50" placeholder="abc@xyz.com" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>"/> 
                    <span class="error" id="erremail">*<?php if(isset($erremail)) echo $erremail;?></span>  
                </li>
                <li><label for="regusername">Username:</label>
                    <input type="text" name="regusername" id="regusername" size="20" maxlength="30" value="<?php if(isset($_POST['regusername'])) echo $_POST['regusername'];?>"/> 
                    <span class="error" id="errregusername">*<?php if(isset($errregusername)) echo $errregusername;?></span> 
                </li>
                <li><label for="regpassword">Password:</label>
                    <input type="text" name="regpassword" id="regpassword" size="20" maxlength="15" value="<?php if(isset($_POST['regpassword'])) echo $_POST['regpassword'];?>"/> 
                    <span class="error" id="errregpassword">*<?php if(isset($errregpassword)) echo $errregpassword;?></span> 
                </li>
                <li><label for="regconpassword">Confirm Password:</label>
                    <input type="text" name="regconpassword" id="regconpassword" size="20" maxlength="15"/> 
                    <span class="error" id="errregconpassword">*<?php if(isset($errregconpassword)) echo $errregconpassword;?></span> 
                </li>
            </ul>
            <div id="message_line">&nbsp;<?php if(isset($error)) echo $error;?></div>
            <div class="buttons">
                <input type="reset" value="Reset" id="reset"/>
                <input type="submit" value="Submit" id="submit"/>
            </div> 
        </form>  
        <img src="images/loading.gif" id="busy_wait" alt="busy wait icon" />  
    </div> 
</div>
</body>
</html>

In javascript I validate that the user is no duplicate and submit the form (I debugged it works fine, $('#registration').submit(); gets executed)

$('#submit').on('click', function(e) {  
        $('#message_line').text("");    
        if(validate_fields_on_submit()) {
            e.preventDefault();
            return;
        }   
        var params = $('form').serialize();      
        var url = "check_duplicate.php?" + params;
        var request = new HttpRequest(url, submitHandler);
        request.send(params);
        $('#busy_wait').css('display','block');
        e.preventDefault(); 
    });
    function submitHandler(response) {
        $('#message_line').text("");    
        response = $.trim(response);
        if(response == "" && response.indexOf("<") <= -1)
            $('#registration').submit();
        else if(response.indexOf("<") == 0) {
            var name = $('[name="regusername"]').val();
            $('#message_line').text("Some error occured, please try after some time.");  
            $("#message_line").attr("tabindex",-1).focus();   
        } else {   
            var name = $('[name="regusername"]').val();
            var arr = response.split(',');
            arr.pop();
            arr.toString();
            $('#message_line').text("'" + name + "' already exists, Please try different username");  
            $("#regusername").focus();  
        }                                    
        $('#busy_wait').css('display','none');   
    }

In insert_record this is what I have -

function insert_record($fname,$lname,$email,$username,$password) {
    $conn = get_connection();
    $to_insert = "INSERT INTO user VALUES ('$fname', '$lname', '$email', '$username', '$password', 20)";
    if(!($result = mysqli_query($conn,$to_insert)))
        return 0;                       
    else
        return mysqli_affected_rows($conn);
} 

For some reason when I click submit nothing happens after validation of duplicate user.

If I remove ajax call to check duplicate and submit it directly it is working fine. Please suggest what I might be doing wrong.

user2769614
  • 247
  • 3
  • 6
  • 23

1 Answers1

0

I think their are no HttpRequest Object in javascript until you add some library. See in your code

var request = new HttpRequest(url, submitHandler);
request.send(params);

Also you are sending params in format of GET not POST.

Instead you need to use XmlHttpRequest object to send ajax request like below.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        submitHandler(xhr.responseText);
    }
}
// xhr.open('GET',  "check_duplicate.php?" + params, true);
// xhr.send(null);
xhr.open('POST',  "check_duplicate.php", true);
xhr.send(params);

You can also use jQuery ajax to simplified things

$.post('check_duplicate.php', params, function(responseText) {
    submitHandler(responseText);
});
kuldeep.kamboj
  • 2,566
  • 3
  • 26
  • 63
  • Same as you used in your original code, Use `e.preventDefault(); ` – kuldeep.kamboj Mar 25 '15 at 05:26
  • if I use at the same place its stopping form submission completely – user2769614 Mar 25 '15 at 05:27
  • It should work if you added preventDefault code after ajax post code. – kuldeep.kamboj Mar 25 '15 at 05:29
  • you mean after }); ... i tried that didn't work, that case it stops the form even if it validates fine – user2769614 Mar 25 '15 at 05:31
  • One thing I think is you used click event. It may possible that preventdefault only working for stop click event binding not submit event binding. So your form still submitted. I would suggest to use input type=button instead of input type=submit. It will eliminate chance of form submitting by clicking. – kuldeep.kamboj Mar 25 '15 at 05:35
  • Also you can set your code of form submission. See examples http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery – kuldeep.kamboj Mar 25 '15 at 05:37