I need help with my form page. I have almost everything working the way i want it to. now the question i have is what is the code needed in order to process the form?
the requirements are
-All user input must come from input fields in a single form tag.
-All user submitted data must be stored and displayed to the page using....
-DOM Core methods and properties after the quiz is submitted.
-After the survey is submitted, the user must be shown their personal info, the answers they submitted, and a “badge” to place on their homepage.
-The caption of the badge will be an absolute URL of that badge image that the user can copy and paste to include in their webpage.
// JavaScript Document
function setupForm() {
var fname_valid = false;
var lname_valid = false;
var phone_valid = false;
var email_valid = false;
var url_valid = false;
var check = document.createElement("img");
check.setAttribute('src','img/check.jpg');
var stop = document.createElement("img");
stop.setAttribute('src','img/stop.jpg');
document.myform.fname_name.onblur = function() {
var fname = document.getElementById('fname');
var span = fname.getElementsByTagName('span');
if(this.value.length > 0) {
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 {
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 the Correct Text!";
}
// LAST NAME
document.myform.lname_name.onblur = function() {
var lname = document.getElementById('lname');
var span = lname.getElementsByTagName('span');
if(this.value.length > 0) {
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 {
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 the Correct Text!";
}
// 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) {
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 {
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 the Correct Text!";
}
// 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) {
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 {
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 the Correct Text!";
}
// 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) {
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 {
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 the Correct Text!";
}
document.myform.onsubmit = function() {
processForm(fname_valid, lname_valid, phone_valid, email_valid, url_valid);
return false;
}
}
function processForm(fname_valid, lname_valid) {
if(fname_valid && lname_valid) {
alert('inside processForm()');
return false;
}
else {
alert('something still is not valid');
return false;
}
}
window.onload = setupForm;<form method="post" name="myform">
<fieldset>
<legend>User Information</legend>
<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>
<!--Questions for survey -->
<fieldset><legend> Survey</legend>
<label for="question1">Do you drink alcohol?</label>
<input type="radio" name="question1" value="true" />True
<input type="radio" name="question1" value="false" />False <br/>
<label for="question2"> Do you have a DUI?</label>
<input type="radio" name="question2" value="true" />True
<input type="radio" name="question2" value="false" />False <br/>
</fieldset>
<div id="submit">
<input id="submit" type="submit" name="submit" value="Click to Submit" />
</div>
</fieldset>
</form>
</div>