AJAX Doesn't Load the the second nested PHP function - javascript

My AJAX call gets triggered for one condition, however when it proceeds to new nested php function it showing the output is the php processing file...Below is my Code.. i am using bootstrap 3.0 framework on this one and pure javascript.
<!-- Modal Register -->
<div id="register" class="modal fade">
<div class="modal-dialog">
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-1" style="max-width:400px;">
<form role="form" method="POST" id="reg" action="reg-check.php">
<div class="panel panel-primary" style="border:1px solid black;">
<div class="panel-heading" style="background-color:black;">
<h3 class="panel-title">
Register
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</h3>
</div>
<div class="panel-body ">
<div class="login-box">
<img src="images/newlogo2.png" width="100%;"><br/><br/>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" name="name" placeholder="Name" autofocus />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-earphone"></span>
</span>
<input type="tel" class="form-control" name="mobile" placeholder="Mobile Number" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-briefcase"></span>
</span>
<input type="email" class="form-control" name="email" placeholder="email" required/>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id="pass" class="form-control" name="password" placeholder="Password" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id = "pass1"class="form-control" name="password1" placeholder="Confirm Password" required />
</div>
<label>
<input type="checkbox" name="agree" value="agree"> I agree to the terms and conditions of the website and cookie policy</label>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="text-align:center;">
<p><span id="errorMessage"></span></p>
<button id="submitreg" type="submit" class="btn btn-labeled btn-success" data-dismiss="none" onClick="javascript:ajax_post();">
<span class="btn-label">
<i class="glyphicon glyphicon-ok"></i>
</span>Submit</button>
<button type="reset" class="btn btn-labeled btn-danger" >
<span class="btn-label">
<i class="glyphicon glyphicon-remove"></i>
</span>lReset</button>
</div>
</div>
</div>
</div>
</div>
</form>
<div><p id="errorMessage"></p></div>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
My Ajax Scripts`
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
hr.open("POST", url, true);
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
console.log(return_data);
document.getElementById("errorMessage").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(); // Actually execute the request
document.getElementById("errorMessage").innerHTML = "processing...";
}
MY PHP Script
<?php
require ("/Pages/dbc.php");
if(!empty($_POST['name']) && !empty($_POST['mobile']) && !empty($_POST['email']) && !empty($_POST['password']) && !empty($_POST['password1']))
{
$name =mysql_real_escape_string($_POST['name']);
$mobile =mysql_real_escape_string($_POST['mobile']);
$email =mysql_real_escape_string($_POST['email']);
$password =mysql_real_escape_string($_POST['password']);
$password1 =mysql_real_escape_string($_POST['password1']);
$query =mysql_query("SELECT * FROM `register` WHERE `mobile`= $mobile");
$numrows =mysql_num_rows($query);
if($numrows == 0){
$query1 =mysql_query("SELECT * FROM `register` WHERE `email`= '$email'");
$numrows1 =mysql_num_rows($query1);
if($numrows1==0){
if($password == $password1){
mysql_query("INSERT INTO `cabs4rent`.`register` (`name`, `mobile`, `email`, `password`) VALUES ('$name', '$mobile', '$email', '$password');");
echo "Registration Successful";
}else{
echo "Passwords do not match";
}
}else{
echo "Emails is already registered";
}
}else{
echo "Mobile Number Already Registered";
}
}
else
{
echo 'Please fill all the details';
}
exit;
?>
I will changing to mysqli/pdo very soon.
The problem was with the action attr in my form element. hence i removed the form element and and in ajax made changes and used urlencoder to send the data... everything work smoothly..
Here is the code
function ajax_post(){
// Create our XMLHttpRequest object
//preventDefault();
var hr = new XMLHttpRequest();
var name =document.getElementById("name").value;
var mobile =document.getElementById("mobile").value;
var email =document.getElementById("email").value;
var password =document.getElementById("pass").value;
var password1 =document.getElementById("pass1").value;
var vars = "name="+name+"&mobile="+mobile+"&email="+email+"&password="+password+"&password1="+password1;
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
hr.open("POST", url, true);
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
console.log(return_data);
document.getElementById("errorMessage").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("errorMessage").innerHTML = "processing...";
}
Form without the formelement
<!-- Modal Register -->
<div id="register" class="modal fade">
<div class="modal-dialog">
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-1" style="max-width:400px;">
<div class="panel panel-primary" style="border:1px solid black;">
<div class="panel-heading" style="background-color:black;">
<h3 class="panel-title">
Register
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</h3>
</div>
<div class="panel-body ">
<div class="login-box">
<img src="images/newlogo2.png" width="100%;"><br/><br/>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control"id="name" name="name" placeholder="Name" autofocus />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-earphone"></span>
</span>
<input type="tel" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-briefcase"></span>
</span>
<input type="email" class="form-control" id="email" name="email" placeholder="email" required/>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id="pass" class="form-control" name="password" placeholder="Password" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id = "pass1"class="form-control" name="password1" placeholder="Confirm Password" required />
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="text-align:center;">
<p><span id="errorMessage"></span></p>
<button id="submitreg" type="submit" class="btn btn-labeled btn-success" data-dismiss="none" onClick="javascript:ajax_post();">
<span class="btn-label">
<i class="glyphicon glyphicon-ok"></i>
</span>Submit</button>
<button type="button" id="regReset" onclick="rested();" class="btn btn-labeled btn-danger" >
<span class="btn-label">
<i class="glyphicon glyphicon-remove"></i>
</span>Reset</button>
</div>
<p><span id="errorMessage"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
No changes made to to PHP script.

It looks like you're not posting any data.
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
doesn't add any of the values to the url.
You schould do something like
var name_value=document.getElementById('name').value;
var mobile_value=document.getElementById('mobile').value;
var url = "reg-check.php?" + "name=" + name_value + "&mobile=" + mobile_val;

Related

File upload unable to Insert form and View on click of file

I have done a file upload for code inside a form and on submit the form should insert into database which is not happening and I am fetching the table in another page and when I click on particular file it is not redirecting to page properly.
jobs.php
<div id="apply" class="overlay">
<div class="popup">
<a class="close" href="jobs.php">×</a>
<div class="content" style="margin-top: 20px;">
<form enctype="multipart/form-data" class="" action="upload.php" id="template-jobform" name="template-jobform" method="post" role="form" value="<?php echo htmlspecialchars($row['id']);?>">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="template-jobform-fname" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="template-jobform-email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone fa" aria-hidden="true"></i></span>
<input type="phone" class="form-control" name="template-jobform-phone" id="mobile" placeholder="Mobile Number"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-briefcase fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="job_name" id="mobile" placeholder="Position Applying For"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="file"
class="filepond"
name="file"
multiple/>
<!-- <button type="submit" name="btn-upload">upload</button> -->
</div>
</div>
</div>
<?php
include('admin/config.php');
ini_set("display_errors", 1);
if(isset($_POST['btn-upload']) && $_POST['template-jobform-email']!= '' && $_POST['template-jobform-fname']!= '') {
$sql = "INSERT INTO apply_job (`template-jobform-fname`,`template-jobform-email`,`template-jobform-phone`,`job_name`) VALUES (?,?,?,?)";
$stmt = mysqli_prepare($db,$sql);
$stmt->bind_param("ssss", $_POST['template-jobform-fname'], $_POST['template-jobform-email'], $_POST['template-jobform-phone'],$_POST['job_name']);
$stmt->execute();
}
?>
<div class="form-group">
<button target="_blank" type="submit" name="btn-upload" class="btn btn-primary btn-lg btn-block">Apply</button>
</div>
</form>
<br /><br />
<?php
if(isset($_GET['success']))
{
?>
<label>File Uploaded Successfully... click here to view file.</label>
<?php
}
else if(isset($_GET['fail']))
{
?>
<label>Problem While File Uploading !</label>
<?php
}
else
{
?>
<label>Try to upload any files(PDF, DOC, EXE, VIDEO, MP3, ZIP,etc...)</label>
<?php
}
?>
</div>
</div>
</div>
upload.php
if(isset($_POST['btn-upload']))
{
$file = rand(1000,100000)."-".$_FILES['file']['name'];
$file_loc = $_FILES['file']['tmp_name'];
$file_size = $_FILES['file']['size'];
$file_type = $_FILES['file']['type'];
$folder="admin/uploads/";
// new file size in KB
$new_size = $file_size/1024;
// new file size in KB
// make file name in lower case
$new_file_name = strtolower($file);
// make file name in lower case
$final_file=str_replace(' ','-',$new_file_name);
if(move_uploaded_file($file_loc,$folder.$final_file))
{
$sql="INSERT INTO apply_job(file,type,size) VALUES('$final_file','$file_type','$new_size')";
mysqli_query($db,$sql);
echo $sql;
?>
<script>
alert('successfully uploaded');
window.location.href='jobs.php?success';
</script>
<?php
}
?>
Image
As shown in above image when I click on pdf how can i set correct pdf path for the file so that it redirects properly.
On first look, your opening form-tag is not following the HTML-Markup language restrictions. Please note, that HTML (like XML) requires a tree structure for tags, to not get unexpected behaviour.
Example:
Allowed: <form><div></div></form>
Not allowed: <div><form></div></form>
Maybe that could fix the redirection error.

How to redirect users to different pages depending on input value

I am just starting out with JavaScript. Pardon me for posting the whole code here. Since someone just suggested of posting a full code, I am doing it, as I am eager to get this right.
I am trying to redirect users to customized "Thank you page", depending on their area, upon submission of a page. Like you see, there are many forms and I am trying to find out their province by their areacode. As I am very new to javascript. I would like to ask you some help on this.
What I am basically trying to do is show users different "Thank you page". Imagine a page saying Thank you, your local rep in British Columbia will contact you.
So this is my attempt, which currently doesn't work and I can't find why.
<!--=== Content Part ===-->
<div class="container content">
<div class="title-box">
<div class="title-box-text"><span class="color-green">Book a Demo</span></div>
<p>With ClearDent, you can do everything. Better.</p>
</div>
<!-- Content Blocks -->
<div class="row">
<!-- Homework for Jason Begin -->
<div class="col-md-6 col-md-offset-3">
<!-- Homework for Jason End -->
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" value="https://test.cleardent.com/demo-thankyou.html" type="hidden">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="ppli#cleardent.com"> -->
<!-- ---------------------------------------------------------------------- -->
<fieldset>
<!--<label class="label" for="first_name">First Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<!--<label class="label" for="last_name">Last Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<!--<label class="label" for="email">Email</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
<!--<button class="btn-u btn-brd" onclick="window.history.back();"><i class="fa fa-arrow-left fa-fw"></i> Back</button>-->
</footer>
</form>
</div>
</div>
<!-- End Content Blocks -->
</div>
<!--=== End Content ===-->
<!-- InstanceEndEditable -->
<!--=== Footer Version 1 ===-->
<div class="footer-v1">
<div class="footer">
<div class="container">
<div class="row">
<!-- Social -->
<div class="col-md-3 md-margin-bottom-40">
<div class="row">
<div class="col-xs-12"><a href="../">
<div class="logo"> </div>
</a></div>
</div>
<div class="row">
<div class="col-xs-12">
<p>Subscribe to ClearDent Newsletter</p>
</div>
</div>
<div id="mc_embed_signup" class="row margin-bottom-20">
<form action="//cleardent.us2.list-manage.com/subscribe/post?u=c94a01df02408fee7e80ba656&id=3d0b9b204d&MERGE3=Web" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-inline" target="_blank">
<div class="col-xs-12">
<div class="input-group">
<label class="sr-only" for="mce-EMAIL">Email address</label>
<span class="input-group-addon colour-cleardent"><i class="fa fa-newspaper-o fa-fw"></i></span>
<input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email address" required>
<span class="input-group-btn">
<button type="submit" id="mc-embedded-subscribe" class="btn-u form-control">Subscribe</button>
</span> </div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_c94a01df02408fee7e80ba656_3d0b9b204d" tabindex="-1" value="">
</div>
</form>
</div>
<div class="row">
<div class="col-xs-12">
<div class="headline">
<h2>Connect With Us</h2>
</div>
<div class="social-connect">
<button class="btn btn-lg btn-rss" onclick="window.open('http://marketing.cleardent.com/')"><i class="fa fa-2x fa-rss"></i></button>
<button class="btn btn-lg btn-facebook" onclick="window.open('https://www.facebook.com/ClearDentSoftware')"><i class="fa fa-2x fa-facebook"></i></button>
<button class="btn btn-lg btn-twitter" onclick="window.open('https://twitter.com/ClearDentCanada')"><i class="fa fa-2x fa-twitter"></i></button>
<button class="btn btn-lg btn-googleplus" onclick="window.open('https://plus.google.com/+CleardentCanada/?prsrc=3')"><i class="fa fa-2x fa-google-plus"></i></button>
</div>
</div>
</div>
</div>
<!--/col-md-3-->
<!-- End Social -->
<!-- Badge -->
<div class="col-md-3 md-margin-bottom-40">
<div class="posts">
<div class="headline">
<h2>Seal of Approval</h2>
</div>
<ul class="list-unstyled latest-list">
<li> <a href="iso-certification-and-academy-of-general-dentistry-approval.html" id="footer-2-iso">
<div class="iso-logo"></div>
</a><small class="iso-logo-text">FM584056</small></li>
<li> <a href="iso-certification-and-academy-of-general-dentistry-approval.html" id="footer-2-agd">
<div class="agd-logo"></div>
</a><small class="agd-logo-text">1/4/2017 - 31/3/2019 | AGD Provider ID: 32124</small></li>
</ul>
</div>
</div>
<!--/col-md-3-->
<!-- End Badge -->
<!-- Link List -->
<div class="col-md-3 md-margin-bottom-40">
<div class="headline">
<h2>Popular Pages</h2>
</div>
<ul class="list-unstyled link-list">
<li>Features<i class="fa fa-angle-right"></i></li>
<li>Blog<i class="fa fa-angle-right"></i></li>
<li>Support<i class="fa fa-angle-right"></i></li>
<li>Training Videos<i class="fa fa-angle-right"></i></li>
<li>Events<i class="fa fa-angle-right"></i></li>
</ul>
</div>
<!--/col-md-3-->
<!-- End Link List -->
<!-- Address -->
<div class="col-md-3 md-margin-bottom-40">
<div class="contact-info-area">
<div class="contact-info">
<div class="headline">
<h2>Contact Us</h2>
</div>
<address>
166-5489 Byrne Road<br>
Burnaby BC<br>
Canada V5J 3J1
<table>
<tr>
<td class="addr-icon"><i class="fa fa-phone"></i></td>
<td class="addr-list-text">1-866-253-2748</td>
</tr>
<tr>
<td class="addr-icon"><i class="fa fa-fax"></i></td>
<td class="addr-list-text">1-866-611-0548 (Fax)</td>
</tr>
<tr>
<td class="addr-icon"><i class="fa fa-envelope"></i></td>
<td class="addr-list-text">info#cleardent.com</td>
</tr>
</table>
</address>
</div>
<div class="map-img"></div>
</div>
</div>
<!--/col-md-3-->
<!-- End Address -->
</div>
</div>
</div>
<!--/footer-->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© ClearDent | Privacy Policy</p>
</div>
<!-- Social Share Links -->
<div class="col-md-6">
<div class="social-icons pull-right">
<p>Share this page:
<button class="btn btn-sm rounded-4x btn-facebook" onClick="window.open('https://www.facebook.com/dialog/share?app_id=211125742252409&display=popup&href=' + encodeURI(window.location.href) + '&redirect_uri=https%3A%2F%2Fwww.cleardent.com%2F')"><i class="fa fa-facebook"></i></button>
<button class="btn btn-sm rounded-4x btn-twitter" onClick="window.open('https://twitter.com/intent/tweet?via=cleardentcanada&url=' + encodeURI(window.location.href))"><i class="fa fa-twitter"></i></button>
<button class="btn btn-sm rounded-4x btn-googleplus" onClick="window.open('https://plus.google.com/share?url=' + encodeURI(window.location.href))"><i class="fa fa-google-plus"></i></button>
</p>
</div>
</div>
</div>
<!-- End Social Share Links -->
</div>
</div>
</div>
<!--/copyright-->
<!--=== End Footer Version 1 ===-->
</div>
<!--/wrapper-->
<!-- Demo Request Success Message -->
<div id="demoSuccessMsg" class="modal fade" tabindex="-1" role="alertdialog" aria-labelledby="demoSuccessLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="alert">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close"><i class="fa fa-times fa-fw"></i></button>
<h4 id="demoSuccessLabel" class="modal-title">Demo Request Sent!</h4>
</div>
<div class="modal-body">
<p>Thank you. A ClearDent consultant will contact you via the contact information you have just provided within two (2) business days.</p>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn-u"><i class="fa fa-times fa-fw"></i> Got it!</button>
</div>
</div>
</div>
</div>
<!-- Google Optimize Popup Modal -->
<div id="modalConvert" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="labelConvert">
<div class="modal-dialog" role="document">
<div class="modal-content"> <!-- InstanceBeginEditable name="convertPopup-GoogleOptimize-plugin" -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
<h4 id="labelConvert" class="modal-title">Like what you see? See even more!</h4>
</div>
<div class="modal-body"> <img class="img-responsive img-spacer margin-bottom-30" src="assets/img/features/cleardent/kiosk.png" alt="iPad Kiosk helps with gathering patient in-take">
<p>Book a demo and one of our friendly consultants can walk you through all the benefits your practice can expect when you choose to implement Kiosk at your practice. Plus, we have many other amazing features that we would be happy to show you as well!</p>
<!-- Demo Menu-->
<form action="#" method="post" id="demo-formPopup" name="demo-formPopup" class="sky-form" onSubmit="return false;">
<fieldset>
<label class="input"><i class="icon-prepend fa fa-user"></i>
<input type="text" name="demo-name" id="demo-namePopup" required placeholder="Your name">
</label>
<label class="input"><i class="icon-prepend fa fa-envelope"></i>
<input type="email" name="demo-email" id="demo-emailPopup" required placeholder="Your email">
</label>
<label class="input"><i class="icon-prepend fa fa-phone"></i>
<input type="tel" name="demo-phone" id="demo-phonePopup" required placeholder="Your phone number">
</label>
<label class="input"><i class="icon-prepend fa fa-commenting"></i>
<input type="text" name="demo-notes" placeholder="Additional notes to us">
</label>
<input class="hidden" type="text" id="n7Q2326JYZ334s58FWq3TrPopup" name="n7Q2326JYZ334s58FWq3Tr" value="bg62U79DPNCTbBvpZHueZG" tabindex="-1" aria-hidden="true">
<input class="hidden" type="text" id="campaignPopup" name="campaign" value="" tabindex="-1" aria-hidden="true">
</fieldset>
<footer>
<div class="form-buttons">
<button id="btnReqDemoPopup" class="btn-u pull-left"><i class="fa fa-paper-plane fa-fw"></i> Book</button>
<button type="button" class="btn-u btn-brd pull-right" data-dismiss="modal"><i class="fa fa-times fa-fw"></i> Close</button>
</div>
<div class="form-sub-msg">
<p>Sending a demo request, please wait…</p>
</div>
</footer>
</form>
</div>
<!-- InstanceEndEditable --> </div>
</div>
</div>
<!-- Google Optimize Popup Modal End -->
<!-- JS Global Compulsory
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->
<!-- JS Implementing Plugins
<script src="../assets/1.9.5/plugins/back-to-top.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
-->
<script src="assets/1.9.7/assets/js/all-page-pack/js/all-page-pack.min.js"></script>
<!-- InstanceBeginEditable name="page-linked-script" --> <!-- InstanceEndEditable -->
<!-- JS Main
<script src="../assets/1.9.5/js/plugins/fancy-box.js"></script>
<script src="../assets/1.9.5/js/app.js"></script>
-->
<!-- JS Customization
<script src="../assets/1.9.5/js/custom2.js"></script>
-->
<script src="assets/1.9.7/assets/js/all-page-pack/js/custom-pack.min.js"></script>
<!-- JS Page Level -->
<script>
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}
$(document).ready(function () {
App.init();
FancyBox.initFancybox();
wow = new WOW().init();
$("#demo-phone").mask('(999) 999-9999', {placeholder:'X'});
$("#demo-form").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaign").val(query_str["utm_campaign"]);
} else {
$("#campaign").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-form").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
/* fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
}); */
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$("#btnClear").click();
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
//Pop-up conversion plugin for Google Optimize
$("#demo-phonePopup").mask('(999) 999-9999', {placeholder:'X'});
$("#demo-formPopup").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaignPopup").val(query_str["utm_campaign"]);
} else {
$("#campaignPopup").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-formPopup").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
});
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$('#modalConvert').modal("hide")
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
});
</script>
<!-- InstanceBeginEditable name="page-script" -->
<!--Facebook Advanced Matching Start-->
<!-- Homework for Jason Begin (Wrong Use Here; Use Cookie to send successful submit to thank you page) -->
<!--<script>
/*
fbq('init', '697649880319954', {
em: '{{_email_}}',
ph: '{{_phone_}}',
});
*/
</script> -->
<!-- Homework for Jason End -->
<!--Facebook Advanced Matching End-->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
//Required Salesforce functions
function timestamp() {
var response = document.getElementById("g-recaptcha-response");
if (response == null || response.value.trim() == "") {
var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);
elems["ts"] = JSON.stringify(new Date().getTime());
document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems);
}
}
window.setInterval(timestamp, 500);
//Masking
$("#sfphone").mask('(999) 999-9999', {placeholder:'X'});
//Form helper functions
function getProvince(pStrPhone) {
var areacode = pStrPhone.substring(0, 3);
switch (areacode) {
case "403":
case "780":
case "587":
case "825":
return "AB";
case "604":
case "778":
case "250":
case "236":
return "BC";
window.location.replace('page1.html');
break;
case "204":
case "431":
return "MB";
case "506":
return "NB";
case "709":
return "NL";
case "867":
return "YT";
case "902":
case "782":
return "NS";
case "416":
case "647":
case "437":
case "519":
case "226":
case "548":
case "613":
case "343":
case "705":
case "249":
case "807":
case "905":
case "289":
case "365":
return "ON";
case "418":
case "581":
case "450":
case "579":
case "514":
case "438":
case "819":
case "873":
return "QC";
default:
return "";
}
}
function cleanPhNum(pStrPhone) {
return pStrPhone.replace("-", "").replace("(", "").replace(")","").replace(" ", "");
}
//Form validation and reCAPTCHA
//Jason Home Work - jQuery Validate and figure out how it validates
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
function submitDemoToLead(token) {
$("#sfDemoForm").submit();
}
function redirect() {
var textValue = areacode;
if(textValue == 'BC')
{
location.href = "www.xxx.com/bc";
}
if(textValue == 'AB')
{
location.href = "www.xxx.com/ab";
}
if(textValue == 'ON')
{
location.href = "www.xxx.com/on";
}
else
{
alert("Invalid Input");
}
}
/*
$("#sfDemoForm").validate({
submitHandler: function(form) {
var query_str = parse_query_string(window.location.search.substring(1));
if (typeof(query_str) || typeof(query_str["utm_campaign"])) {
$("#campaign").val(query_str["utm_campaign"]);
} else {
$("#campaign").val("Not Specified");
}
ga("send", "pageview", "/script/demo.php");
$(".form-buttons").fadeOut("fast");
$(".form-sub-msg").fadeIn("fast");
$.fancybox.showLoading();
$.post("/script/demo.php", $("#demo-form").serialize(), function(data) {
if (data.indexOf("Failed") == -1) {
try {
ga("send", "pageview", "/script/demoed.php");
fbq("track", "Purchase", {
value: 1.00,
currency: "CAD",
content_type: "product",
content_ids: ["1"]
});
twq("track", "Purchase", {
value: "1.00",
currency: "CAD",
content_type: "product",
content_ids: ["1"],
num_items: 1
});
} catch (e) {}
$.fancybox.hideLoading();
$(".form-sub-msg").fadeOut("fast");
$(".form-buttons").fadeIn("fast");
$("#btnClear").click();
$("#demoSuccessMsg").modal("show");
} else {
$(".form-sub-msg").html("<strong style='color: red;'>Error sending request, please call <a href='tel:+18662532748,1'>1-866-253-2748</a>. Sorry for the inconvenience.</strong>");
}
});
}
});
*/
Can JavaScript perform type coercion on just a plain old BC, AB, and ON? even if you're using == instead of ===, you still need BC, AB and ON to be enclosed in quotes of some sort to indicate a literal string rather than another variable... especially since the textValue variable you're comparing against (which is just areacode) is a string.

How to upload text along with image using ajax

I was trying to create a signup form where a user has to give his data along with the image. I have attached the snippet of the code I was trying but couldn't achieve please help me. I have already been through other similar question but none of them helped me.
function submitForm1()
{
var data = $("#signup").serialize();
$.ajax({
type : 'POST',
url : 'signup_process.php',
data : data,
async: false,
beforeSend: function()
{
$("#error1").fadeOut();
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Signing Up..Please wait.');
},
success : function(response)
{
if(response=="ok"){
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span> An Email has been sent to your entered email address. Please follow the instruction to activate your account.</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Sign Up');
});
}
else{
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
}
cache: false,
contentType: false, //must, tell jQuery not to process the data
processData: false,
});
return false;
}
/* login submit */
});
<div class="container">
<div class="signup-form-container">
<form id="signup" name="form1">
<div class="head"></div>
<div class="form-header" style="text-align:center;">
<div class="image" id="preview">
<div id="timelineShade" style="background:url(assets/pic.png) center;"></div>
</div>
<h3 class="form-title" style="margin-top:-60px;"><span style="margin-right:50px;"></span>Recruiter Sign-up Portal</h3>
</div>
<div class="form-body">
<!-- json response will be here -->
<div id="error1"></div>
<!-- json response will be here -->
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" name="name" class="form-control" placeholder="Full Name" id="name" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input type="text" name="email" class="form-control" placeholder="Email" id="email" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="row">
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="password" id="password" class="form-control"placeholder="Password" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="cpassword" class="form-control" placeholder="Confirm Password"/> </div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-group col-lg-6" style="max-width:145px; margin-top:10px;">
<div class="input-group">
<label>Company Logo</label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="imagein" name="image" type="file" class="form-control" limit=1/>
</div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-footer">
<button type="submit" name="btn-signup" id="btn-signup" class="btn bt-login" style="margin-left:8%; width:92%" >Sign-up <span class="glyphicon glyphicon-log-in"></span> </button>
</div>
<div class="form-footer"> <div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:left;">
<i class="fa fa-lock"></i>
Forgot password? </div>
<div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:right;">
<i class="fa fa-user"></i>
Log-In </div>
</div>
</form>
</div>
</div>
<?php
session_start();
$upload_dir = '/upload/'; // upload directory
error_reporting(0);
require_once 'class.user.php';
$reg_user = new USER();
if($reg_user->is_logged_in()!="")
{$reg_user->redirect('home.php');}if(isset($_POST['btn-signup'])){
$phone = trim($_POST['phone']);$email = trim($_POST['email']);
$upass = trim($_POST['password']);$code = md5(uniqid(rand()));
$imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION));
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif');
$userpic = rand(1000,1000000).".".$imgExt;
if(in_array($imgExt, $valid_extensions)){if($imgSize < 5000000){
move_uploaded_file($tmp_dir,$upload_dir.$userpic);}else{
$errMSG = "Sorry, your file is too large.";}}else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";}
if($reg_user->register($phone,$email,$upass,$code,$userpic)){
$id = $reg_user->lasdID();$key = base64_encode($id);$id = $key;
$message = "Hello $email,<br /><br />
Welcome to Coding Cage!To complete your registration please , just
clickfollowing link<br/><br /><br /><a href='http://localhost/x/verify.php?
id=$id&code=$code'>Click HERE to Activate :)</a><br /><br />Thanks,";
$subject = "Confirm Registration";require_once('mailer/class.phpmailer.php');
$mail = new PHPMailer();$mail->IsSMTP(); $mail->SMTPDebug = 0;
$mail->SMTPAuth = true; $mail->SMTPSecure = "ssl";
$mail->Host= "smtp.gmail.com"; $mail->Port= 465;
$mail->AddAddress($email);
$mail->Username="sharma.himanshu0405#gmail.com";
$mail->Password="mypassword";
$mail->SetFrom('sharma.himanshu0405#gmail.com','Himanshu');
$mail->Subject = $subject;
$mail->Subject = $subject; $mail->MsgHTML($message);
if($mail->send()) { echo "ok" ; } else {
echo "Sorry, Registration is not possible this time. Please try again after some time or Contact Admin";
$stmt = $reg_user->runQuery("DELETE FROM tbl_users WHERE user_email=:email_id");
$stmt->execute(array(":email_id"=>$email));
}
}
}
?>
Have to encode the image in the form to base64 (not sure) before providing serialized form data in ajax call

Cannot /Post - Login Authentication

I am creating an app and I need a SignIn / SignUp functionality for the same. Here is my SignIn HTML:
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form action="verifySignin" method="post" id="verifySignin" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username" required="" autofocus="" >
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button class="btn btn-md btn-primary btn-block" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account?
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
My app.js has the following to route:
app.post('/verifySignin', home.verifySignin);
app.get('/verifySignin', home.verifySignin);
Under routes folder> I have created a home.js file which contains the following:
function verifySignin(req,res)
{
req.session.name=req.param("username");
var password = req.param("password");
console.log("session name:"+req.session.name);
var verifyUserQuery="select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'";
mysql.fetchData(function(err,results){
if(err){
throw err;
}
else
{
if(results.username==req.param("username") && results.password == password){
res.render('kanban', { name: req.param("username") });}
else {
res.render('ErrorPage');
}
}
},verifyUserQuery);
}
exports.verifySignin=verifySignin;
When I click on the Login button, I get the error : Cannot POST /verifySignin.
Any help would really be appreciated. Thanks.
Try to use it like,
var users = require('./home/users');
in addition, this is a very bad practice due to security concerns
"select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'"
pass values as parameters or bind them.

How to keep a user logged if checkox is checked

I'm making a login system using modal dialog from bootstrap 3 and im adding a function to keep the user logged in if they check the checkbox in the modal dialog.
I want to keep a user logged in, even he/she refreshes or closes the browser.
index.php
<div class="container" id="myLogin">
<div class="row">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>
</div>
<div class="modal-body">
<div id="show" class="lalert lalert-warning"></div>
<div class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="text" name="lemail" id="lemail" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." />
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" name="lpassword" id="lpassword" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
<label> Keep me logged in</label> <b>|</b>
Forgot your password?
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="login" name="login" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="Signup" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-list-alt"></span> Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
script:
jQuery(function () {
$("#lemail").val($.cookie("unm"));
$("#lpassword").val($.cookie("pwd"));
});
$("#email").val($.cookie("unm") || "");
$("#lpassword").val($.cookie("pwd") || "");
php:
<?php
session_start();
$unm = $_POST['lemail'];
$pwd = $_POST['lpassword'];
?>
In order to get session_start(); to work,
you need to add variables to the $_SESSION array. Change you PHP code to this:
<?php
//Start the session
session_start();
//ALWAYS check if a $_POST variable is set before using it.
if(isset($_POST['lemail'])){
$unm = $_POST['lemail'];
} else {
//Error Code Goes Here
}
if(isset($_POST['lpassword'])){
$pwd = $_POST['lpassword'];
} else {
//Error Code Goes Here
}
//Set SESSION vars
$_SESSION["unm"] = $unm;
$_SESSION["pwd"] = $pwd;
When you want to check if they are logged in, use this code
session_start();
if(isset($_SESSION["unm"]) && isset($_SESSION["pwd"])){
$loggedIn = true;
//At this point you can also check your database if they are actually a user for extra security
} else {
$loggedIn = false;
}
Please, make sure your cookies is going save or not.
And another thing is make sure of expire time.
set coockies in PHP, like :
setcookie(
'pageVisits', // Name of the cookie, required
$visited, // The value of the cookie
time()+7*24*60*60, // Expiration time, set for a week in the future
'/', // Folder path the cookie will be available for
'demo.tutorialzine.com' // Domain to which the cookie will be bound
);
And Read coockies in JS:
$(document).ready(function(){
// Getting the kittens cookie:
var str = $.cookie('pageVisits');
// str now contains the value of $visited
});

Categories