Click here to Skip to main content
13,861,257 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
Hi, why is my login button cannot function?

What I have tried:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	
	<title> E-learn Qz</title>

	<style>
	body {
		background-image: url("bg.jpg");
		background-repeat: no-repeat;
		background-size: 75% 75%;
		background-attachment: fixed;
		background-position: left center;
	}
</style>
</head>


<body>
	<nav class="navbar navbar-inverse  navbar-fixed-top"  role="navigation" >
                               
                 <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
             
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class=""><a   href="index.html"><span class="glyphicon" aria-hidden="true"></span> E-learn Qz</a></li>                
    
                </ul>
               <ul class="nav navbar-nav navbar-right">
                   <li><a data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span> login</a></li>
                </ul>
                                              
       
            </div>
        </div>   

 </nav>
    <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"> ×</button>
                <h4>Login</h4>
            </div>
            <div class="modal-body">
                   <form class="form-inline">
                   <div class="form-group">
                       <label class="sr-only" for="email">Email</label><input type="text" class="form-control input-sm" placeholder="Email" id="email" name="email">
                       </div>
                        <div class="form-group">  
                          
                           <label class="sr-only" for="password">Password</label>
                                     <input type="password" class="form-control input-sm" placeholder="Password" id="password" name="password"></div>
                       <div class="checkbox">
                       <label>
                       <input type="checkbox"> Remember me
                       </label>
                         </div>
                    
                      
                        
                       <button type="submit" class="btn btn-info btn-xs">Sign in</button>
                       <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button> 
                    
                   
                     
               
                    </form>
            </div>

        </div>
        </div>
    </div>

</body>
</html>
Posted
Updated 23-Jan-19 21:41pm

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Hi,

I think you have missed to use two required script file for the above code. you can add the following line to your code

<pre><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


After that, you can save and run the your code. i have updated the above lines and checked your code is working fine. you can try the below code

<pre><!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <title> E-learn Qz</title>

    <style>
        body {
		background-color: burlywood;
		background-repeat: no-repeat;
		background-size: 75% 75%;
		background-attachment: fixed;
		background-position: left center;
	}
</style>
</head>

<body>
    <nav class="navbar navbar-inverse  navbar-fixed-top" role="navigation">

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class=""><a href="index.html"><span class="glyphicon" aria-hidden="true"></span> E-learn Qz</a></li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span>
                            login</a></li>
                </ul>


            </div>
        </div>

    </nav>
    <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"> ×</button>
                    <h4>Login</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="sr-only" for="email">Email</label><input type="text" class="form-control input-sm"

                                placeholder="Email" id="email" name="email">
                        </div>
                        <div class="form-group">

                            <label class="sr-only" for="password">Password</label>
                            <input type="password" class="form-control input-sm" placeholder="Password" id="password"

                                name="password"></div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-info btn-xs">Sign in</button>
                        <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

</body>

</html>



I hope it will solve the your problem and let me know if have any issue
   
Comments
Member 12794883 24-Jan-19 21:57pm
   
Thank you, it worked! Btw im still new to this, after i try to login, it lead me to the same page. How can i make it take me to the next page? should i add here --> </a href="home.php"/> Sign in??
san2debug 24-Jan-19 22:30pm
   
I mean you want to redirect the page after the successfully logged in or else you want to stay the same page after the successfully logged in?
Member 12794883 24-Jan-19 23:47pm
   
redirect the page after the successfully logged in, & i just noticed even if i put on wrong login credential, it didnt tell me the ID was wrong. the link only change to this http://localhost/24.1/index.php?email=test123%40gmail.com&password=asas
san2debug 25-Jan-19 0:04am
   
you can do client-side validation for credential fields should not be empty, then server-side validation to verifying the credential is correct or wrong.
Member 12794883 25-Jan-19 1:35am
   
okay i'll try to do that, thank you!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01 | 2.8.190214.1 | Last Updated 24 Jan 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100