Posts by dmmajorstudent

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) …

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() …

alright this is what i have so far. the phone number field does not work neither does the email. how do i get the phone number field to work where the user inputs at least ONE dash? so for example the number can be 123123-1234 or even 123-123-1234
also how do i get the email to validate with the @ symbol?

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!"; …

I am in need of some assistance. I am trying to create a form page where users must input a phone number and email address. Using the coding that i have now and NO inner html how do i create the codes for a phone number and email address. I need the phone number to have ONE dash within the number. also...i have created 2 images one for the successful message and another for Error. how do i places those images next to the coding i have when it displays???

How do i create a phone number form box in javascript using no inner html . there must be at least one dash in it.

this is my div for the phone number

<body>
<div id="wrapper" class="grid_12">

<div id="header" class="grid_8"> Take a Survey </div>

<div class="clear"></div>

<form method="post" name="myform">

<fieldset class="grid_4">
<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:</label><br/>
<input id="phone_id" type="text" name="phone_name" value="" />
<span />
</div>

I am trying to create this form page where NO inner HTML is used. This is what i have so far and I am still trying to get a phone number code with at least ONE dash as well as a valid email address input. How do i generate this code with the work i have so far?

I'm trying to use javascript with NO Innerhtml. i am very new to javascript and i need a little help completing this form. the code i have so far to create a form page is just below this message.

How do i create a code when focused the text fields should offer a hint to the right of the text field that indicates how the user should input data??

When unfocused, the validateData() function should be called.

also how do i create my 2 survey questions a radio buttons??

<script type="text/javascript">
function assignHandlers()
{
		document.getElementById("fname").onblur = function()
		{

			if (document.forms[0].fname.value !="")
			alert(document.forms[0].fname.value);
							}
						
}

window.onload=assignHandlers;
		</script>

</head>

<body>
<form>

<fieldset><legend>User Info</legend>
<label for="fname">First name</label><input type="text" name="fname" id="fname" />
<br/>



<label for="lname">Last name</label><input type="text" name="lname" /> <br/>
<label for="email">email</label><input type="text" name="email" /> <br/>
<label for="phone">Phone Number</label><input type="text" name="phone" /> <br/>
<label for="url">Sulley Website</label><input type="text" name="url" /> <br/>
</fieldset>

<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>

<input type="submit" name="submit" value="Submit!" />
</form>


</body>

oh i see what you did. thanks again. hopefully these are my final questions. using that code you wrote. how do i use arrays and dom scripting with dom core methods and properties without using innerhtml?
do i wrote a function and then take that code you wrote into the html?

for instance one of the pictures on my page has a file size of43.3kb and the dimensions are 216x136

<img src='img/karma.jpg' alt='karma' width='216' height='136' onclick='document.getElementbyid("thisdescr").style.visibility="inline";setwaittime("document.getElementbyid(\"thisdescr\").style.visibility=\"hidden\"",3000);'><div id='thisdescr' style='visibility:hidden;'>File Name - karma.jpg<br> File Size 43.3KB</div>

thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136

You gave no details I made them up

<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);'>

Edit::left out closing quote

ah sorry about that. I have different images on my webpage that i need to allow the user to click on the image and then show the file size and name with the time out...

is there another code i can use that is not innerhtml? teacher is strict on not to use it. and im not getting much help from him. i have already adjusted all jpg to 216 by 136. do i need to put in the exact size and file name for the image? or does the javascript find out what it is automatically?

also by using my html code how do i add in the code in the html to make the java part work?

<p class="info_title"><img src="img/zephyr1.jpg" alt="zephyr" />

<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);>

if populating images on the page from a database the scripting language can fill the blanks from the imagedetails stored

i'm a little confused. using the code you sent and using my paragraph id i know that the image size is 216 by 136 cause i fixed it in photoshop. do i put in the width='80' height='80' ?????

<p class="info_title"><img src="img/ford.jpg" alt="deuce" />

i'm trying to create a code where every content image in my html that is click must display a <div id="credits"> whenever the image is clicked.
so the <div id="credits"> must display information in a format where it shows:

File Name - image_file_name.jpg
File Size - image_file_size (with units of the image itself)

after an image is clicked on it must disappear after 3 seconds

thanks alot. this is starting to help me. now without using inner html. how do i add in specific paragraphs of information to these assigned links. like lets take famous cars for example.. and i write all this information about it. in javascript without using innerhtml how do i change the content and place it into the content div every time i click on one of those links?

ah sorry i wasn't clear. using an onClick code. i wanted to know what the javascript code is so that any time i click on the links below only the content in the . w3 schools isn't helping me that much and neither is the book i have. i have never used javascript before. <div class="grid_8" id="content"> would change.

so within these links. i would have paragraphs of different information in each link. the famous hot rods links would have its own information and electric cars...

<li ><a href="#">Famous Hot Rods</a></li>
<li><a href="#">Electric Cars</a></li>
<li ><a href="#">Pre World War II</a></li>
</script>

a good place to learn javascript is w3schools

I have no idea what this means

you add an onclick event like this:

<a onlick="somejsfunction()">click here</a>

for this you will use ajax, which you can also learn at w3schools here

I've tried using w3 schools. been doing it for the last couple days and every time i go back and reedit the coding i cannot get it to work. its very frustrating. i've been trying to use documentwrite and getElementById.
what is the code to change content within my content div?

hello, i'm a student trying create a website using javascript. i am not familiar with javascript and i must use it to change only the content on my page. i have been stuck on this for days and i just cannot get it right.

using the 960 grid on the website what is the code to remove the behavior of my sidebar links?

also how do i add an onClick feature to my sidebar links?

the last question i have is. what is the correct code to change only the content of the page while everything else remains the same??

This is my html for the side bar and content div.

<!--HOT RODS LINKS -->

<div class="grid_3" id="car_links">
   <script type="text/javascript" src="js/hotrods.js">
    <ul>
	<li ><a href="#">Famous Hot Rods</a></li>
    <li><a href="#">Electric Cars</a></li>
    <li ><a href="#">Pre World War II</a></li>
   </script>   

</ul>
</div>
<!--CONTENT -->


<div class="grid_8" id="content"> 

<p>Click On list for Hot Rod List for details. </p>
 <p id="text1"> 
 </p>

    
    
    
   </div>   
       
        <div class="clear"></div>