Hi there,
I am fairly new to JavaScript and having some difficulty.
The following code represents a prototype for a mailing list sign-up.
The user must either submit their name and email OR name and mailing address. I have the validations working on Safari and Chrome, but not IE and Firefox. I have changed the pop-up settings, but that was unsuccessful. Any suggestions?
ALSO -
I need to set a cookie when the form is submitted successfully. If the user tries to resubmit, I would like a new HTML page advising them that they have already signed up. I have absolutely no idea how to accomplish this.
Here is my code. Any help would be greatly appreciated.
//check email variables
var email = document.getElementById('email').value;
var elength = email.length;
var atpos = email.indexOf('@');
var atdot = email.lastIndexOf('.');
var tld = email.substring(atdot);
//other variables
var feedback = ""
var feedbackFN = ""
var feedbackLN = ""
var feedbackSA = ""
var feedbackC = ""
var feedbackState = ""
var feedbackZ = ""
var firstName = document.getElementById('firstname')
var lastName = document.getElementById('lastname')
var streetAdd = document.getElementById('streetaddress')
var city = document.getElementById('city')
var stateName = document.getElementById('state')
var zip = document.getElementById('zipcode')
Like I said, I am new to this, so unfortunately after using the error console the problem is not immediate to me. When I click on the source files of the warning messages, they are displaying code that isn't even mine.
all these dreamweavers and the other beavers won't help you to learn. write your code manually and you will feel it.
try the code below but i must warn you that all the checks you are doing here are not precise and if you need the sending data to be checked well you have to do much detailed checks.
I've heard Dreamweaver isn't the best way to learn to code. When I learned HTML and CSS, I just used Dreamweaver because that's what I had (I have the Adobe Creative Suite). But, the more involved I get with web development, the more I hear Dreamweaver isn't the way to do.
Thank you for revising the code, however, it is still requiring all forms except street address line 2 and telephone.
I would like to require name and address OR name and email. If the user wants to submit all, that's fine too.
I guess those if statements I was using just aren't the way to do it.
this code is far from perfection but it does some checks 'on the fly' and one final check before the form submits. you must remember that all these checks do not save you from a good hacker and all the sent data must be checked again on the server before inserting into the database:
Code:
<!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>Mailing List: Sign Up</title>
<link href="Main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var states=['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia',
'Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland',
'Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
'New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
'South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'],
bad_username_path=/[^\w\d_\-\s]{1,}/im,
bad_address_path=/[^\w\d_\-\s,\/\.]{1,}/im,
mail_path=/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i;
function sweepField(obj,reg_path){
var val=obj.value;eval("if("+reg_path+".test(val)){obj.value=val.replace("+reg_path+",'');}");
if(typeof(sweepField.arguments[2])!='undefined'){var retval=(val.length>0)?true:false;return retval;}
}
function doc(objID){return document.getElementById(objID);}
function init(){
/* this builds 'state' select */
for(var i in states){doc('state').options[doc('state').options.length]=new Option(states[i],(i+1));}
/* this prevents sending the form if the user press Enter key.
this way we force the user to fill the form (the required fields at least)
before the 'Subscribe Now' button appears */
window.onkeydown=function(event){if(window.event.keyCode==13){return false;}};
/* FIRSTNAME can only contain: letters, digits, spaces, - and _ */
doc('firstname').onchange=doc('firstname').onkeyup=function(){sweepField(this,bad_username_path);}
/* STREETADDRESS can only contain: letters, digits, spaces, commas, dots, slashes, - and _ */
doc('streetaddress').onchange=doc('streetaddress').onkeyup=function(){sweepField(this,bad_address_path);}
/* check EMAIL format on the field change */
doc('email').onchange=function(){if(!mail_path.test(this.value)){this.value='Wrong Email format!';setTimeout("doc('email').value='';doc('email').focus();",1000);}}
/* this tries to style inputs[type=text] if the browser can draw rounded corners */
var inps=document.getElementsByTagName('INPUT');
for(var k in inps){if(inps[k].type=='text'){
try{inps[k].style.border='1px solid #ccc';inps[k].style.borderRadius='5px';}catch(e){}}
/* this makes the SUBMIT button visible if FIRSTNAME is not empty and STREETADDRESS or EMAIL not empty also */
inps[k].onblur=function(){
if(doc('firstname').value.length>0 && (doc('streetaddress').value.length>0 || doc('email').value.length>0)){if(doc('confirm').style.display=='none'){doc('confirm').style.display='block';}}
else{if(doc('confirm').style.display!='none'){doc('confirm').style.display='none';}}
}
}
/* this hides the SUBMIT button on form reset if it is visible and moves focus on the first field of the form */
doc('input').onreset=function(){doc('firstname').focus();if(doc('confirm').style.display!='none'){doc('confirm').style.display='none';}}
doc('input').reset();
}
/* paranoid final check */
function validateForm(){
var valid=false;
if(doc('firstname').value.length>0){valid=sweepField(doc('firstname'),bad_username_path,1);}
if(doc('streetaddress').value.length>0){valid=sweepField(doc('streetaddress'),bad_username_path,1);}
if(doc('email').value.length>0){if(!mail_path.test(doc('email').value)){valid=false;}}
if(valid){document.input.submit();}
}
window.onload=init;
</script>
<style type="text/css">
form{width:365px;}
label{float:left;width:150px;font-family:"Times New Roman",Times,serif;}
input[type=text]{float:left;width:200px;text-align:center;}
select{float:left;width:200px;}
#note{font-size:12px;font-style:italic;text-align:center;}
.warning{color:Red;background-color:transparent;}
.req_main{color:#000;background-color:#cfdf9a;}
.req{color:#000;background-color:#f5eca6;}
</style>
</head>
<body>
<h3>I would like to require name and address OR name and email. If the user wants to submit all, that's fine too</h3>
<form name="input" id="input" action="form_info_input.asp" method="post">
<div align="left">
<label for="firstname">First name:</label><input class="req_main" type="text" name="firstname" id="firstname" /><br /><br />
<label for="lastname">Last name: </label><input type="text" name="lastname" id="lastname" /><br /><br />
<label for="streetaddress">Street Address Line 1: </label><input class="req" type="text" name="streetaddress" id="streetaddress" /><br /><br />
<label for="streetaddresstwo">Street Address Line 2:</label><input type="text" name="streetaddresstwo" id="streetaddresstwo" /><br /><br />
<label for="city">City: </label><input type="text" name="city" id="city" /><br /><br />
<label for="state">State: </label><select name="state" id="state" tabindex="150"><option value="0">Select State</option></select><br /><br />
<label for="zipcode">Zip Code: </label><input type="text" name="zipcode" id="zipcode" /><br /><br />
<label for="email">Email Address: </label><input class="req" type="text" name="email" id="email" /><br /><br />
<label for="phone">Telephone Number: </label><input type="text" name="phone" id="phone" /><br /><br />
<div id="note"><u><b>Note:</b></u> the <span class="req_main">green</span> and at least one of <span class="req">yellow</span> fields are required</div><br /><br />
<div align="center"><input type="reset" value="Clear" /></div>
<div id="confirm" style="display:none;text-align:center;margin-top:10px;"><input type="button" value="Subscribe Now" onclick="validateForm()" /></div>
</div>
</form>
</body>
</html>
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
Sorry for the delay, been a little busy. But, this code works perfectly!
I really appreciate all the time you have spent on this project. Finally, someone has cleared up my confusion!
Thank you again!
For anyone reading this - Padonak has been unbelievably helpful, patient and timely. You will be lucky to work him/her.
Reply With Quote
Originally Posted by suzanne.miller
Bookmarks