i have all the fields working. now i just need the user information as well as my created images into my sidebar div id="badge" and div id="results"
every time i hit submit it clears the form rather than posting it. what am i missing?
// JavaScript Document
function setupForm() {
}
function validateData() {
var fname_valid = false;
var lname_valid = false;
var phone_valid = false;
var email_valid = false;
var url_valid = false;
// variables are for images to go next to success and error...
//SUCCESS IMAGES (check mark)
var cmark_fname = document.createElement('img');
cmark_fname.setAttribute('src','img/c_mark.jpg');
var cmark_lname = document.createElement('img');
cmark_lname.setAttribute('src','img/c_mark.jpg');
var cmark_phone = document.createElement('img');
cmark_phone.setAttribute('src','img/c_mark.jpg');
var cmark_email = document.createElement('img');
cmark_email.setAttribute('src','img/c_mark.jpg');
var cmark_url = document.createElement('img');
cmark_url.setAttribute('src','img/c_mark.jpg');
// ERROR IMAGES (error mark)
var emark_fname = document.createElement('img');
emark_fname.setAttribute('src','img/e_mark.jpg');
var emark_lname = document.createElement('img');
emark_lname.setAttribute('src','img/e_mark.jpg');
var emark_phone = document.createElement('img');
emark_phone.setAttribute('src','img/e_mark.jpg');
var emark_email = document.createElement('img');
emark_email.setAttribute('src','img/e_mark.jpg');
var emark_url = document.createElement('img');
emark_url.setAttribute('src','img/e_mark.jpg');
// FIRST NAME
document.myform.fname_name.onblur = function() {
var fname = document.getElementById('fname');
var span = fname.getElementsByTagName('span');
if(this.value.length > 0) {
span[0].appendChild(cmark_fname);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Success!'));
fname_valid = true;
} else {
span[0].firstChild.nodeValue = "Success!";
fname_valid = true;
}
} else {
span[0].appendChild(emark_fname);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Error!'));
fname_valid = false;
} else {
span[0].firstChild.nodeValue = "Error!";
fname_valid = false;
}
}
}
document.myform.fname_name.onfocus = function() {
var fname = document.getElementById('fname');
var span = fname.getElementsByTagName('span');
span[0].firstChild.nodeValue = "Enter Your First Name";
span[0].removeChild(cmark_fname);
span[0].removeChild(emark_fname);
}
// LAST NAME
document.myform.lname_name.onblur = function() {
var lname = document.getElementById('lname');
var span = lname.getElementsByTagName('span');
if(this.value.length > 0) {
span[0].appendChild(cmark_lname);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Success!'));
lname_valid = true;
} else {
span[0].firstChild.nodeValue = "Success!";
lname_valid = true;
}
} else {
span[0].appendChild(emark_lname);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Error!'));
lname_valid = false;
}else {
span[0].firstChild.nodeValue = "Error!";
lname_valid = false;
}
}
}
document.myform.lname_name.onfocus = function() {
var lname = document.getElementById('lname');
var span = lname.getElementsByTagName('span');
span[0].firstChild.nodeValue = "Enter Your Last Name!";
span[0].removeChild(cmark_lname);
span[0].removeChild(emark_lname);
}
// PHONE NUMBER INFO
document.myform.phone_name.onblur = function() {
var phone = document.getElementById('phone');
var span = phone.getElementsByTagName('span');
var rule = '-';
if(this.value.indexOf(rule)!=-1) {
span[0].appendChild(cmark_phone);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Success!'));
phone_valid = true;
} else {
span[0].firstChild.nodeValue = "Success!";
phone_valid = true;
}
}
else {
span[0].appendChild(emark_phone);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Error!'));
phone_valid = false;
} else {
span[0].firstChild.nodeValue = "Error!";
phone_valid = false;
}
}
}
document.myform.phone_name.onfocus = function() {
var phone = document.getElementById('phone');
var span = phone.getElementsByTagName('span');
span[0].firstChild.nodeValue = "Enter Your Phone Number!";
span[0].removeChild(cmark_phone);
span[0].removeChild(emark_phone);
}
// EMAIL INFO
document.myform.email_name.onblur = function() {
var email = document.getElementById('email');
var span = email.getElementsByTagName('span');
var rule = '@';
if(this.value.indexOf(rule)!=-1) {
span[0].appendChild(cmark_email);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Success!'));
email_valid = true;
} else {
span[0].firstChild.nodeValue = "Success!";
email_valid = true;
}
} else {
span[0].appendChild(emark_email);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Error!'));
email_valid = false;
} else {
span[0].firstChild.nodeValue = "Error!";
email_valid = false;
}
}
}
document.myform.email_name.onfocus = function() {
var email = document.getElementById('email');
var span = email.getElementsByTagName('span');
span[0].firstChild.nodeValue = "Enter Email Address!";
span[0].removeChild(cmark_email);
span[0].removeChild(emark_email);
}
// URL INFO
document.myform.url_name.onblur = function() {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
var url = document.getElementById('url');
var span = url.getElementsByTagName('span');
var rule = '~';
if(this.value.indexOf(rule)!=-1) {
span[0].appendChild(cmark_url);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Success!'));
url_valid = true;
} else {
span[0].firstChild.nodeValue = "Success!";
url_valid = true;
}
} else {
span[0].appendChild(emark_url);
if(span[0].firstChild.nodeValue == null) {
span[0].appendChild(document.createTextNode('Error!'));
url_valid = false;
} else {
span[0].firstChild.nodeValue = "Error!";
url_valid = false;
}
}
}
document.myform.url_name.onfocus = function() {
var url = document.getElementById('url');
var span = url.getElementsByTagName('span');
span[0].firstChild.nodeValue = "Enter Your Sulley Address!";
span[0].removeChild(cmark_url);
span[0].removeChild(emark_url);
}
// SUBMIT BUTTON CODE
document.myform.onsubmit = function() {
processForm(fname_valid, lname_valid, phone_valid, email_valid, url_valid);
return false;
}
}
function processForm(fname_valid, lname_valid, phone_valid, email_valid, url_valid) {
if(fname_valid && lname_valid && phone_valid && email_valid && url_valid) {
alert('inside processForm()');
return false;
}
else {
alert('something still is not valid');
return false;
}
}
// BADGE CODE BELOW THIS COMMENT
//Submit
function processForm(fname_valid, lname_valid, email_valid, phone_valid, url_valid) {
if(fn_valid && ln_valid && email_valid && phone_valid && url_valid) {
var question1 = document.myform.elements['question1'];
var question2 = document.myform.elements['question2'];
var badge_content = document.getElementById('badge_info');
var ohya = document.createElement('img');
ohya.setAttribute('src','img/ohya.jpg');
var fan = document.createElement('img');
fan.setAttribute('src','img/playing_fan.jpg');
var sweet = document.createElement('img');
sweet.setAttribute('src','img/sweet.jpg');
var fname = document.myform.fname_name.value;
var lname = document.myform.lname_name.value;
var email = document.myform.email_name.value;
var phone = document.myform.phone_name.value;
var url = document.myform.url_name.value;
var result = document.getElementById('results');
var p1 = document.createElement('p');
var p2 = document.createElement('p');
var p3 = document.createElement('p');
var p4 = document.createElement('p');
var p5 = document.createElement('p');
var p6 = document.createElement('p');
for(var x=0; x<question1.length; x++) {
if(question1[x].checked) {
var question1Value = question1[x].value;
}
}
for(var x=0; x<question2.length; x++) {
if(question2[x].checked) {
var question2Value = question2[x].value;
}
}
if(question1Value == "true" && question2Value == "true"){
var fname_txt = document.createTextNode('First Name: ' + fname);
var lname_txt = document.createTextNode('Last Name: ' + lname);
var email_txt = document.createTextNode('Email: ' + email);
var phone_txt = document.createTextNode('Phone Number: ' + phone);
var url_txt = document.createTextNode('Sulley URL: ' + url);
var badge_url = document.createTextNode('Badge URL: http://sulley.dm.ucf.edu/~gi938466/dig3716c/assignment4/img/ohya.jpg');
badge_content.appendChild(fan);
alert("FANTASTIC");
result.appendChild(p6);
p6.appendChild(badge_url);
result.appendChild(p1);
p1.appendChild(fname_txt);
result.appendChild(p2);
p2.appendChild(lname_txt);
result.appendChild(p3);
p3.appendChild(email_txt);
result.appendChild(p4);
p4.appendChild(phone_txt);
result.appendChild(p5);
p5.appendChild(url_txt);
}
else if (question1Value == "true" && question2Value == "false"){
var fname_txt = document.createTextNode('First Name: ' + fname);
var lname_txt = document.createTextNode('Last Name: ' + lname);
var email_txt = document.createTextNode('Email: ' + email);
var phone_txt = document.createTextNode('Phone Number: ' + phone);
var url_txt = document.createTextNode('Sulley URL: ' + url);
var badge_url = document.createTextNode('Badge URL: http://sulley.dm.ucf.edu/~gi938466/dig3716c/assignment4/img/ohya.jpg');
badge_content.appendChild(ohya);
alert("OH YAAAAA");
result.appendChild(p6);
p6.appendChild(badge_url);
result.appendChild(p1);
p1.appendChild(fname_txt);
result.appendChild(p2);
p2.appendChild(lname_txt);
result.appendChild(p3);
p3.appendChild(email_txt);
result.appendChild(p4);
p4.appendChild(phone_txt);
result.appendChild(p5);
p5.appendChild(url_txt);
}
else if (question1Value == "true" && question2Value == "false"){
var fname_txt = document.createTextNode('First Name: ' + fname);
var lname_txt = document.createTextNode('Last Name: ' + lname);
var email_txt = document.createTextNode('Email: ' + email);
var phone_txt = document.createTextNode('Phone Number: ' + phone);
var url_txt = document.createTextNode('Sulley URL: ' + url);
var badge_url = document.createTextNode('Badge URL: http://sulley.dm.ucf.edu/~gi938466/dig3716c/assignment4/img/sweet.jpg');
badge_content.appendChild(sweet);
alert("SWEEEEET");
result.appendChild(p6);
p6.appendChild(badge_url);
result.appendChild(p1);
p1.appendChild(fname_txt);
result.appendChild(p2);
p2.appendChild(lname_txt);
result.appendChild(p3);
p3.appendChild(email_txt);
result.appendChild(p4);
p4.appendChild(phone_txt);
result.appendChild(p5);
p5.appendChild(url_txt);
}
return false;
} else {
// When form not vaild
alert('Form is not vaild. Please go back and check your information');
return false;
}
}
window.onload = validateData;
<body>
<div id="wrapper">
<div class="container_12" id="container">
<div class="grid_12" id="h1"> Take survey
</div>
<div class="clear"></div>
<div class="grid_12" id="spacer"></div>
<div class="clear"></div>
<!--SIDE BAR-->
<div class="grid_3" id="sidebar">
<ul>
<li id="h2">Your Picture Will Be.....</li>
<li><div id="badge_info"> <!--insert badge here --> </div></li>
<li><div id="results"> <!--insert results of form here --> </div></li>
</ul>
</div>
<!--CONTENT GOES BELOW -->
<div class="grid_8" id="content">
<form method="post" name="myform" onsubmit="processForm() return false;">
<fieldset>
<legend>User Information</legend>
<br/>
<div id="fname">
<label for="fname_id">First Name:</label><br/>
<input id="fname_id" type="text" name="fname_name" value="" />
<span />
</div>
<div id="lname">
<label for="lname_id">Last Name:</label><br/>
<input id="lname_id" type="text" name="lname_name" value="" />
<span />
</div>
<div id="phone">
<label for="phone_id">Phone Number: (Type Number in [xxx-xxx-xxxx] Format)</label><br/>
<input id="phone_id" type="text" name="phone_name" value="" />
<span />
</div>
<div id="email">
<label for="email_id">Email:</label><br/>
<input id="email_id" type="text" name="email_name" value="" />
<span />
</div>
<div id="url">
<label for="url_id">Sulley Address:</label><br/>
<input id="url_id" type="text" name="url_name" value="" />
<span />
</div>
<br/>
<!--Questions for survey -->
<fieldset>
<legend> Survey Questions</legend><br/>
<div class="question">
<label for="question1">Do you drink alcohol?</label>
</div>
<div class="answer">
<input type="radio" name="question1" value="true" />True
<input type="radio" name="question1" value="false" />False <br/>
</div>
<div class="question">
<label for="question2"> Do you like to party?</label>
</div>
<div class="answer">
<input type="radio" name="question2" value="true" />True
<input type="radio" name="question2" value="false" />False <br/>
</div>
</fieldset>
<div id="submit">
<input id="submit" type="submit" name="submit" value="Click to Submit" />
</div>
</fieldset>
</form>
</div>
</div><!--CONTAINER DIV -->
</div><!--wrapper -->
</body>
</html>