Hi I have a problem with my javascript the functions are not working, and I have a little
knowledge about JScript.

Firstly, the user will select from the list box a designer name, then a flower,
and then a cake. The total will come up when the user clicks on check price. Or
i can deleted the check price button i can automatically add items there as they select.
I have tried my best even worked with my friend to solve the problem however it still
isnt working!! Dont know where the problem is!

And when the user doesnt check the terms and conditions and click Proceed it will give
an error saying Please accept the terms and conditons...and if the user checks the box and
everything is fine the user will get their name which is message1 and contact number message 2
the items chosen and product total as u can see at the function stage i have declared if function!
It still doesnt work...

I am so used to Visual Basic, and this is new to me.

Could someone please help me to solve the problem?

Thank you in advance

<html>
<head>
<title>Online Store</title>
<script language="javascript">
<!--

var proceeed=0;
function getRadioValue(radioArray)
{
var i
for (i = 0; i < radioArray.lenght; i++)
{
  if (radioArray[i].checked) return radioArray[i].value
}
return ""
}

function getSelectedText(selectList) {
return selectList.option[selectList.selectedIndex].text
}

function getSelectedValue(selectList) {
return selectList[selectList.selectedIndex].value;
}

function view(form)
{
var designertype=getSelectedText(form.designer);
var message1=form.message1.value;
var message2=form.message2.value;
var flowertype=getRadioValue(form.flower);
var caketype=getRadioValue(form.cake);
var totalprice=0;

totalprice=designertype+caketype+flowertype;

if(message1 && message2 != "")
	{
 	alert("Please enter your Personal Details and Contact Number!");
	}
else
	{
 	 themessage= "Thank you: " + form.message1.value + " . We will contact you shortly from : " + form.message2.value + ";
	}

form.price.value=totalprice;

if (proceed==1)
{
	if (!form.terms.checked)
	{
	alert("You must read and accept the terms and conditions");
	}
	else
        {
	confirm("You have ordered a " + designertype + " dress, " + flowertype + " flower, " + caketype + " cake. \nThe total price is: " + totalprice + " .\n");
	}
}
}


//--!>
</script>

</head>
<body>

<table border="0" width="65%">
	<tr>

		<td colspan="4">
		<a name="tp"><img border="0" src="finalbanner.jpg" width="919" height="242" align="right" /></td>
	</tr>
	<tr>
		<td width="73%" colspan="4">
		<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b><font color="#FF00FF">
		<font face="Verdana" size="2"> 

<a href="http://users.wmin.ac.uk/~w1176770/coursework/intro.html" style="text-decoration: none"><font color="#FF00FF">Introduction</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  

<a href="topMainPage.html" style="text-decoration: none"><font color="#FF00FF">Main Page</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


	
<a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()" style="tex\t-decoration: none">Go To Store</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="http://users.wmin.ac.uk/~w1176770/coursework/feedback.html" style="text-decoration: none"><font color="#FF00FF">Feed Back</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
<a href="http://users.cscs.wmin.ac.uk/~w1182867/sfe407/cw/resumes.html" style="text-decoration: none"> <font color="#FF00FF">Resumes</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		
<a href="quiz.html" style="text-decoration: none"><font color="#FF00FF">Quiz</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="contact.html" style="text-decoration: none"><font color="#FF00FF"> Contact</font><font face="Brush Script MT" size="4"> </font></b> </td> 
	
        </tr>
	
<tr>
		<td width="99%" height="23" align="center" colspan="4" bgcolor="#0000FF">
		<b><font face="Verdana" size="2" color="#FFFFFF"><blink>Now you are in the Go To Store Page</blink></font></b></td>
</tr>


<tr>
</table>
<b>Welcome to our online store.<b><br /> 
Here below you can choose the wedding dress designer, flower, and even the cake! 
<br />
The system will automatically give you a total price for the items you have chosen.<br /> Please include your personal details so we can contact
you to confirm the order and take payment and delivery details.<br />
<br />
Thank you for shopping with us.<br />
  

