Novice needing form help

@menunesMar 10.2006

I’m a total JavaScript novice–I took one basic java scripting class on line. Its all guessing from there.

I’m trying to create an HTML form and then runs a java script that feeds back pricing based on the user’s selection of member ship status. The class I took showed ow to get user input from a window prompt, but this is just not practical.

I try to go piece by piece when doing new things. Once i get the first step down, I move on the next.

I’d LOVE help on this particular project, but more importantly, I’d love to get suggestions for books on online classes to help me develop these skills further.

Thanks
Mary Ellen

here’s my code:

<p>
<input type=”checkbox” name=”status” value=”1″>
I am a NACE member</p>

// running list of nace products for the order form
//match array id numbers with member non member pricing based on user input
//calculate cost using simple math of user input variable times cost

product = new Array(3);

product[0] = “2004 Employer Benchmark Survey: College Recruiting Status Report 330410BS”;
product[1] = “2004 Experiential Education Survey Report 330404EE”;
product[2] = “2004 National Meeting CD-ROM 26040CD”;

memprice = new Array(3);

memprice[0] =”39.95″;
memprice[1] = “75.00”;
memprice[2] = “129.00”;

nonmemprice = new Array(3);

nonmemprice[0] =”69.95″;
nonmemprice[1] = “150.00”;
nonmemprice[2] = “199.00”;

//set the counter to zero
var counter = 0;

//continue through the lenght of the product array

while (counter < product.length)

//test to see if nacemember selected and set the price based on status

var price

if (status != 1)
price =memprice[counter]
else price = nommemprice[counter];

{
document.write (“<p>Item: “, product[counter], ” Cost: $”, memprice[counter], “.</p>”);
document.write (“<p> price value: “, price, “</p>”);
counter++;
}

</script>

to post a comment

JavaScript

8 Comments(s) _↴

@konithomimoMar 10.2006 — #First a few comments:

1. It is good that you created your arrays the way that you did so that you can easily debug any wrong outputs.

2. Sometimes it is easier to give a variable an inital value and then use conditional statements to change the value. For example, you have:

var price

if (status != 1)

price =memprice[counter]

else price = nommemprice[counter];

you could have written it as:

var price = nommemprice[counter];

if (status != 1)

price =memprice[counter]

or any variation there of.

3. Try to always include the var when creating a variable.

4. Try to always include semicolons at the end of each line

Although #s 3 and 4 are not necessary, it is good etiquette because many other programming languages require that you do so.

Now for some help . . .

to see whether or not a checkbox is checked you do one of three things.

1. Give names to the checkbox and the form that is in.

2. Give your checkbox an ID

3. Use the onclick method of the checkbox

In your case it would be easy to use any of the above methods, although I suggest methods 2 or 3. Below is an example of what you are trying to do:

