Im trying to put my "register.php" into fancybox, however I cant make it connect there.
To call up fancybox I use this:
<body>
Open
<div id="test" style="display:none;width:400px; height:600px;"
**Content here**
<!--Javascript for fancybox-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
My register form is like this:
<?php
include_once 'includes/register.inc.php';
include_once 'includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Registration Form</title>
<script type="text/JavaScript" src="js/sha512.js"></script>
<script type="text/JavaScript" src="js/forms.js"></script>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- Registration form to be output if the POST variables are not
set or if the registration script caused an error. -->
<h1>Register with us</h1>
<?php
if (!empty($error_msg)) {
echo $error_msg;
}
?>
<ul>
<li>Usernames may contain only digits, upper and lower case letters and underscores</li>
<li>Emails must have a valid email format</li>
<li>Passwords must be at least 6 characters long</li>
<li>Passwords must contain
<ul>
<li>At least one upper case letter (A..Z)</li>
<li>At least one lower case letter (a..z)</li>
<li>At least one number (0..9)</li>
</ul>
</li>
<li>Your password and confirmation must match exactly</li>
</ul>
<form method="post" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
Username: <input type='text' name='username' id='username' /><br>
Email: <input type="text" name="email" id="email" /><br>
Password: <input type="password"
name="password"
id="password"/><br>
Confirm password: <input type="password"
name="confirmpwd"
id="confirmpwd" /><br>
<input type="button"
value="Register"
onclick="return regformhash(this.form,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);" />
</form>
<p>Return to the login page.</p>
</body>
</html>
Im using the latest version of fancybox and I havent done much with the js files. Any ideas?
Related
Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});
I have form validation setup and working as you can see (using javascript), the only problem is that when someone successfully logs in, I have it redirect to login.php but if someone directly visits mysite.com/login.php they don't need a password to login. If there is any type of php code I need to add then that's fine, another option would be to change the function for the javascript on a successful login. Any info will help!
I have a password only form; here is my code:
<!doctype html>
<html>
<head>
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/account.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<title>The Order of Aztec</title>
</head>
<body>
<div id="page" align="center">
<br /><br /><br />
<div align="center"><img src="images/aztec-logo.png" width="256" height="198" alt="Aztec"/></div>
<br /><br /><br /><br /><br />
<div id="error-division"></div>
<br />
<form id="myForm" align="center">
<div align="center"><input placeholder="Password" name="pword" id="pword" type="password" /></div>
<br />
<div align="center" id="agree-box"><input id="agree-box-input" onClick="login();return false;" type="checkbox">Agree that you are part of the steam group "The order of aztec."</input></div>
<br />
<div align="center"><input id="submit" type="submit" /></div>
</form>
<div id="ack"></div>
</div>
</body>
<script type="text/javascript">
function login()
{
var pass = document.getElementById('pword');
var corpass = "t";
var agree = document.getElementById('agree-box-input');
if(pass.value == corpass && agree.checked == true)
{
window.location = "login.php"
} else {
document.getElementById("error-division").innerHTML = "Wrong password or agreement not checked. Please try again.";
}
}
</script>
</html>
add if statement in your login.php
<?php
if(isset($_POST['your_username']) && isset($_POST['your_password'])){
// do your activities
}else{ ?>
<script type="Javascript">
alert("Your username / password is incorrect");
window.location = "your_validation_page.php";
</script>
<?php } ?>
I have found a nice form validation plugin in this website:http://formvalidator.net/index.html
While I was trying to implement server-side validation, the plugin doesn't seems to work. It states that it would send the url via POST method to the url that I have declared in the attribute data-validation-url.However when I tried to echo the post variable, it doesn't seems to show in the web browser.
Could someone help to look into it? Maybe I might have done something wrong somewhere. Apologies, I am quite new to programming! :)
Take a look at this page section:http://formvalidator.net/index.html#security-validators
FormValidate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script>
$.validate
({
modules : 'security',
onModulesLoaded : function()
{
$('input[name="pass"]').displayPasswordStrength();
}
});
</script>
</head>
<body>
<form action="" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php" />
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p><i>Hint: A strong password consists of 13 alphanumeric characters.</i></p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
validate.php
<?php
$response = array(
'valid' => false,
'message' => 'Post argument "user" is missing.'
);
if( isset($_POST['user']) ) {
echo $_POST['user'] //value not echoed in the browser :/
}
echo json_encode($response);
EDITED: I missed completely a slash in the input of the username, and that was the problem, test it now, now it fires the post request.
You only need to add method post on the form.
Try to use proper indentation it's easier to read and no one will blame you for doing it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$.validate({
modules : 'security',
onModulesLoaded : function() {
var optionalConfig = {
fontSize: '12pt',
padding: '4px',
bad : 'Very bad',
weak : 'Weak',
good : 'Good',
strong : 'Strong'
};
$('input[name="pass"]').displayPasswordStrength(optionalConfig);
}
});
</script>
</head>
<body>
<form action="/login" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php">
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p>
<i>Hint: A strong password consists of 13 alphanumeric characters.</i>
</p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
Check this out, seems to be working fine.
Good Luck.
I include my HTML in PHP using heredoc, and I want to get the user input variable that is inside heredoc, and echo it out. I tried using $_GET["input"], but I got error undefined index:input
May I know how to get the input variable?
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<script>
function searchSite(){
var input=document.getElementById("searchinput").value;
var searchForm=document.getElementById("searchForm");
searchForm.action="http://www.mudah.my/Malaysia/Electronics-3000/"+input+"-for-sale?lst=0&fs=1&q="+input+"y&cg=3000&w=3&so=1&st=s";
searchForm.submit();
}
</script>
<form method="get" action="ttt.php" id="searchForm">
<input type="text" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button onclick="searchSite()">Search</button>
</form>
<p><label>Mudah<input type="checkbox" name="searchFrom" value="Mudah" checked/></label>
<label><font color="grey">Lazada</font><input type="checkbox" name="searchFrom" value="Lazada" disabled="disabled"/></label>
<label><font color="grey">Lelong</font><input type="checkbox" name="searchFrom" value="Lelong" disabled="disabled"/></label>
<label><font color="grey">Ebay</font><input type="checkbox" name="searchFrom" value="Ebay" disabled="disabled"/></label></p>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["input"];
echo $userInput;
?>
You have to call the input name "searchinput". But it could not be available if you not send the form, and you have to call it by "name" tag, noy by "id".
You can show it after send using Javascript, no PHP.
This works, but the form have to be processed by the same file, so "action" have to be empty. If not, you can get the GET parameters in the file process your form, in your example ttt.php
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<form method="get" id="searchForm">
<input type="text" name="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button type="submit">Search</button>
</form>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["searchinput"];
echo $userInput;
?>
$_GET[..] takes the name of a form element. So in your HTML you need to include that:
<input type="text" name="input" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
Also note you only want to get the item when you submitted the form, you need to first check the GET exist:
// If we submitted our form with a element named "input", then echo
if(isset($_GET["input"]) {
$userInput=$_GET["input"];
echo $userInput;
}
That way the code only will run if the form was submitted.
I have a perfectly working page in Firefox and Chrome. Unfortunately, I need to support IE. I am using jQuery v1.9.0 and Validation v1.12.0
Here's the source.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>redacted</title>
<meta name="description" content="redacted">
<meta name="author" content="******">
<link rel="stylesheet" href="/styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/functionality/funcs.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('div#spaces p').load('/reload.php/?id=<?php echo $id ?>').fadeIn("slow");
}, 4000); // refresh every 10000 millisecond
</script>
<script src=http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js></script>
<script>
$(document).ready(function () {
$(function(){
$("#bookingForm").validate({
rules: {
bookingname: "required",
ticketno: "required",
numPeople: {
required: true,
max: <?php echo $spaces ?>
}
},
messages: {
bookingname: "Please enter your name",
ticketno: "Please enter the ticket number",
numPeople: {
required: "You are trying to book zero people",
max: "The activity is full"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
});
</script>
<body>
<div class="header">
<h1><?php echo $activity.": ".$day."-".$month."-".$year." ".$time;?></h1>
</div>
<div class="formInstructions">
<p> Edit Event </p>
</div>
<table class="eventInfo">
<thead>
<tr><th>Activity Name</th><th>Activity Date</th><th>Activity Time</th><th>Spaces</th><th>Cost</th><th>Venue</th></tr>
</thead>
<tr><td><?php echo $activity;?></td><td><?php echo $activity_date?></td><td><?php echo $time ?></td><td><div id="spaces"><p><?php get_spaces($id);?></p></div></td><td><?php get_cost($id)?></td><td><?php get_venue($id)?></td></tr>
</table>
<div class="formInstructions">
<p><?php echo get_event_comments($id);?></p>
</div>
<!--table displays current bookings -->
<table class="eventInfo">
<thead>
<tr><th>Ticket No.</th><th>Contact</th><th>Pickup</th><th>PAX</th><th>Comments</th></tr>
</thead>
<?php get_bookings($id)?>
</table>
<!--booking form -->
<form action="/formfuncs/bookingForm.php" method="POST" id="bookingForm" name="bookingform" novalidate="novalidate">
<fieldset>
<legend>Book an Activity</legend>
<label for="bookingname">Name</label>
<input type="text" name="bookingname" id="bookingname" />
<label for="ticketno">Ticket No. </label>
<input type="text" name="ticketno" id="ticketno" />
<label for="pickup">Pick up</label>
<input type="text" name="pickup" id="pickup" />
<label for="numPeople">Number of People</label>
<input type="text" id="numPeople" name="numPeople"/>
<input type="hidden" id="id" value="<?php echo $id ?>" name="idfield"/>
<label for="needsOrComments">Place comments here</label>
<textarea name="needsOrComments" rows="10" cols="80">N/A</textarea>
<input type="submit" value="Go" name="go">
</fieldset>
</form>
</body>
</html>
While the page loads, displays and interacts well in Firefox and Chrome. When loaded in Internet Explorer the console spits out "SCRIPT438: Object doesn't support property or method 'validate" on line28 column 5.
This might be due to the version conflicts between the jquery and jquery validate. Make sure you are using the jquery validate version compatible with jquery.