<form>
<table border="5" cellpadding="10" cellspacing="4" bgcolor="DA70D6" width="56%">
<tr>
<td colspan="2"> <h3>Please choose the dress designer:</h3>
<select name="designer" onChange="view(this.form)">
<option value = 0  >              </option>
<option value = 700>Alice James 2008</option>
<option value = 710>Allie Renee</option>
<option value = 720>Annette Carey Couture 2008</option>
<option value = 730>Benjamin Roberts 2008</option>
<option value = 740>Berkertex at Littlewoods</option>
<option value = 750>Berketex Bride</option>
<option value = 760>Blue by Enzoani</option>
<option value = 770>Cameron Blake</option>
<option value = 780>Caroline Castigliano</option>
<option value = 790>Constantina</option>
<option value = 800>Constantina by Enzoani</option>
<option value = 810>Dessy Collection 2009</option>
<option value = 820>Dessy Girl - Flowergirls 2009</option>
<option value = 830>Dessy Sandals 2009</option>
<option value = 840>Eternity  Bride</option>
<option value = 850>Evenings by Mon Cheri</option>
<option value = 860>Impression Bridal</option>
<option value = 870>Justin Alexander</option>
<option value = 880>Kosibah Creations</option>
<option value = 900>Le Gala</option>
</select>
</td>
</tr> 

<td colspan="2"bgcolor="white"> <h3>Please choose the flower:</h3>
<input type="radio" name="flower" value="40"
onClick="view(this.form)">
<img src="flower1.jpg" width="90" align"middle">

<input type="radio" name="flower" value="45"
onClick="view(this.form)">
<img src="flower2.jpg" width="90" align"middle">

<input type="radio" name="flower" value="50"
onClick="view(this.form)">
<img src="flower3.jpg" width="90" align"middle">

<input type="radio" name="flower" value="40"
onClick="view(this.form)">
<img src="flower4.jpg" width="90" align"middle">

<input type="radio" name="flower" value="30"
onClick="view(this.form)">
<img src="flower5.jpg" width="90" align"middle"><br />

<input type="radio" name="flower" value="40"
onClick="view(this.form)">
<img src="flower6.jpg" width="90" align"middle">

<input type="radio" name="flower" value="45"
onClick="view(this.form)">
<img src="flower7.jpg" width="90" align"middle">

<input type="radio" name="flower" value="30"
onClick="view(this.form)">
<img src="flower8.jpg" width="90" align"middle">

<input type="radio" name="flower" value="50"
onClick="view(this.form)">
<img src="flower9.jpg" width="90" align"middle">

<input type="radio" name="flower" value="50"
onClick="view(this.form)">
<img src="flower10.jpg" width="90" align"middle">

</td>
</tr>
<tr>
<td bgcolor="white"> <h3>Please choose the cake:</h3>

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake1.jpg" width="90" align"middle">

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake2.jpg" width="90" align"middle">

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake3.jpg" width="90" align"middle"><br />

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake4.jpg" width="90" align"middle">

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake5.jpg" width="90" align"middle">

<input type="radio" name="cake" value="50"
onClick="view(this.form)">
<img src="cake6.jpg" width="90" align"middle">
</td>
<td width="10%">
<h3>Personal Details:</h3> 

<h4>First & Last Name:
<input type="text" name="message1" size="30">
Contact Number:
<input type="number" name="message2" size="11">
</h4>
</td>
</tr>
<tr>
<td colspan="2">
<b>Total Price: &pound;</b>
<input type="text" name="price" size="4">
<input type="button" value="check price" onClick="view(this.form)"> <br />
</td>
</tr>
<tr>
<td colspan="2" >
<input type="checkbox" name="terms" value="read" > 
<b>I have read and accepted the <ahref="tac.html">terms and conditions</a></b> <br />
<br />


<input type="button" name="proceed" value="Proceed with order" onClick="proceed=1;view(this.form)">
  
</td>
</tr>


</form>
</body>
</html>

I'l just provide what it needs and the rest should go to you.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Online Store</title>
<style type="text/css">
html, body {
   background-color : #fff;
   color : #000;
   border : none;
   font: normal normal normal 95%/1.4 "Trebuchet MS", Tahoma, Verdana, Arial, Sans-Serif;
   min-width : 800px;
   text-align : center;
   width : auto; }

