CODEWITHSUNDEEP
javascriptjqueryhtmlpassword-protection
saulpm
saulpm

Reputation: 23

Need to create jquery password prompt (should be simple)

So I made a website for a scavenger hunt i am hosting, but I need a password prompt to come up nearly every page to make sure they have completed the challenge to move on. I am using Jquery and the only way to get the password promt to show up is after i refresh the page which is no good. I need a way to link one page to another, and show a password prompt before they can see the page. Here is the important html. Also, if you can. Whenever I refresh the page all of the css seems to dissapear and im left with the text. If you can please help with that. 

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery</title>
      <link rel="stylesheet" href="../themes/scavenger-hunt.min.css" />
    <link rel="stylesheet" href="../Publish/jquery-mobile/jquery.mobile.structure-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
  <body> 
<script language="javascript">
var password
var pass1="123"

password=prompt('Please enter password to view page')
if (password==pass1)
alert('password correct! Press ok to continue.')

else{
  window.location="index.html";
  alert('password incorrect! Redirecting')
}

</script>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Hint 1</h1>

  </div>

Upvotes: 0

Views: 5074

Answers (2)

Alaa Mehrez
Alaa Mehrez

Reputation: 1

You can use ajax call and jquery msg plugin, it is nice and simple

http://dreamerslab.com/blog/en/jquery-blockui-alternative-with-jquery-msg-plugin/

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39892

There are several ways to handle this, but here are two. One easier than the other. The first way I would do this is to have all the content on the page, but have it hidden on page load. If password is entered properly then it displays the page.

body { display:none; }

if (password == pass1) { $('body').show(); }

http://jsfiddle.net/5JyTy/

The other would be to use AJAX and only request/display the content if the password is actually correct.

if (password == pass1) { $('body').load('ajax/test.html'); }

Upvotes: 2

Related Questions