&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function getPrice(ins)
 {
 // running list of nace products for the order form
 //match array id numbers with member non member pricing based on user input
 //calculate cost using simple math of user input variable times cost
 
 product = new Array(3);
 
 product[0] = "2004 Employer Benchmark Survey: College Recruiting Status Report 330410BS";
 product[1] = "2004 Experiential Education Survey Report 330404EE";
 product[2] = "2004 National Meeting CD-ROM 26040CD";
 
 memprice = new Array(3);
 
 memprice[0] ="39.95";
 memprice[1] = "75.00";
 memprice[2] = "129.00";
 
 nonmemprice = new Array(3);
 
 nonmemprice[0] ="69.95";
 nonmemprice[1] = "150.00";
 nonmemprice[2] = "199.00";
 
 //set the counter to zero
 var counter = 0;
 
 //continue through the lenght of the product array
 
 while (counter &lt; product.length)
 
 //test to see if nacemember selected and set the price based on status
 
 var price = nommemprice[counter];
 if (ins == 0)
 price =memprice[counter]
 
 document.write ("&lt;p&gt;Item: ", product[counter], " Cost: $", memprice[counter], ".&lt;/p&gt;");
 document.write ("&lt;p&gt; price value: ", price, "&lt;/p&gt;");
 counter++;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;p&gt;
 &lt;input type="checkbox" name="status" value="1" onclick="if(this.checked)getPrice(0); else getPrice(1);"&gt;
 I am a NACE member&lt;/p&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

of course, just fill in the rest of your code . . .

@menunesauthorMar 10.2006 — #thanks so much,

any suggestions for further training resources????

Mary Ellen

@nonamehhwMar 11.2006 — #<html>

<head>

<title></title>

</head>

<script language="JavaScript" >

function getPrice(ins)

{

// running list of nace products for the order form

//match array id numbers with member non member pricing based on user input

//calculate cost using simple math of user input variable times cost

product = new Array(3);

product[0] = "2004 Employer Benchmark Survey: College Recruiting Status Report 330410BS";

product[1] = "2004 Experiential Education Survey Report 330404EE";

product[2] = "2004 National Meeting CD-ROM 26040CD";

memprice = new Array(3);

memprice[0] ="39.95";

memprice[1] = "75.00";

memprice[2] = "129.00";

nonmemprice = new Array(3);

nonmemprice[0] ="69.95";

nonmemprice[1] = "150.00";

nonmemprice[2] = "199.00";

//set the counter to zero

var counter = 0;

//continue through the lenght of the product array

while (counter < product.length)

{

var price = nonmemprice[counter];

if (ins == 0)

price =memprice[counter]

document.write ("<p>Item: ", product[counter], " Cost: $", memprice[counter], ".</p>");
  document.write ("<p> price value: ", price, "</p>");
  counter++;

}

}

</script>

<body>

<input type="checkbox" name="status" value="1" onclick="if(this.checked)getPrice(0); else getPrice(1);">

I am a NACE member</p>

</body>

</html>

@JayMMar 11.2006 — #I would recommend the book Beginning Javascript by Wrox publications. The author of the book is Paul Wilton. The word "beginning" is really an understatement because by the end of the book you're an intermediate javascript developer. This will give you the necessary skills to become a professional javascript developer.

@menunesauthorMar 14.2006 — #This is part two . . . thanks to help on this post and by searching help from other posts, I've gotten my form to read user's input (name address, membership status) and to feed back the users input plus the correct pricing information.

I don't know why my script is not writing back on my original page, but i've fed it all bck using document.write information.

When I test my page, i enter information into the form and check off membership status (action is based on status entry), the page refreshes writing back all of my stationary information, but in order for it to write out the product information that is described in the loop, I have to refresh the page. Am I missing something (well ok that's rather obvious :rolleyes: & I'm heading to the bookstore this afternoon for the suggested book)??

Here is what I have:

[code=php]
 <html>
 <head>
 <title></title>
 </head>
 <script language="JavaScript" >
 
 function getPrice(ins)
 {
 // running list of nace products for the order form
 //match array id numbers with member non member pricing based on user input
 //calculate cost using simple math of user input variable times cost
 
 product = new Array(3);
 
 product[0] = "2004 Employer Benchmark Survey: College Recruiting Status Report 330410BS";
 product[1] = "2004 Experiential Education Survey Report 330404EE";
 product[2] = "2004 National Meeting CD-ROM 26040CD";
 
 memprice = new Array(3);
 
 memprice[0] ="39.95";
 memprice[1] = "75.00";
 memprice[2] = "129.00";
 
 nonmemprice = new Array(3);
 
 nonmemprice[0] ="69.95";
 nonmemprice[1] = "150.00";
 nonmemprice[2] = "199.00";
 
 //set the counter to zero
 var counter = 0;
 
 //assign input fields from form to be variables
 
 var nm=document.userinfo.name.value;
 var org=document.userinfo.org.value;
 var add=document.userinfo.address.value;
 var csz=document.userinfo.csz.value;
 var email=document.userinfo.email.value;
 var phone=document.userinfo.phone.value;
 var type=document.userinfo.prodtype.value;
 
 //write back user fields
 document.write ("<h2>Your Information </h2>");
 document.write ("<p>",nm,"</p>");
 document.write ("<p>",org,"</p>");
 document.write ("<p>",add,"</p>");
 document.write ("<p>",csz,"</p>");
 document.write ("<p>",email,"</p>");
 document.write ("<p>",phone,"</p>");
 
 document.write("<h2>Product List for ", type, "</h2>");
 
 //write out the table header
 
 document.write ("<table width='100%' border='0' cellspacing='0' cellpadding='3'>");
 document.write ("<tr><td>Product Name</td> <td>Product Cost</td><td>Desired Quantity</td><td>Total Cost</td></tr>");
 
 
 //continue through the length of the product array
 
 while (counter < product.length)
 {
 var price = nonmemprice[counter];
 if (ins == 0)
 price =memprice[counter]
 
 document.write ("<tr><td>", product[counter], "</td> <td>$", price, "</td><td>Desired Quantity</td><td>Total Cost</td></tr>");
 
 counter++;
 }
 }
 
 document.write("</table>");
 
 </script>
 <body>
 <p>Please complete the information below for the Product Order Form </p>
 <form name="userinfo" >
 <p>Name: 
 <input type="text" name="name">
 <br>
 Organization: 
 <input type="text" name="org">
 <br>
 Product List for: 
 <select name="prodtype">
 <option value="All Products" selected>Select One</option>
 <option value="HR/Staffing Professionals">HR/Staffing Professional</option>
 <option value="Career Services Professionals">Career Services Professional</option>
 <option value="All Products">All Products</option>
 </select>
 <br>
 Address: 
 <input type="text" name="address">
 <br>
 City, State, Zip: 
 <input type="text" name="csz">
 <br>
 E-mail Address: 
 <input type="text" name="email">
 <br>
 Phone Number: 
 <input type="text" name="phone">
 </p>
 <p>
 <input type="radio" name="status" value="1" onclick="if(this.checked)getPrice(0); else getPrice(1);">
 NACE member <br>
 <input type="radio" name="status" value="1" onClick="if(this.checked)getPrice(1); ">
 Not NACE member</p></form>
 <p></p>
 <p> </p>
 
 
 </body>
 </html>
 [/code]

@SelrachMar 14.2006 — #document.write() occurs, everything in the page is overwritten. It would be better to use the DOM to get a particular element in the page then write out the data to its innerHTML (or if you want to be completely proper use the DOM to create all the elements you need).

@SelrachMar 14.2006 — #Try this, I believe its what you are looking for...I tooks some liberties however.

[CODE]
 <html>
 <head>
 <title></title>
 </head>
 <script language="JavaScript" >
 
 function getPrice(ins)
 {
 // running list of nace products for the order form
 //match array id numbers with member non member pricing based on user input
 //calculate cost using simple math of user input variable times cost
 
 product = new Array(3);
 
 product[0] = "2004 Employer Benchmark Survey: College Recruiting Status Report 330410BS";
 product[1] = "2004 Experiential Education Survey Report 330404EE";
 product[2] = "2004 National Meeting CD-ROM 26040CD";
 
 memprice = new Array(3);
 
 memprice[0] ="39.95";
 memprice[1] = "75.00";
 memprice[2] = "129.00";
 
 nonmemprice = new Array(3);
 
 nonmemprice[0] ="69.95";
 nonmemprice[1] = "150.00";
 nonmemprice[2] = "199.00";
 
 //set the counter to zero
 var counter = 0;
 
 //assign input fields from form to be variables
 
 var nm=document.forms[0].name.value;
 var org=document.forms[0].org.value;
 var add=document.forms[0].address.value;
 var csz=document.forms[0].csz.value;
 var email=document.forms[0].email.value;
 var phone=document.forms[0].phone.value;
 var type=document.forms[0].prodtype.value;
 
 var text = '';
 
 //write back user fields
 text+="<h2>Your Information </h2>";
 text+="<p>"+nm+"</p>";
 text+="<p>"+org+"</p>";
 text+="<p>"+add+"</p>";
 text+="<p>"+csz+"</p>";
 text+="<p>"+email+"</p>";
 text+="<p>"+phone+"</p>";
 
 text+="<h2>Product List for ", type, "</h2>";
 
 //write out the table header
 
 text+="<table width='100%' border='0' cellspacing='0' cellpadding='3'>";
 text+="<tr><td>Product Name</td> <td>Product Cost</td><td>Desired Quantity</td><td>Total Cost</td></tr>";
 
 
 //continue through the length of the product array
 
 while (counter < product.length)
 {
 var price = nonmemprice[counter];
 if (ins == 0)
 price =memprice[counter]
 
 text+="<tr><td>"+ product[counter]+ "</td> <td>$"+ price+ "</td><td>Desired Quantity</td><td>Total Cost</td></tr>";
 
 counter++;
 }
 text+="</table>";
 document.getElementById("outputField").innerHTML = text;
 }
 
 </script>
 <body>
 <p>Please complete the information below for the Product Order Form </p>
 <form name="userinfo" >
 <p>Name:
 <input type="text" name="name">
 <br>
 Organization:
 <input type="text" name="org">
 <br>
 Product List for:
 <select name="prodtype">
 <option value="All Products" selected>Select One</option>
 <option value="HR/Staffing Professionals">HR/Staffing Professional</option>
 <option value="Career Services Professionals">Career Services Professional</option>
 <option value="All Products">All Products</option>
 </select>
 <br>
 Address:
 <input type="text" name="address">
 <br>
 City, State, Zip:
 <input type="text" name="csz">
 <br>
 E-mail Address:
 <input type="text" name="email">
 <br>
 Phone Number:
 <input type="text" name="phone">
 </p>
 <p>
 <input type="radio" name="status" value="1" onclick="if(this.checked)getPrice(0); else getPrice(1);">
 NACE member <br>
 <input type="radio" name="status" value="1" onClick="if(this.checked)getPrice(1); ">
 Not NACE member</p></form>
 <p></p>
 <p id='outputField'> </p>
 
 
 </body>
 </html>
 [/CODE]

@menunesauthorMar 14.2006 — #SelRach -- I used your suggestion but got a runtime error on line 77, char 1 : [code=php]document.getElementById("outputField").innerHTML = text;[/code]

since i'm not familiar at all with how you did this, all I can do is check for typos and even then i'm not sure i'd recognize one.

I did not know that document.write rewrites the whole page, but now that you pointed it out is seems painfully obvious. :o

I will go back through my notes to see what info I have about using the DOM

One more thing: so if I understand it the way you re-wrote below, when I'm naming a form input field as a variable, I don't need to specify the exact form name? you have: var nm=document.forms[0].name.value;

where I had var nm=document.userinfo.name.value;

Thanks ever so for lending your expertise!

Also in #JavaScript _↴

IE bug: stack overflow Image Gallery onfocus to highlight a thumbnail Print()

Success!

Help @menunes spread the word by sharing this article on Twitter...

Tweet This

Novice needing form help

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Novice needing form help

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