div, form {
   border : none;
   margin : 0%;
   padding : 0%; }
table {
   border : none;
   border-collapse: collapse;
   text-align: left;
   margin: 0%;
   padding: 0%;
   width: 100%; }
td, th {
   padding : 1em;
   vertical-align : middle;
   width : auto;
   }

div#main {
   margin : 0% auto;
   text-align : left;
   width : 100%; 
}
caption  {
  caption-side : top;
  text-align : left;
  font : 700 130% "Trebuchet MS";  
  padding-top: .500em;
  padding-left: 1em;
  padding-bottom: .500em;
  border-bottom : 1px solid;
  text-decoration : blink;
}
</style>
<script type="text/javascript">
// <![CDATA[

var isMyClient = /^[A-Za-z\s\.]+$/; 
var isContactNum = /^[0-9\-]+$/;
 var theStore = function() {
  function myId( allIds ) {
return allIds = ( document.getElementById ) ? document.getElementById( allIds ) : document.all[allIds];
   } // ID Reference 

function dress( ids ) {
 ids = ( document.getElementById ) ? document.getElementById( ids ) : document.all[ids];
 index = ids.selectedIndex;
 price = ids.options[index].value;
 myId("val2").value = ((parseInt( myId("val2").value ) ) + price * 1 ); ids.options[index].disabled = true;
};
   function getRadioValue( e ) { // This is the main key of these program -
      e = e ? e : window.event;
      t = e.target ? e.target : e.srcElement;
   if ( t.nodeName.toLowerCase() === "input" ) { 
      if ( t.type === "radio" ) {
          if ( t.checked ) {
          myId("val1").value = (( parseInt(myId("val1").value )  ) + t.value * 1); 
          t.disabled = true; 
         } else {
          myId("val1").value = "";
         }
      } if ( t.type == "button" ) { if ( t.id != "btn" ) {
          myId("txt").value = (( myId("val1").value * 1 ) + myId("val2").value * 1 ); }
   else {
      if ( !isMyClient.test( myId("fname").value ))
      alert("Please provide a valid name!");
      else if ( !isContactNum.test( myId("cn").value ))
alert("Please provide a valid contact number!");
      else if ( !myId("terms").checked )
      alert("You must read and accept the terms and conditions");
      else
      alert("Thank you for shopping!");
}
      }
   } 
};

return { // Reusable Objects
items : getRadioValue,
dress : dress,
show : myId 
  };
}();

 window.onclick = theStore.items;

// ]]>
</script>
</head>
<body>
<div id="main">
<form action="#" onsubmit="return false;">
<table summary="Online Store">
<caption>Now you are in the Go To Store Page</caption>
<tr>
<td><strong>Welcome to our online store.</strong><br /> 
Here below you can choose the wedding dress designer, flower, and even the cake!</td>
</tr>
<tr>
<td style="border-top: 1px solid; padding-top: 0;">
<input type="hidden" id="val1" value="0" />
<input type="hidden" id="val2" value="0" />
<h3>Please choose the dress designer:</h3></td>
<td style="width : 50%;border-top: 1px solid; padding-top: 0; text-align: right"><select id="designer" name="designer" onchange="theStore.dress( this.id );">
<option value="0"></option>
<option value="700">Alice James 2008</option>
<option value="710">Allie Renee</option>
<option value="720">Annette Carey Couture 2008</option>
<option value="730">Benjamin Roberts 2008</option></select>
</td>
</tr>
<tr>
<th><label for="fname">First &amp; Last Name: <input type="text" name="fname" id="fname" size="25" value="" /></label><br /><label for="cn">Contact Number: <input type="text" name="cn" id="cn" size="25" value="" /></label>
<br /><br /><label for="txt">Total Price: &pound; <input type="text" name="txt" id="txt" size="6" value="0" /></label> <input type="button" value="check price" id="btn1" name="btn1" /><br /><br />
<input type="checkbox" id="terms" name="terms" value="read" /> 
I have read and accepted the <a href="tac.html">terms and conditions</a> <br />
<br />

