Processing a jQuery UI dialog form in PHP

Question

I've been searching around on this for a couple of days, but haven't found any answers that fit my particular problem. Some background:

I am fairly new at PHP, and am attempting to create user log-in functionality on a practice site I set up using HTML, CSS and jQuery. I have a form that is displayed by a jQuery UI dialog, with fields for username and password. What I want to do is have the "Log In" button in the dialog submit the form to a separate file, "login.php", for validation and processing. If the username exists in the MySQL database, I want it to return an error message that I can display in the same dialog. Same goes for if the username exists, but the password is wrong.

If the validation succeeds, I want the PHP file to set session variables, and redirect to index.php.

This may be a simple error, or a number of them on my part, but I do not know which direction to go at this point. Any assistance would be greatly appreciated. The code is as follows (header.php):

 <script>
    $(function() {
        var name = $("#userid"),
        password = $("#pw"),
        loginFields = $([]).add(name).add(password);

        $("#login_link").click(function() {
            $("#login_dialog").dialog("open"); 
        });

        $("#login_dialog").dialog({
            autoOpen: false,
            height: 200,
            width: 250,
            modal: true,
            buttons: {
                Submit: function() {                            
                            $("#login_form").submit();
                        },
                Cancel: function(){
                    $(this).dialog("close");
                }                
            },
            close: function() {
                loginFields.val("");
            }
        });

    });
</script>
    <div id="banner">
        <h1>Header</h1>
        <span id="user">
            <ul>
                <?php
                    //if user is logged in, show name and Log Out option, else show Log In and Sign Up options
                    if(isset($_SESSION["user"])) {
                        echo "<li>Welcome " . $_SESSION["fname"] . "!<li>";
                        echo "<li><a href='#'>Log Out</a></li>";
                    } else {
                        echo "<li><a href='#' id='login_link'>Log In</a></li>";
                        echo "<li><a href='#'>Sign up</a></li>";
                    }
                ?>
            </ul>
        </span>
    </div>

    <nav id="mainnav">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </nav>

    <div id="login_dialog" title="Current User">
        <form id="login_form" action="login.php" method="post">
            <fieldset>
                <label for="userid">Username</label>
                <input type="text" name="userid" id="userid" />
                <label for="pw">Password</label>
                <input type="password" name="pw" id="pw" />
            </fieldset>
        </form>
    </div>

The PHP, right now a collection of interacting functions, is as follows:

<?php

function connect() {
    $con = mysqli_connect("localhost", "site", "blargh");

    if (mysqli_connect_errno()) {
        alert("Failed to connect to MySQL: " . mysqli_connect_error());
    }

    return $con;
}

function getUser($username, $password) {
    $con = connect();
    $result = mysqli_query($con, "SELECT * FROM practice_user
                           WHERE username = " . $username . " AND password = " . $password);

    return $result;
}

function setSessionUser($userData) {

    $_SESSION["username"] = $userData["username"];
    $_SESSION["fname"] = $userData["first_name"];
    $_SESSION["lname"] = $userData["last_name"];
}

//validation functions

function userExists($username, $password) {
    $con = connect();

    $result = getUser($username, $password);

    if (mysqli_num_rows($result) == 1) {
        return true;
    }
    else {
        return false;
    }
}



?>

What are the specific errors? Where is the code that actually calls these PHP functions? — Mike Brant
– Mike Brant, Commented Jan 21, 2014 at 22:27
Right now, there is no code that calls the functions. I was trying to call it from the "Log In" button within the dialog code, and it was doing nothing. Couldn't even get it to pop up javascript alerts. The code it should call, ultimately, is the userExists() function in the php page - just a SQL select using the values of the form to check for a match. If it returns true, then I want to have it call the setSessionUser() function. — amthomas2112
– amthomas2112, Commented Jan 21, 2014 at 22:28

MarthyM · Accepted Answer · 2015-06-05 20:21:17Z

1

If you are good with client side validation, you can do like:

Submit: function() {                            
    if($("#login_form").valid()) {
        $("#login_form").submit();
    }                   
}

Else, if you are looking for server side validation as you mentioned by using login.php, you have to work out on that file as well:

Submit: function() {                            
    validationCheck = $.post(
        'login.php', 
        {
            username:$('#userid').val(), 
            password:$('#pw').val()
        }
    );
    if(validationCheck) {
        $("#login_form").submit();
    }
}

PHP file:

if( is_valid_username($_POST['userid']) 
    && is_valid_password($_POST['pw']) 
    && is_valid_user($_POST['userid'], $_POST['pw']) ) {
    echo json_encode(true);
    return false;
}

Assuming is_valid_username($_POST['userid']) validates the username, is_valid_password($_POST['pw']) validates the password and is_valid_user($_POST['userid'], $_POST['pw']) checks for valid user.

edited Jun 5, 2015 at 20:21

MarthyM

1,8492 gold badges22 silver badges24 bronze badges

answered Jan 21, 2014 at 22:32

hsuk

6,87013 gold badges53 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amthomas2112 Over a year ago

So I did all this - the validity check I have going so far is as follows: if(userExists($_POST["userid"], $_POST["pw"])) { echo json_encode(true); return false; } If I put in a valid username and password, it'll return a blank page with "true", otherwise, just a completely blank page. How can I make the result choose whether to return a message on the dialog or redirect to index.php?

amthomas2112 Over a year ago

I figured out the rest. Thanks for the help!

PsychoMantis · Accepted Answer · 2014-01-21 22:30:16Z

1

Try adding

<input type="submit" value="submit" name="submit"/>

to your HTML form to give you a submit button and then in your PHP script, before all your methods add something like

if(isset($_POST['submit']))
{
    $user=$_POST['userid'];
    $pass=$_POST['pw'];

    //call one of your functions
}

which will get your login data over to your php script; to confirm, add

echo $user . " - " . $pass;

to the inside of the above if statement just under the variable definitions.

Also, just read your latest comment - I believe you have to have your <script> code after the HTML elements otherwise jquery won't bind to the elements.

answered Jan 21, 2014 at 22:30

PsychoMantis

1,0153 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Processing a jQuery UI dialog form in PHP

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related