So I'm trying to create checks so that if someone hasn't entered a zip code, phone number, or email address properly then the javascript will display an alert and the form won't be submitted. If any of the fields aren't filled (null || =="") then the javascript will also display an alert and wont submit the form.
It was working just fine but then all of the sudden stopped working... I've been looking at it for awhile now and cannot figure out why.
Here's my code (.php):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adding Companies</title>
<link rel="stylesheet" type="text/css" href="../ResponsiveTopNavDropdown.css" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="toggleNav.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header"></div>
<div id="toggleNav">Show/Hide Navigation</div>
<nav id="nav">
<?php include('../nav.html'); ?>
</nav>
<h1 id="mainheader">WELCOME TO MISSISSIPPI VALLEY CHAPTER 123</h1>
<section class="content-wide">
<?php
session_start();
if ($_SESSION['check'] != "true") {
header('Location: http://www.mississippivalleyashrae.org/Admin/admin_login.php');
}
$_SESSION['my_company'] = null;
?>
<h3><strong>You're currently in the process of: Adding a Company<strong></h3>
<table width = "760" border = "0" align = "center" cellpadding="0" cellspacing="1" bgcolor = "#cccccc">
<tr>
<form onSubmit="return validateCompany()" action="adding_manufacturer.php" method="post">
<td>
<table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#EEEEEE">
<tr>
<td colspan="3"><strong> Enter the Information for this New Company </strong></td>
</tr>
<tr>
<td colspan="3" align = "left">
Company Name<br />
<input type="text" name="company_name" id="company_name" placeholder="My Company .Inc"
size="100" maxlength="125"></td>
</tr>
<tr>
<td colspan="3" align = "left">
Address<br />
<input type="text" name="address" id="address" placeholder="1234 My Street Ave."
size="100" maxlength="100"></td>
</tr>
<tr>
<td align = "left" width="250">
City<br />
<input type="text" name="city" id="city" placeholder="Rock Island" size="30" maxlength="30"></td>
<td align = "left" width="250">
State<br />
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td align = "left" width="250">
Zip-Code<br />
<input type="text" name="zip" id="zip" placeholder="61201" size="6" maxlength="6"></td>
</tr>
<tr>
<td align = "left" width="250">
Phone<br />
<input type="text" name="phone" id="phone" placeholder="515-555-0000" size="12" maxlength="12"></td>
<td colspan="2" align = "left" width="250">
Email Address<br />
<input type="text" name="email" id="email" placeholder="myemail24#gmail.com"
size="50" maxlength="50"></td>
</tr>
<tr>
<td colspan="3">
<br />
<input type ="submit" name="submit" id="mySubmit" value="Add This Company"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<p>
**Make sure all information is entered correctly!<br />
If you enter any information incorrectly you can go back and edit it from the
Admin Main page!
</p>
<script src="formValidators.js" type="text/javascript"></script>
</section>
And here's my javascript (formValidators.js):
function validateCompany() {
var checkCompanyName = document.getElementById("company_name").value;
var checkAddress = document.getElementById("address").value;
var checkCity = document.getElementById("city").value;
var checkState = document.getElementById("state").value;
var checkZip = document.getElementById("zip").value;
var checkPhone = document.getElementById("phone").value;
var checkEmail = document.getElementById("email").value;
// checks for any null fields
if ((checkCompanyName==null || checkCompanyName=="") || (checkAddress==null || checkAddress=="") ||
(checkCity==null || checkCity=="") || (checkState==null || checkState=="") ||
(checkZip==null || checkZip=="")|| (checkPhone==null || checkPhone=="") ||
(checkEmail==null || checkEmail=="")){
alert("Please Fill All Fields");
return false;
}
var zipPattern = /^\\d{5}(-\\d{4})?$/;
if (zipPattern.test(checkZip) == false){
alert("Invalid Zip-Code, Please Re-Enter the zip-code in the correct format");
return false;
}
var phonePattern = /^()?\d{3}()?(-|\s)?\d{3}(-|\s)\d{4}$/;
if (phonePattern.test(checkPhone) == false){
alert("Invalid Phone Number, Please Re-Enter the phone number in the correct format");
return false;
}
var emailPattern = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (emailPattern.test(checkEmail) == false){
alert("Invalid Email, Please Re-Enter the email in the correct format");
return false;
}
}
It looks like the problem is in your state drop down:
<select name="state">
There is no ID to get, so your JS is failing, silently I might add.
<select name="state" id="state">
I modified the selector to include an ID and it's now firing properly.
Related
I am having trouble with a lab of mine and just need some guidance or tips on where to go.
I need a function that alerts the user when any field is invalid and red outline any section that is invalid and if no sections are valid then to instead just display the users input such as name, gender state, fav movie type and so on.
I am stumped because I have created a test function which does not even work correctly when the user selects submit. when the name field is left empty it does not even alert the user that left the field blank.
<html>
<head>
<title>Form Practice</title>
</head>
<body>
<script type="text/javascript">
///// validate names
const form = document.getElementById("form");
document.getElementById("form").addEventListener("submit", validate);
var myForms=document.getElementById("myForms")
function validate(e) {
var first= document.forms["myForm"]["firstName"].value;
if(first==""){
alert("enter the first name");
event.preventDefault()
firstName.style.borderColor="red";
event.preventDefault()
return false;
}
}
</script>
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" id="form" method="post" action="mailto:lasdfasdf#asdfas.com" >
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
use or operator to check if first or last name is empty, also you need event.preventDefault() to cancel default action
function ValidationEvent(e) {
var fname = document.myForm.firstName;
var lname = document.myForm.lastName;
if (!fname.value || !lname.value) { // use 'or' operator here
fname.classList.add('red-border');
lname.classList.add('red-border');
e.preventDefault(); // Cancel action
alert("fill out please.");
}
else {
alert("thank you");
}
}
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" method="post" action="mailto:lasdfasdf#asdfas.com"
onsubmit="ValidationEvent(event)"> <!-- ValidationEvent(event) is required -->
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<option value="AL">Alabama</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
What you are struggling with is that you are using the htmlinput whole dom element instead of the value of it, when in doubt always print the value and check what it actually contains console.log(fname);. So in your case you need to access the value of it, which you can get from the console.log actually. document.myForm.firstName.value
I added a small beginning for the red thingy you asked on the input but left the rest to you so i dont spoil the fun of it.
Here is a working jsfiddle: https://jsfiddle.net/odsvpwf0/
Below I have attached the code that I have. I need help getting my button on click to clear the first two forms then when it is clicked again clear the last field that is left. Please any help on this. I have been trying different things but currently don't know how I would go about doing this. I am new to writing any type of code so this may be a simple task but I don't really know how to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Web Lock VPN Service</title>
<style type="text/css">
body {
background-image: url("https://lh3.googleusercontent.com/7eRbJLwlltrqMGUleKadG70Dn4oapmr7xQordaJhrblNGjSxGaf4x1-6IzDaUiLv_BaFhkgTfuucGSjvGH6w41GyBLbMZqHwZTHJ7CQqWgqYpuB4oa0_1BTP32CFBf07PHb_cgZrpw=w2400");
}
</style>
<script>
</script>
<!--EJD-5/11 added link to CSS style sheet-->
<link href="styles.css" rel="stylesheet"></link>
<!--EJD-5/11 used "pre" to move VPN picture to roughly the center of the page-->
<pre> <img src="https://lh3.googleusercontent.com/8MOV9pJZ0HuFhWUEb5Qj2li8L_pspnylQ6rnTYH5wmLGgWjxAfEZ8hFIXv4MPUqFnkVtzSY8Jf0zuKKiHWyHumtnG6Zw_7y9dNbfns1lKrYQn9BCf05JU3pmHmIhEweJOlkOd21tXw=w2400" style="width:300px;height:200px;"> </a>
</pre>
<pre><h1 id="bluetext"> WebLock VPN Order Form </h1>
</pre>
<!--EJD 5/11 Added horizontal line for style-->
<hr>
</head>
<body>
<pre><h2 id="generaltext"> Thank you for showing interest in Web Lock's VPN service! In order to purchase our product, please fill out the form below.</h2>
</pre>
<!--EJD 5/11- Created a radio button form as a client survey-->
<form name="survey" id="VPN">
<h3>What is the most important aspect of a VPN for you?</h3>
<p><input name="survey" type="radio" value="Small">Security</p>
<p><input name="survey" type="radio" value="Small">Speed</p>
<p><input name="survey" type="radio" value="Small">Price</p>
<p><input name="survey" type="radio" value="Small">Platform Availability</p>
</form>
<!--EJD 5/11 Created a form for filling out information to be validated later-->
<form required; name= "Module Selection" id="FT">
<h3 id="generaltext">Select your features below:</h3>
<p>
<input name="modules" type="checkbox" value="HighspeedVPN">High Speed VPN </p>
<p>
<input name="modules" type="checkbox" value="Antivirus">Antivirus Addon </p>
<p>
<input name="modules" type="checkbox" value="WebShield">Browse-safe web shield </p>
<p>
<input name="modules" type="checkbox" value="TransactionGuard">Transaction Guard </p>
</form>
<h3 id="generaltext">Fill out your information below:</h3>
<form required; name= "custinfo">
<p>
Name:   <input name="Name"size=:50 type="text"><br>
</p>
<p>
Email Address:   <input name="Emailaddress"size=:50 type="text"><br>
</p>
<p>
Street Address:   <input name="S_Address"size=:50 type="text"><br></p>
<p>
Address 2:   <input name="Address_2"size=:50 type="text"><br></p>
<p>
Zip Code:   <input name="Zip"size=:50 type="text"><br>
<p>
City:   <input name="City"size=:50 type="text"><br>
</form>
<!--EJD 5/11 Created a drop-down list for states to choose-->
<form name="states">
State: <select required; name="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</form>
<!--EJD 5/11 created checkboxes for clients to order specific modules-->
<!--EJD 5/11 added a text area for clients to comment-->
<h3 id="generaltext">Questions and comments:</h3>
<p>
<textarea name= "Comments" rows="5" cols="80">
</textarea>
<!--EJD 5/11 Added a submit button and a clear button to tie to JS functions-->
<p>
<input type="button" value="Submit" onclick="dosubmit()">
<input type="button" value="Clear" onclick="doclear(); doclear2();"/>
<script>
function doclear() {
document.getElementById("VPN").reset();
}
function doclear2(){
document.getElementById("FT").reset();
}
I think you should declare a variable like isFirstClear with default = false, and add check condition in onClick button function:
if (!isFirstClear) {
doclear();
isFirstClear = true;
}
else {
doclear2();
}
I have developed a Page 1 and Page 2 using Html and JavaScript. I'm trying to get the data from Page 1 and display it on Page 2 using Cookies and JavaScript. You can see the code below:
Page 1:
<!DOCTYPE html>
<html>
<head>
<script>
function Submit(){
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
//var emailRegex= /^[A-Za-z0-9._]*\#[A-Za-z]*\.[A-Za-z]{2,5}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_password = /^[A-Za-z0-9!##$%^&*()_]{6,20}$/;
var fname=document.form.firstname.value,
lname=document.form.lastname.value,
femail=document.form.email.value,
fuser=document.form.username.value,
fpassword=document.form.password.value,
fconpassword=document.form.confirmpassword.value,
fmonth=document.form.birthday_month.value,
fday=document.form.birthday_day.value,
fyear=document.form.birthday_year.value;
if(fname == "")
{
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML="Enter the First Name ";
return false;
}else if(!ck_name.test(fname)){
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML=" Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmfirstnameError").innerHTML=" ";
}
if(lname == "")
{
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter the Last Name ";
return false;
}else if(!ck_name.test(lname)){
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmlastnameError").innerHTML=" ";
}
if(femail == "")
{
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="Enter the Email Address";
return false;
}else if(!ck_email.test(femail)){
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="You have entered an Invalid Email Address!";
return false;
}else {
document.getElementById("elmemailError").innerHTML=" ";
}
if(fuser == "")
{
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username";
return false;
}else if(!ck_username.test(fuser)){
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username with 3-20 characters & no special charater";
return false;
}else {
document.getElementById("elmeusernameError").innerHTML=" ";
}
if(fpassword == "")
{
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password";
return false;
}else if(!ck_password.test(fpassword)){
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password with 6-20 characters";
return false;
}else {
document.getElementById("elmepasswordError").innerHTML=" ";
}
if( fconpassword=="")
{
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Enter the Confirm Password";
return false;
}else if(!ck_password.test( fconpassword)){
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Should match with Password";
return false;
}else {
document.getElementById("elmeconfirmpasswordError").innerHTML=" ";
}
if(fconpassword != fpassword )
{
document.form.confirmpassword.focus();
document.getElementById("elmere-enterpasswordError").innerHTML="Passwords are not matching,re-enter again";
return false;
}else {
document.getElementById("elmere-enterpasswordError").innerHTML=" ";
}
if(fmonth=="")
{
document.form.birthday_month.focus();
document.getElementById("elmebirthday_monthError").innerHTML="Select the Birthday of Month";
return false;
}else {
document.getElementById("elmebirthday_monthError").innerHTML=" ";
}
if(fday=="")
{
document.form.birthday_day.focus();
document.getElementById("elmebirthday_dayError").innerHTML="Select the Birthday of Day";
return false;
}else {
document.getElementById("elmebirthday_dayError").innerHTML=" ";
}
if(fyear=="")
{
document.form.birthday_year.focus();
document.getElementById("elmebirthday_yearError").innerHTML="Select the Birthday of Year";
return false;
}else {
document.getElementById("elmebirthday_yearError").innerHTML=" ";
}
if(document.form.radiobutton[0].checked==false && document.form.radiobutton[1].checked == false){
document.getElementById("elmeGenderError").innerHTML="Select Your Gender";
return false;
}else {
document.getElementById("elmeGenderError").innerHTML=" ";
}
if(fname!='' && lname!='' && femail!='' && fuser!='' && fpassword!='' && fconpassword!='' && fmonth!='' && fday!='' && fyear!=''){
location.href="Useraccountpage.htm";
return false;
}
}
function Cancel(){
window.location="Loginpage.htm";
return false;
}
</script>
</head>
<body>
<div id="Holder">
<!----------Header---------->
<div id="Header">
</div>
<!----------NAVBAR---------->
<div id="NavBar">
<nav>
<ul>
<li>Register</li>
<li></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
</div>
<div id="ContentLeft">
<br>
</div>
<div id="ContentRight">
<section class="loginform cf">
<form name="form" action="Useraccountpage.htm" method="post" id="form_id">
<table class="center">
<tr>
<td><label for="first-name">First Name</label></td>
<td><label for="last_name">Last Name</label></td>
</tr>
<tr>
<td> </td>
</tr>
<tr >
<td>
<input type="text" class="styletxtfields" id="firstname" name="firstname" placeholder="FirstName">
</td>
<td>
<input type="text" class="styletxtfields" id="lastname" name="lastname" placeholder="LastName">
</td>
</tr>
<tr><td id="elmfirstnameError" colspan="2" class="errorMsg" ></td></tr>
<tr><td id="elmlastnameError" colspan="2" class="errorMsg" > </td></tr>
<tr>
<td>
<label for="email">Email Id</label>
<br>
<br>
<input type="email" class="styletxtfields" name="email" id="lastname" placeholder="Enter the Email ID">
</td>
</tr>
<tr>
<td id="elmemailError" colspan="2" class="errorMsg" > </td>
</tr>
<tr>
<td>
<label for="user">User Name</label>
<br>
<br>
<input type="text" class="styletxtfields" name="username" placeholder="UserName">
</td>
</tr>
<tr>
<td id="elmeusernameError" colspan="2" class="errorMsg"> </td>
</tr>
<tr>
<td><label for="password" >Password</label></td><br>
<td><label for="password" >Confirm Password</label></td><br>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<input type="password" class="styletxtfields" name="password" placeholder="Enter the Password">
</td>
<td>
<input type="password" class="styletxtfields" name="confirmpassword" placeholder="Enter the Conform Password">
</td>
</tr>
<tr><td id="elmepasswordError" colspan="2" class="errorMsg"></td></tr>
<tr><td id="elmeconfirmpasswordError" class="errorMsg"></td></tr>
<tr>
<th id="elmere-enterpasswordError" colspan="2" class="errorMsg"> </th>
</tr>
<tr>
<td>
<label for="DOB">Date of Birthday</label>
</td>
<td>
<select name="birthday_month" class="styleselfield">
<option value="" selected >Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="birthday_day" class="styleselfield" >
<option value="" selected>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthday_year" class="styleselfield">
<option value="" selected>Year</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
</select>
</td>
</tr>
<tr><td id="elmebirthday_monthError" class="errorMsg"></td></tr>
<tr><td id="elmebirthday_dayError" class="errorMsg"></td></tr>
<tr><td id="elmebirthday_yearError" class="errorMsg"> </td></tr>
<tr>
<td>
<label for="gender">Gender</label>
</td>
<td>
<input type="radio" name="radiobutton" value="Male">
<label>Male</label>
<input type="radio" name="radiobutton" value="Female">
<label>Female</label>
</td>
</tr>
<tr>
<td id="elmeGenderError" class="errorMsg"> </td>
</tr>
<tr>
<td style="text-align:center">
<input type="button" value="Register" onClick="Submit()" ><br>
</td>
<td style="text-align:center">
<input type="button" onClick="Cancel()" value="Cancel">
</td>
</tr>
</table>
</form>
</section>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
This is Page 2 where I want data from from Page 1 and display using cookies in javascript:
Page 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script type="text/javascript">
function getValue(varname)
{ var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0)
{
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (i=0;i<vars.length;i++)
{
var parts = vars[i].split("=");
if (parts[0] == varname)
{
value = parts[1];
break;
}
}
value = unescape(value);
value.replace(/\+/g," ");
return value;
}
</script>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1>WELCOME TO USER ACCOUNT</h1>
</div>
<div id="ContentLeft">
<h2>Your Message Here</h2><br>
<br>
<h6>
Your Message</h6>
</div>
<div id="ContentRight">
<form onload="getValue(varname)">
<table align="center">
<tr>
<td> First Name</td>
<td><Label id="sfName"></label></td>
</tr>
<tr>
<td> LastName :</td>
<td><Label id="slName"></label></td>
</tr>
<tr>
<td>Email</td>
<td><Label id="semail"></Label></td>
</tr>
<tabel>
</form>
<script>
var fname=getValue("firstname");
var lname=getValue("lastname");
var email = getValue("email");
document.getElementById("sfName").innerHTML= fname;
document.getElementById("slName").innerHTML= lname;
document.getElementById("semail").innerHTML= email;
</script>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
What is the actual question you're asking? If the pages are on the same domain you might try using localStorage or sessionStorage to share data.
Cookies are persistent, automatically included in every get/post, and not a best choice for what you seem to be trying to accomplish.
The post in your example won't be sharing via the href property. Form posts send data to a server. The HTM output won't see that data directly.
The best option is to process the submitted data on a server, preferably over https. Server side scripting languages receive the data and can be used to update a database. For example, in Lucee a structure called FORM is populated, in php a named array called $_POST is populated.
Failing that, if the data needs to be browser persistent, store it in localStorage or sessionStorage. If it only needs to be passed between pages, do the same; but, delete the entries upon consumption.
page 1:
<input name="firstname" onchange="localStorage.firstName=this.value;">
page 2:
document.getElementById("firstname").innerHTML=localStorage.firstName;
// - if not persistent: localStorage.removeItem("firstName");
I have a form the contains customer shipping information and card details. I'm using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ for validation. Right now, all the form fields are validated on form submit, including stripe card validation. The problem is, if a customer enters his/her card information correctly and other areas of the form are not validated, the charge will still go through. Can I validate the billing information prior to running the stripe validation with one submit button without having to break this up into a two step process? See code below. Thanks!
<div class="stripe-errors"><span class="payment-errors"></span></div>
<form action="charge.php" method="POST" id="payment-form" class="form" >
<div class="pleft">
<label for="firstname">First Name</label>
<input type="text" size="20" value="<?php echo $_SESSION['sfirst'] ?>" name="fname" class="required" placeholder="First"/>
</label>
<label for="lastname">Last Name</label>
<input type="text" size="20" value="<?php echo $_SESSION['slast'] ?>" name="lname" class="required" placeholder="Last"/>
<label for="email">Email</label>
<input type="text" size="20" value="<?php echo $_SESSION['semail'] ?>" name="email" class="required email" placeholder="email#address.com"/>
<label>Shipping Address</label>
<input type="text" size="20" value="<?php echo $_SESSION['saddress'] ?>" name="address" class="required" placeholder="Address"/>
</div>
<div class="pmiddle">
<label>City</label>
<input type="text" size="20" value="<?php echo $_SESSION['scity'] ?>" name="city" class="required" placeholder="City"/>
<label>State</label>
<select id="state" value="<?php echo $_SESSION['sstate'] ?>" name="state" class="required" >
<option value="">Select State</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
<label>Zip Code</label>
<input type="text" size="20" name="zip" value="<?php echo $_SESSION['szip'] ?>" class="required" minlength="5" placeholder="Zip Code"/>
<label>Product Quantity</label>
<select id="orderquantity" name="orderquantity" >
<option value="1">1 Bottle (30 Day Supply)</option>
<option value="2">2 Bottles (60 Day Supply)</option>
<option value="3">3 Bottles (90 Day Supply)</option>
<option value="4">4 Bottles (120 Day Supply)</option>
<option value="5">5 Bottles (150 Day Supply)</option>
<option value="6">6 Bottles (180 Day Supply)</option>
<option value="7">7 Bottles (210 Day Supply)</option>
<option value="8">8 Bottles (240 Day Supply)</option>
</select>
</div>
<div class="pright">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
<label>CVC Security Code </label>
<input type="text" size="4" autocomplete="off" class="card-cvc"/><a class="small-link" data-toggle="modal" href="#cvcs"/>What's this?</a>
<label>Card Expiration (ex. 01/2015)</label>
<select class="card-expiry-month required ">
<option value="">Month</option>
<option value="01">01 January</option>
<option value="02">02 February</option>
<option value="03">03 March</option>
<option value="04">04 April</option>
<option value="05">05 May</option>
<option value="06">06 June</option>
<option value="07">07 July</option>
<option value="08">08 August</option>
<option value="09">09 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
<select class="card-expiry-year required">
<option value="">Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="checkbox">
<input type="checkbox" style="visibility:hidden;" value="checked" checked="yes" name="agree" class="required">
</div>
<div class="purchasebutton">
<button type="submit" class="submit-button button green" onclick="return loadSubmit();">Purchase</button>
</div>
<div class="cards">
<img src="/images/trial/cards.png">
</div>
</form>
</div>
Form js validation here:
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript" src="/js/modal.js"></script>
<script type="text/javascript">
//this validates customer information form fields
$(document).ready(function() {
$("#payment-form").validate();
});
</script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('<?PHP echo $publishable_api_key ?>');
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
$(".payment-errors").html(response.error.message);
document.getElementById("processing").style.visibility = "hidden";
} else {
var form$ = $("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#payment-form").submit(function(event) {
if (!$("input[name=agree]").is(":checked")) {document.getElementById("processing").style.visibility = "hidden";
return false;
} else {
$('.submit-button').attr("disabled", "disabled");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false;
}
});
if (window.location.protocol === 'file:') {
alert("stripe.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support#stripe.com if you need assistance.");
}
});
</script>
how about this :
$("#payment-form").submit(function(event) {
$("#payment-form").validate();
if(!$("#payment-form").valid()){
event.preventDefault();
$('.submit-button').removeAttr("disabled");
document.getElementById("processing").style.visibility = "hidden";
return false;
}
if (!$("input[name=agree]").is(":checked") ) {document.getElementById("processing").style.visibility = "hidden";
return false;
}...
I have a form that I need to check for no entries and things like that. Right now the form will change the color of the form fields to red but I need it to change the labels to red also. Since labels are not form elements my current method is making it a tad difficult to change the labels as well. Any suggestions I can implement?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
<script type="text/javascript">
function validate(){
var errors = new Array();
for( var x = 0; x < document.forms[0].elements.length; x++ ){
if( document.forms[0].elements[x].type == "text" ){
if( document.forms[0].elements[x].value == "" ){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
document.forms[0].elements[x].className = "in_error";
}
}
if( document.forms[0].elements[x].type == "select-one" ){
if( document.forms[0].elements[x].selectedIndex == 0 ){
errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
document.forms[0].elements[x].className = "in_error";
}
}
if( document.forms[0].elements[x].type == "password" ){
if( document.forms[0].elements[x].value == ""){
errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
document.forms[0].elements[x].className = "in_error";
}
}
}
if( errors.length == 0 ){
return true;
}else{
clear_errors( errors );
show_errors( errors );
return false;
}
}
function clear_errors( errors ){
var div = document.getElementById( "errors" );
while( div.hasChildNodes() ){
div.removeChild(div.firstChild);
}
}
function show_errors( errors ){
var div = document.getElementById( "errors" );
for(var x = 0; x < errors.length; x++){
var error = document.createTextNode( errors[x] );
var p = document.createElement( "p" );
p.appendChild( error );
div.appendChild( p )
}
}
window.onload = function( ){
document.forms[0].onsubmit = validate;
}
</script>
<style type="text/css">
#errors{
color: #F00;
}
.in_error{
background-color: #F00;
}
</style>
</head>
<body>
<div id="errors"></div>
<form action="http://ingenio.us.com/examples/echo" method="post">
<div class="mainContainer" style="width:650px; margin: 0 auto; text-align:center;">
<div class="contactInfo" style="text-align:center; width:650px;">
<fieldset>
<legend style="text-align:left;">Contact Info</legend>
<label id="firstNameLabel" for="firstName">First Name: </label><input name="First Name" id="firstName" type="text" size="15" maxlength="15" />
<label id="lastNameLabel" for="lastName">Last Name: </label><input name="Last Name" id="lastName" type="text" size="15" maxlength="15" />
<label id="middleInitialLabel" for="middleInitial">Middle Initial: </label><input name="Middle Initial" id="middleInitial" type="text" size="4" maxlength="1" /><br /><br/>
<label id="streetAddressLabel" for="streetAddress">Street Address: </label><input name="Street Address" id="streetAddress" type="text" size="58" maxlength="55" /> <br /><br />
<label id="cityLabel" for="city">City: </label><input name="City" id="city" type="text" size="30" maxlength="28" />
<label id="stateLabel" for="state">State: </label>
<select name="State" id="state">
<option></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label name="zipLabel" for="zip">Zip: </label><input name="Zip" id="zip" type="text" size="7" maxlength="5" /><br /><br />
</fieldset>
</div><br /><br />
</div>
<div class="mainContainerTwo" style="width:450px; margin: 0 auto; text-align:center;">
<div class="userInfo" style="text-align:center; width:450px;">
<fieldset>
<legend style="text-align:left;">User Info</legend>
<label name="usernameLabel" for="username">Username: </label><input name="Username" id="username" type="text" size="20" maxlength="15" /><br /><br />
<label name="passwordLabel" for="password">Password: </label><input name="Password" id="password" type="password" size="20" maxlength="15" /><br /><br />
<label name="passwordConfirmLabel" for="passwordConfirm">Confirm Password: </label><input name="Confirm Password" id="passwordConfirm" type="password" size="20" maxlength="15" /><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</div>
</div>
</form>
</body>
</html>
A quick fix would be traversing from the input element to the previous sibling, which in this case is the label element. After that you can add class in_error to your label element.
Add the following code line inside the three if-blocks
document.forms[0].elements[x].previousSibling.className = "in_error";
Then you should also change your CSS to the following, in order to set the red background color to the inputs and red foreground color to the labels.
input.in_error{
background-color: #F00;
}
label.in_error {
color: #F00;
}
Is there any reason why you are not using jQuery? If not, I strongly suggest you to take it into use. It makes DOM manipulation like this super easy.