<input type="button" name="btn" id="btn" value="Proceed with order" />
</th>
<td style="width:50%;">
<h3>Flower Selection</h3>
<label for="flower">Flower 1 <input type="radio" name="flower" id="flower" value="45" /></label><br />
<label for="flower2">Flower 2 <input type="radio" name="flower2" id="flower2" value="45" /></label>
<h3>Cake Selection</h3>
<label for="cake">Cake 1 <input type="radio" name="cake" id="cake" value="50" /></label><br />
<label for="cake2">Cake 2 <input type="radio" name="cake2" id="cake2" value="50" /></label>
</td>
</tr>

</table>
</form>
</div>
</body>
</html>

Hi essential,

Thank you very much for your answer. I am very pleased to see quick result.

Since i dont understand much of Javascript, I only know basics of it for our module. I want to be able to understand my work rather than copy-paste and hand in. I tired my best .

My only wish is, is it possible to do this form in an easier way? Else is it possible for you to add more comments for me to grasp idea how things work?

Thank you so much in advance

As ive promised, here's the other demo:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Online Store</title>
<script type="text/javascript">
// <![CDATA[

var isFlower, isCake, div, x, isHidden1, isHidden2;

function getRadioValue() {
   isHidden1 = ( document.getElementById ) ? parseFloat(document.getElementById("val1").value) : parseFloat(document.forms["val1"].value);
   isHidden2 = ( document.getElementById ) ? parseFloat(document.getElementById("val2").value) : parseFloat(document.forms["val2"].value); // First condition applies to all modern browsers ( ff1+, IE7+, Opera and so on...)
// The other one applies to IE5-

div = document.getElementsByTagName("div"); // Getting the elements by theire tagNames.

isFlower = div["flowerSelection"].getElementsByTagName("input"); // Referenced to the flower collections.

isCake = div["cakeSelection"].getElementsByTagName("input"); // Referenced to the cake collections.

document.getElementById("btn").onclick = function() {  document.getElementById("price").value = isHidden2 + parseFloat(isHidden1);  }

document.getElementById("designer").onchange = function() {

var designerprice = form1.designer.options[form1.designer.selectedIndex].value; // Serves as a string data also, but will be converted into an integer 

// Statement ( passing the value of the selected state, into the hidden field 1 ).
// Serves as the amount of item being selected in the designer dress category
   if ( form1.designer.selectedIndex != 0 ) { // if the selected index is not equals to 0 ( PROCEED ).
      isHidden1 = designerprice;
   } // hidden field 1, now contain's the value of the selected state from lists. ( TRUE ).
   else { // Bring it back to normal state.
      isHidden1 = 0; 
   } 
};

document.getElementById("proceed").onclick = function() {
var designertype = form1.designer.options[form1.designer.selectedIndex].text; // This will gather string data from the list option  -

if ( !form1.terms.checked )
   {
   alert("You must read and accept the terms and conditions"); return false
   }
   else
        {
   confirm("You have ordered a " + designertype + " dress, " + "confusing?" + " flower, " + "confusing?" + " cake. \nThe total price is: " + (( parseFloat(isHidden1)) + isHidden2 ) + " .\n"); return true;
   }
};
   for ( x = 0; x <= isFlower.length; x++ ) { // Will perform a loop and will be incremented equals the number of input elements inside the flower collections.
         isFlower[x].onclick = function() { // Assigning an onclick event to the flower and cake items ( radio button ).
   isHidden2 = isHidden2 + parseFloat( this.value ); this.disabled = true; 
   };
         isCake[x].onclick =       function() { 
   isHidden2 = isHidden2 + parseFloat( this.value ); this.disabled = true; 
      }; 
   }
}

