Using SendGrid with PHP and jQuery Mobile - javascript

Ok so I'm stuck here. I've been trying to put up a web form so that I can be notified of users who sign up for my mobile app via e-mail. I want to override ajax's default behavior because EVENTUALLY(as in not at the moment) I want the submission not to be handled for the first few pages.
My goal is to have the user submit the jQuery Mobile form, have ajax send the form data to my php script which will e-mail the user data to me using the SendGrid api. But right now it's not working for me.
The page is hosted on a google compute engine instance running Linux, PHP is correctly installed, the form appears and even refreshes when the SEND button is clicked but no e-mail ='(
BTW SendGrid works fine from my server when launched from the command line using Postfix
The link to the tutorial is here: Sending E-mails with SendGrid using Compute Instance
Help please?
mailer.php followed by postScript.js followed by web-form-complete.php
<?php
$action = $_POST['subscribePage'];
$formData = json_decode($_POST['formData']);
$fname = $formData->{'fname'};
$lname = $formData->{'lname'};
$busname = $formData->{'busname'};
$bustype = $formData->{'bustype'};
$selectmenu = $formData->{'selectmenu'};
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
$(document).on('pageinit', '#subscribePage', function(){
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
$.ajax({url: 'mailer.php',
data: {action : 'subscribePage', formData : $('#subscribeContent').serialize()},
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
} else {
alert('Submission Unsuccessful!');
}
},
error: function (request,error) {
alert('Network error has occurred');
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="First Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" type="text" placeholder="Business/Organization Name*" name="Business/Organization Name" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>

There are issues in your all scripts. Try this:
web-form-complete.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="fname" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="lname" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" name="busname" placeholder="Business/Organization Name*" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>
postScript.js
$(document).ready(function(){
$(document).on('click', '#submit', function(e) { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
console.log("in...");
var data = $('#subscribeContent').serialize();
$.ajax({url: 'mailer.php',
data: data,
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
//write your proper condtion
console.log(result);
},
error: function (request,error) {
alert('Network error has occurred');
console.log(error);
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
mailer.php
<?php
//$action = $_POST['action'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$busname = $_POST['busname'];
$bustype = $_POST['bustype'];
$selectmenu = $_POST['selectmenu'];
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
Also make sure you have included SendGrid library in your file and also you have set valid API-KEY.

Related

ERR_TOO_MANY_REDIRECTS for localhost

I have created two separate files for login screen. one is loginpage.php where html code is there and another one is login.php which contains backend code. Both the codes were running fine and were giving proper output. But now it is not working, whenever I try to load the page it is showing this error-
This page isn’t working localhost redirected you too many times.
Try clearing your cookies. ERR_TOO_MANY_REDIRECTS.
I have almost tried doing everything like clearing cookies and cached files,
changing proxy server settings, running cmd commands.
re-installed xampp.
But still it is showing the same thing, and I am unable to find the problem in my code.
at first i was displaying all the errors using alert message. but that also i have changed and storing it in an array and display in the form. please help
LOGINPAGE.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task Manager | Log in</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<p><b>Task Manager</b></p>
</div>
<div id="box">
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="login.php" method="post" id="login-form">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="EmailID" id="email" name="email" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user-alt"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password" id="password" name="password" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control select2bs4" name="role" id="role">
<option selected="selected">-select role-</option>
<option>ADMIN</option>
<option>EMPLOYEE</option>
</select>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-success btn-block" id="btn_submit" name="btn_submit" >Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<p class="mb-1">
<br/>
I forgot my password
</p>
</div>
<div id="error">
<?php
include 'login.php';
if(empty($errormsg))
{
foreach($errormsg as $value)
{
echo "$value";
}
}
?>
</div>
<!-- /.login-card-body -->
</div>
</div>
</div>`
<!-- /.login-box -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
</body>
</html>
This is the backend code for login screen
LOGIN.PHP
<?php
include('db_connection.php');
session_start();
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != '')) {
header("location:loginpage.php");
}
if(isset($_SESSION["employee_login"])){
header("location:employee_dash.php");
}
if(isset($_POST['btn_submit']))
{
$email=$_POST['email'];
$password=md5($_POST['password']);
$role=strtolower($_POST['role']);
if(empty($email)){
$errormsg[]="Please enter email";
} else if(empty($password)){
$errormsg[]="Please enter password";
} else if(empty($role)){
$errormsg[]="Please select a role";
} else if($email && $password && $role) {
try {
$query="SELECT email,password,role FROM `employee` WHERE email=? && password=? && role=?";
$stmt = mysqli_prepare($conn,$query);
mysqli_stmt_bind_param($stmt,'sss',$email,$password,$role);
mysqli_stmt_bind_result($stmt,$email,$password,$role);
mysqli_stmt_execute($stmt);
$result=mysqli_stmt_get_result($stmt);
while($row = mysqli_fetch_assoc($result)) {
$dbemail=$row['email'];
$dbpassword=$row['password'];
$dbrole=$row['role'];
}
if(mysqli_num_rows($result)>0) {
if($email==$dbemail && $password==$dbpassword && $role==$dbrole) {
switch($dbrole) {
case "admin":
$_SESSION["admin_login"]=$email;
header("refresh:1;dashboard.php");
break;
case "employee":
$_SESSION["employee_login"]=$email;
header("refresh:1;employee_dash.php");
break;
default:
$errormsg[]="Invalid Role";
}
} else {
$errormsg[]="Wrong Email or Password or Role";
}
} else {
$errormsg[]="Records Not Found";
}
} catch(Exception $e) {
echo $e->errorMessage();
mysqli_stmt_close($stmt);
}
} else {
$errormsg[]="Enter the crendentials";
}
}
?>
You are redirecting to loginpage.php from the same page without destroying your session first, then it will keep redirecting from loginpage to loginpage as infinite loop.
try to check if session is populated and destroy it,
instead of:
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != ''))
{
header("location:loginpage.php");
}
You destroy any session already exit like:
if (!(isset($_SESSION['admin_login']) && $_SESSION['admin_login'] != ''))
{
session_destroy();
}

Integrating PayMill: Error "field_invalid_amount" by creating the token and its input field

I'm implementing the Credit Card Payment form of PayMill according to the Payment Form docu. So I copied the JS from the Bridge docu page and the form from the Payment Form docu page.
But no token is created. When I try to debug the JS and add console.info(error.apierror); into the paymillResponseHandler(...) function, I get the error code: field_invalid_amount.
According to the support page
There are three possible reasons for this error message:
no amount value was provided
numbers were rounded
wrong delimiter symbol
But the amuont is provided and I've already tried different delimiter symbols. What "numbers were rounded" means, is not clear.
What can be the problem and how to fix this issue?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>
</title>
</head>
<body>
<!-- PayMill HEAD start -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css" />
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '51668632777bf03b57f861c5a7278a38';
</script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<!-- PayMill HEAD stop -->
<!-- PayMill FORM start -->
<form id="payment-form" class="span4" action="payment.php" method="POST">
<p class="payment-errors alert-error span3" style="display:none;">
</p>
<div id="payment-form-cc">
<div class="controls controls-row">
<div class="span2">
<label class="card-number-label">Kreditkarte
</label>
<input class="card-number span2" type="text" size="20" value="4111111111111111"/>
</div>
<div class="span1">
<label class="card-cvc-label">CVC
</label>
<input class="card-cvc span1" type="text" size="4" value="111"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3 card-icon">
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-holdername-label">Karteninhaber
</label>
<input class="card-holdername span3" type="text" size="20" value="lala"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-expiry-label">Gültigkeitsdatum (MM/YYYY)
</label>
<input class="card-expiry-month span1" type="text" size="2" value="12"/>
<span style="float:left;"> /
</span>
<input class="card-expiry-year span1" type="text" size="4" value="2015"/>
</div>
</div>
</div>
<div class="controls controls-row">
<div class="span2">
<label class="amount-label">Betrag
</label>
<input class="amount span2" type="text" size="5" value="9,99" name="amount"/>
</div>
<div class="span1">
<label class="currency-label">Währung
</label>
<input class="currency span1" type="text" size="3" value="EUR" name="currency"/>
</div>
</div>
<div class="controls controls-row">
<div class="span4">
<button class="submit-button btn btn-primary" type="submit" >Pay!</button>
</div>
</div>
</form>
<!-- PayMill FORM stop -->
<!-- PayMill FOOT start -->
<script type="text/javascript">
function paymillResponseHandler(error, result) {
if (error) {
console.info(error.apierror);
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
console.info('OK');
var form = $("#payment-form");
// Output token
var token = result.token;
// Insert token into form in order to submit to server
form.append(
"<input type='hidden' name='paymillToken' value='"+token+"'/>"
);
// Submit form
form.get(0).submit();
}
}
</script>
<script type="text/javascript">
paymill.createToken({
number: $('.card-number').val(), // required
exp_month: $('.card-expiry-month').val(), // required
exp_year: $('.card-expiry-year').val(), // required
cvc: $('.card-cvc').val(), // required
amount_int: $('.card-amount-int').val(), // required, e.g. "4900" for 49.00 EUR
currency: $('.currency').val(), // required
cardholder: $('.card-holdername').val() // optional
},
paymillResponseHandler);
</script>
<!-- PayMill FOOT stop -->
</body>
</html>
In the form the input fiel amount had classes amount and span2. And the token creating function was checking the value of $('.card-amount-int'). Now I've simply added the card-amount-int class to the amount input field and... get another issues... :) But this problem is solved.

Loading icon keeps loading when submit is pressed

We having a slight issues with our mobile forms
I have a mobile form that our users use to send us contact request. The problem we have is that when they press submit the loading icon keeps going even though the form has been submitted and the the data received. We still get the data but it does not look very professional as the user does not know if the form has gone and could resubmit the web form leading to double submissions
Thank you very much for your help in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile- 1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Hire </h1>
</div><!-- /header -->
<div data-role="content">
<form action="thankyou2.php" method="POST">
<!-- Wrap Inputs in fieldcontain which will sort out borders and padding, can cause layout to break -->
<div data-role="fieldcontain">
<label for="firstName"> Your Name: </label>
<input type="text" name="name" value="" id="firstName" /> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<label for="lastName"> Your Email: </label>
<input type="text" name="email" value="" id="lastName" /> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<label for="lastName"> Event Description </label>
<textarea rows=7 name=message></textarea> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send Request" data-theme="b" />
</div>
</form>
</div>
<div data-role="footer">
</div><!-- /footer -->
</div>
<script>
$('form').submit( function(e) {
var vals = $(this).serialize();
$.post( 'thankyou2.php', vals, function (data) {
});
e.preventDefault();
});
</script>
</body>
</html>
what you are doing is not specifing what to do on succes or error.
try the following
$("#btnId").click(function(e) {
e.preventDefault();
//show loading animation
$.ajax({
...
success:function(data){
//remove loading animation
},
error:function(){//remove loading animation
}
});
});
I hope this helps.
Edit: I'm sorry i automaticly made it ajax.. for a non-ajax approach try the next:
$('#form').submit(function() {
$('#loading_image').show();
$.post('/somepage.htm', function() {
$('#loading_image').hide();
});
});

Store and send form data to localStorage and webserver with jQuery mobile and PhoneGap

I'm developing an app with jQuery mobile and PhoneGap (Android) on Eclipse. I'm testing the app (index.html) with my chrome browser.
I want to build a login-system, so I've two pages: login and registration, both with html forms. Now I want to store the form data from registration in the localStorage (E-Mail and logged in flag) and send the data (E-Mail and Password) also to my node.js webserver (not implemented yet, because don't know how).
I've tried to do this, but it doesn't work. I've opend the registration form in my Browser (Chrome) and called the JavaScript Console (Resources -> Local Storage), but there is no data.
Then I want to show the data in the login page, but that doesn't work too.
That's my code:
http://jsbin.com/IBEgoyIf/2/edit?html,js,output
or here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery.validate.js"></script>
<script src="js/matchPassword.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
<form action="http://foo.com/login.js" method="POST">
<div data-role="fieldcontain">
<label for="url">E-Mail</label>
<input name="uid" id="email" placeholder="" value="" type="email" class="required">
</div>
<div data-role="fieldcontain">
<label for="url">Password</label>
<input name="upwd" id="pwd" placeholder="" value="" type="password" class="required">
</div>
<input type="submit" data-theme="b" value="Login">
</form>
<p id="myResults">myResults: </p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Register</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#login').on("pagecreate", function() {
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var userEmail = window.localStorage.getItem("localEmail");
var userFlag = window.localStorage.getItem("localLoggedIn");
document.getElementById("myResults").innerHTML = userEmail;
//}
//}
});
</script>
</div>
<div data-role="page" id="registration">
<div data-role="content">
<form action="#" method="post" id="registerForm">
<fieldset data-role="fieldcontain">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" class="required email" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password2">Repeat Password:</label>
<input type="password" name="password2" id="password2" class="required passmatch" minlength="5">
</fieldset>
<input type="submit" data-theme="b" value="Register" onclick="store()">
</form>
</div>
<script type="text/javascript">
function store(){
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var inputEmail = document.getElementById("email");
localStorage.setItem("localEmail", inputEmail.value);
localStorage.setItem("localLoggedIn", true);
window.location="#login";
//}
}
</script>
</div>
</body>
</html>

problem with my drop down login box?

i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.

Categories