CODEWITHSUNDEEP
phphtmlformsbutton
Razor
Razor

Reputation: 2641

Bind buttonClick() Event to PHP Function

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>

Upvotes: 1

Views: 10452

Answers (4)

ʰᵈˑ
ʰᵈˑ

Reputation: 11375

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.

Upvotes: 3

C_B
C_B

Reputation: 2682

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>

Upvotes: 0

Ivan Yonkov
Ivan Yonkov

Reputation: 7034

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.

Upvotes: 1

L&#233;o Lam
L&#233;o Lam

Reputation: 4131

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.

Upvotes: 0

Related Questions