function view( form )
{  
// need some conversion on this two variables -
// same reference on the element's being gathered.
/*
var message1 = form.message1.value; */
var isMessage1 = form.message1.value;

/* var message2 = form.message2.value; */
var isMessage2 = form.message2.value;

/* All variables inside this function is considered as an IMPLIED GLOBAL Variable's,
   to prevent this ( IGVs normally causes a RACE CONDITION state ), so try to declare your variable's outside the function's ( or before being use ). */

var validName = /^[A-Za-z\s\.]+$/; // This expression allows alphetic character's from A to Z ( lowercase as well as uppercase letters ), plus white spaces and dot's.

var validNum = /^[0-9\-]+$/; // Allows numeric values and a minus sign.
  
// Statement ( Input field sanitation ).
   { // Start >
     { if ( !validName.test( isMessage1 )) { // If the ( First & last name ) field do not matched the validName expression ( or pattern ) then throw some alert on the user.
         alert("\nPlease provide a valid name!"); return false;
      } }
      if ( !validNum.test( isMessage2 )) {
         alert("Please provide a valid contact number!"); return false;
      } else { // Other things to say when valid information is achieved.
         alert("Thank you for shopping!");
      }
    } // END <
return true;
}


window.onload = getRadioValue;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form1" method="post" action="#" onsubmit="return view( this );">
<div>
<input type="hidden" id="val1" name="val1" value="0" /> <!-- Serves as a placeHolder for all gathered values from the select elements -->

<input type="hidden" id="val2" name="val2" value="0" /> <!-- Will be used to gather all data from the radio button's -->
<select id="designer" name="designer" size="1">
<option value="0"></option>
<option value="700">Alice James 2008</option>
<option value="710">Allie Renee</option>
<option value="720">Annette Carey Couture 2008</option>
<option value="730">Benjamin Roberts 2008</option>
</select>
<div id="flowerSelection">
<h3>Please choose the flower:</h3>
<label for="flower0"><input type="radio" id="flower0" name="flower0" value="40" /> Flower 1</label>
<label for="flower1"><input type="radio" id="flower1" name="flower1" value="45" /> Flower 2</label>
</div> <!-- This div serves as the container for the flower selections,  
            and will be used as a pointer ( or indexing reference ), 
            to easily get our specified flower item's. -->
<div id="cakeSelection">
<h3>Please choose the cake:</h3>
<label for="cake0"><input type="radio" id="cake0" name="cake0" value="50" /> Cake 1</label>
<label for="cake1"><input type="radio" id="cake1" name="cake1" value="50" /> Cake 2</label>
<br />
<br />
<label for="price"><b>Total Price: &pound;</b> <input type="text" id="price" name="price" size="4" value="0" /></label>
<input type="button" id="btn" name="btn" value="check price" /> 
<br />
<br />
</div>
<div>
<h3>Personal Details:</h3> 
<h4>First &amp; Last Name:
<input type="text" id="message1" name="message1" value="" size="30" /><br />
Contact Number:
<input type="number" id="message2" name="message2" value="" size="11" />
</h4></div>
<div><label for="terms"><input type="checkbox" id="terms" name="terms" value="read" /> 
<b>I have read and accepted the <a href="javascript:void(0);">terms and conditions</a></b></label>
<br />
<br />
<input type="submit" id="proceed" name="proceed" value="Proceed with order" accesskey="5" />
</div>
</div>
</form>

</div>
</body>
</html>

Hi
Thank you so much for your help
It has been so much helpfull.

Many thanks again!!
Nur

Hi
How can i get them to select only one RADIO BUTTON???

Thanks

It can be achieved by skipping those ids and name attributes in your radio buttons. But if you'll do that, you will also have to edit some parts of the script.

It can be achieved by skipping those ids and name attributes in your radio buttons. But if you'll do that, you will also have to edit some parts of the script.

Hi

When the user clicks on proceeed, they only get the designer name, but they cannot see the flower type and cake type.

i added

if ( !form1.terms.checked )
   {
   alert("You must read and accept the terms and conditions"); return false
   }
   else
        {
   confirm("You have ordered a " + designertype + " dress, " + flowerSelection + " flower, " + cakeSelection + " cake. \nThe total price is: " + (( parseFloat(isHidden1)) + isHidden2 ) + " .\n"); return true;
   }
};

but it didnt seem to work either...

Because the stated value of your radio button's is set into an integer (which is their price). So how would you be able get any reference on that? Unless you'll provide hidden fields and specify the type of each item.

This article has been dead for over six months. Start a new discussion instead.