jQuery call modal from PHP script

Question

I am creating a login script that checks if the user exists in the table.

In the event that the user doesn't exist, I want to use jquery to open a modal window letting the user know there was an error.

 <?php
   include("../include/database.php");
   if(isset($_GET['loginSubmit']))   // form submit button
   {
 // form username and password values
     $username = strip_tags(mysqli_real_escape_string($dbc, trim($_GET['username'])));
     $password = strip_tags(mysqli_real_escape_string($dbc, trim(md5($_GET['password']))));

 // set query
     $select = "SELECT username, fullname, userlevel, `password` FROM users WHERE username = '".$username."'"; 
 // run query
     $query = mysqli_query($dbc, $select);
 // get the results
     $row = mysqli_fetch_array($query);
 // set the results to variables to be used in sessions
     $dbusername = htmlentities(stripslashes($row['username']));    
     $dbfullname = htmlentities(stripslashes($row['fullname']));
     $dbuserlevel = htmlentities(stripslashes($row['userlevel']));
     $dbpassword = htmlentities(stripslashes($row['password']));

 // check if the database password matches the user password
     if($dbpassword == $password)
     {
 // if yes, set the sessions and direct to main page
       $_SESSION['username'] = $username;
       $_SESSION['fullname'] = $dbfullname;
       $_SESSION['userlevel'] = $dbuserlevel;
       header("Location:main.html"); 
     }
     else
     {
 // if no match, this is where I want the javascript to show the modal
       echo ("<script language='javascript'>
              $('#errLoginModal').modal('show');  // this is jquery and I know it's incorrect
              window.location.href='index.php'
              </script>");
     }  
 ?>

I am still trying to get better with JavaScript, jQuery, and PHP. With Stack Overflow, I have been getter getting better.

I want the PHP script to use JavaScript/jQuery to fire a modal window when the username/password check fails. I am not even sure if this is the best method.

I know the code above is incorrect. I mean it doesn't show the modal window for one.

On the other hand, I can add an alert, and it fires the alert like so:

 else
 {
   echo ("<script language='javascript'>
          alert(test);
          window.location.href='index.php'
          </script>");
 }

This works. I just would like it to be able to show the modal.

Are you submitting the form though ajax? If not, you probably should as a modal window does not make a lot of sense on a newly loaded page / in the content of your question. — jeroen
– jeroen, Commented Apr 6, 2015 at 14:56

Dallin · Accepted Answer · 2015-04-06 15:38:17Z

2

You can try to include js file.

 }else{

   echo `<script src="you_file.js"></script>`
 }

    //you_file.js

(function ($){
    $(document).ready(function() {
        alert(`test`);
        $('#errLoginModal').modal('show');  
        window.location.href='index.php';
    })
})

of course include jquery before that

edited Apr 6, 2015 at 15:38

Dallin

1,07413 silver badges30 bronze badges

answered Apr 6, 2015 at 14:59

Vlad Mazur

641 silver badge6 bronze badges

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

2 Comments

John Beasley Over a year ago

The jquery file I am using is jQuery-2.1.3.min.js, but it is located near the bottom of my front page, called index.php. Could this be the reason why the script is still not working?

John Beasley Over a year ago

thank you sir. I was able to answer the question using your post comment.

Artjom B. · Accepted Answer · 2015-04-06 16:44:54Z

1

I am assuming you're using Bootstrap to open the modal window, because you use .modal('show'). Make sure you include jquery as well as the bootstrap js files in your HTML <head></head>.

In case the modal window is located below the call to $('#errLoginModal').modal('show');, you need to use the jQuery .ready event, which will fire once the DOM is fully loaded, docs.

So you're else should probably look like so:

else {
    echo ("<script language='javascript'>
        $( document ).ready(function() {
          $('#errLoginModal').modal('show');
        });
        </script>");
}

edited Apr 6, 2015 at 16:44

Artjom B.

62k26 gold badges137 silver badges236 bronze badges

answered Apr 6, 2015 at 14:53

Christian

1,68319 silver badges34 bronze badges

1 Comment

John Beasley Over a year ago

I was able to use a combination of your code and Vlad Mazur's code to figure out my problem. Thank you, sir.

Collectives™ on Stack Overflow

jQuery call modal from PHP script

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related