Bind buttonClick() Event to PHP Function

Question

I am a rookie in PHP and have just started learning the basics of this language.

I have created a page login.php that contains a text field and a password field. What I want to do is, on the click of the submit button, I want to call a PHP method, authenticateUser() that I have defined on the same page. If the user is successfully authenticated, then he is directed to the index.html page. If not, then he remains on the same page and an error message pops up saying that the username/password is incorrect. All of this logic has been defined in the authenticateUser() function. I haven't included the code over here for security purposes.

The problem is that the button resides on the client side and the PHP script resides on the server side. Can anyone please tell me how can I achieve this? The source code for login.php is given below. Thank you in advance.

login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Login</title>
</head>

<body>
    <?php function authenticateUser($username,$password) { //Code to check the user 's credentials
            }
        ?>
        <form id="form1" name="form1" method="post" action="index.php">
        <input name="txtUsername" type="text" id="txtUsername" size="30" maxlength="100" />
        <input name="txtPassword" type="password" id="txtPassword" size="30" maxlength="100" />
        <input type="submit" name="btnLogin" id="btnLogin" value="Log In" />
        </form>
</body>
</html>

You should read doc about Ajax.

BENARD Patrick
– BENARD Patrick

2013-12-23 10:13:19 +00:00
Commented Dec 23, 2013 at 10:13 — BENARD Patrick
– BENARD Patrick, Commented Dec 23, 2013 at 10:13

ʰᵈˑ · Accepted Answer · 2013-12-23 10:41:39Z

3

Either use an AJAX request and separate the logic, or submit the form to the same page, and do a check. For example;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
</head>
<body>
<?php 
   if( isset($_POST) ) {
         //Let's assume sanitation and validation on input is done in the function
         authenticateUser($_POST['txtUsername'], $_POST['txtPassword']);
   }
    function authenticateUser($username,$password)
        {
        //Code to check the user's credentials
    }
?>
<form id="form1" name="form1" method="post" action="">
<input name="txtUsername" type="text" id="txtUsername" size="30" maxlength="100" />
<input name="txtPassword" type="password" id="txtPassword" size="30" maxlength="100" />
<input type="submit" name="btnLogin" id="btnLogin" value="Log In" />
</form>

What I've done;

Added if( isset($_POST) ) { to see if a user has posted anything, then call the function
Removed the action attribute value in the form.

Answering the questions in the comments below

1) I'd more personal preference. Plus, if this page gets renamed from index.php, your script won't work as expected. Making it blank will post to the current page.

2) Assuming all checks have been done, and you're just wanting to redirect them to said page, you could do the following;

ob_clean(); //As we'd be sending a header() request after HTML output.
header('Location: index.php');

You could put this in the authenticateUser function, or elsewhere if authenticateUser returns boolean TRUE - it all depends on your logic.

Also, ensure you create a session for the logged-in user and handle the sessions accordingly, taking into account measures to handle exploits - such as session hijacking.

edited Dec 23, 2013 at 10:41

answered Dec 23, 2013 at 10:15

ʰᵈˑ

11.4k3 gold badges31 silver badges50 bronze badges

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

2 Comments

Razor Over a year ago

Thank you very much for replying. I have two questions over here. 1) Why did you remove the action attribute value from the form? 2) Suppose if the user has been authenticated successfully, where and how should I write the logic to redirect him to index.php?

Razor Over a year ago

Thank you once again for providing me the solution to my question.

Ivan Yonkov · Accepted Answer · 2013-12-23 10:17:14Z

1

You are going to the right direction, you cannot execute the function on click. But, you can execute the function on set action, testing with isset().

if (isset($_POST['btnLogin'])) {
    authenticateUser($_POST['txtUsername'], $_POST['txtPassword']);
}

This will execute the function if btnLogin is set, but you will need new request to the page (i.e. when you click the button, the page will load again, and then it will execute the function.

You can use ajax request to simplify the request-response.

However, when you are using values from the POST array, you don't need to pass them as arguments. They are parts of the global scope, so they are visible to the function.

answered Dec 23, 2013 at 10:17

Ivan Yonkov

7,0291 gold badge20 silver badges25 bronze badges

Comments

Léo Lam · Accepted Answer · 2013-12-23 10:16:15Z

0

Short answer: it is not possible to bind your submit button to a PHP function.

The reason is simple: PHP is server-side, and HTML/JS is client-side. The client simply won't see any of your PHP code.

To workaround this, you could use jQuery to bind the submit button to a function that calls the PHP function via Ajax, and you would move your PHP code into a separate file.

answered Dec 23, 2013 at 10:16

Léo Lam

4,1794 gold badges37 silver badges44 bronze badges

Comments

C_B · Accepted Answer · 2013-12-23 10:21:44Z

I would submit to the same page and check the inputs there. Then redirect if it passes validation.

     <?php
            if(isset($_POST))  //checks if form has been submitted
            {
                authenticateUser($_POST['txtUsername'],$_POST['txtPassword']);
            }

            function authenticateUser($username,$password)
            {
                //Code to check the user's credentials
                //example:
                if($username === null) 
                {
                 header('location:index.php'); //redirects to index.php
                }
            }
        ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login</title>
        </head>
        <body>
        <form id="form1" name="form1" method="post" action="login.php">
        <input name="txtUsername" type="text" id="txtUsername" size="30" maxlength="100" />
        <input name="txtPassword" type="password" id="txtPassword" size="30" maxlength="100" />
        <input type="submit" name="btnLogin" id="btnLogin" value="Log In" />
        </form>
    </body>
</html>

Collectives™ on Stack Overflow

Bind buttonClick() Event to PHP Function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related