I have a very simple task that just isn't working, and I have no idea why. I have a PHP file (with mostly HTML in it) that I simply copied to another file in the same folder, expecting to have the same functionality. I have two buttons that are supposed to popup a window when pressed, but in the new page, whenever a button is pressed, I get the pageURL+ #id of form in the URL, and nothing happens. For example: "{/project/login.php#loginmode}" //yes, it's on localhost
The way I understand it, id's must be unique within a page, but should they also be unique across pages within a folder? I tried changing the id names, only to find the new id names showing up in the URL. I also tried copying the original file to a completely different directory, and still, the same problem. Then I tried changing the ID names there, and still, no go. What am I missing?? I have restarted my server and cleared my cache many times...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8"/>
<title>TITLE/title>
<link rel="stylesheet" type="text/css" href="style.css" me2dia="screen" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
<div id = "top">
<center>
<nav>
<a class="navbtn" href="about.php" style="padding: 0px 10px 0px 10px"> ABOUT</a> |
<a href="#loginmode" class="navbtn modaltrigger" style="padding: 0px 10px 0px 10px"> LOGIN </a> |
<a href="#contactmodal" class="navbtn modaltrigger" style="padding: 0px 10px 0px 10px"> CONTACT</a>
</nav>
</center>
</br></br></br>
</div>
<!--script for checking logging and creating user-->
<script type = "text/javascript">
function checkLogin(){
var u = document.getElementById("username").value;
var p = document.getElementById("password").value;
var xmlhttp;
if (window.XMLHttpRequest) //using AJAX
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//using AJAX:
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
if(xmlhttp.responseText == u){
alert('You have entered a correct username and/or password.');
window.location = 'home.php'; //should change from home to newposting.php???
}
else{
alert('You have entered an incorrect username/password combination. Please try again.');
//href=\"javascript:history.go(-2)\"
//window.location = 'loginredo.php';
}
}
}
xmlhttp.open("GET", "checkpw.php?u=" + u + "&p=" + p, true);
xmlhttp.send();
}
function newUser(){
location.href = 'signup.php';
}
</script>
</head>
<body>
<center>
<!--Login-->
<div id="loginmode" style="display:none;">
<logh1>Sign In:</logh1>
<form id="loginforme" name="loginforme" method="post" action="index.html">
<label for="username"><h2>Username:</h2></label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password"><h2>Password:</h2></label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center">
<input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" onclick="checkLogin(); return false;" tabindex="3">
<input type="submit" name="newusrbtn" id="create-user"" class="flatbtn-blu hidemodal" value="New User" onclick="newUser();" tabindex="4">
</div>
</form>
</div>
<!--Contact-->
<div id="contactmodal" style="display:none;">
<logh1>Contact GULSEN:</logh1>
<form name="contactform" action="contact.php" method="post"> <!--cannot have id="contactform"-->
<label for="cf_first_name"><h2>First Name</h2></label>
<input type="text" name="cf_first_name" class="txtfield" tabindex="1">
<label for="cf_last_name"><h2>Last Name</h2></label>
<input type="text" name="cf_last_name" class="txtfield" tabindex="2">
<label for="cf_email"><h2>Email Address</h2></label>
<input type="text" name="cf_email" id="cf_email" class="txtfield" tabindex="3">
<label for="password"><h2>Message</h2></label>
<textarea name="cf_message" cols="100" rows="5" class="txtfield" tabindex="4" style="resize: none; outline: none"></textarea>
<label for="cf_reference"><h2>How did you hear about GULSEN?</h2></label>
<input type="text" name="cf_reference" id="cf_reference" class="txtfield" tabindex="5">
<div class="center">
<input type="submit" class="flatbtn-blu" value="Send">
<input type="reset" class="flatbtn-blu" value="Clear">
</div>
</form>
</div>
</center>
<script type="text/javascript">
$(function(){
$('#loginforme').submit(function(e){
return false;
});
$('#contactform').submit(function(e){
return false;
});
$('.modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
<div id="footer"></div>
</body>
</html>
