Help with form

**lschena** · 08-17-2011, 02:46 AM

Hello,

Have mercy on me please, I am a total beginner. For an exercise/project, I want to make a form that a user would select one of two checkboxes, "Cappaccino" and "Latte" and the user would then select two radio buttons "Expensive" and "Inexpensive". Then they would click a "Check Form" button in which a box appears stating what they chose along with a suggestion of a coffee machine that meets their criteria.

The code I have below only states the selections the customer makes in the box after the "Check Form" is clicked but not a suggestion of a product. I wanted to reformat it into what I wanted but got stuck and could not even make it work as the original source had it working not sure why. This is as far as I got and below my experimental code is the original source code I got from a book. Please help and try to be a specific as possible as I am a complete beginner and am trying to understand this as best as I can.

If it is too difficult to show me how to get it working as I wanted with the suggestion of a product, how then can I get it to work as the original method of just showing the users choices only in the box after "Check Form" is clicked? Help please-I am having a tough time with this!

Here is my code I am working with as a template but can't get it to work in any way after the Check form button is clicked:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	
	<title>Cappaccino or Coffee Maker Features</title>
	<style type="text/css">

body {
		margin:0;
		padding:40px;
		background:#fff;
		font:100% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
	}

	h1{
		font-size:180%;
		font-weight:normal;
		color:#555;
	}
	
	h2{
		clear:both;
		font-size:160%;
		font-weight:normal;
		color:#555;
		margin:0;
		padding:.5em 0;
	}
	
	a {
		text-decoration:none;
		color:#f30;	
	}
	
	p {
		clear:both;
		margin:0;
		padding:.5em 0;
	}
	
	pre {
		display:block;
		font:100% "Arial";
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		overflow:auto;
		width:800px;
	}


</style>

<script type="text/javascript">

    var machineTypeIndex = 0;

    function machineType_onclick(machIndex)
    {
        var returnValue = true;
        if (machIndex == 1)
        {
            returnValue = false;
            alert("Sorry that cappaccino machine is currently unavailable");
            // Next line works around a bug in IE that doesn’t cancel the
            // Default action properly
            document.form1.machineType[machineTypeIndex].checked = true;
        }
        else
        {
            machineTypeIndex = machIndex;
        }
        return returnValue;
    }

    function btnCheck_onclick()
    {
        var controlIndex;
        var element;
        var numberOfControls = document.form1.length;
        var compSpec = "Your chosen cappaccino machine is ";
        compSpec = compSpec + document.form1.machineType[machineTypeIndex].value;
        compSpec = compSpec + "\nWith the following additional features\n";
        for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
        {
            element = document.form1[controlIndex];
            if (element.type == "checkbox")
            {
                if (element.checked == true)
                {
                    compSpec = compSpec + element.value + "\n";
                }
            }
        }
        alert(compSpec);
    }
</script>

</head>


<body>

<form action="" name="form1">
    <p>
        Tick all of the features you want included on your machine
    </p>
        
<table>
    <tr>
        <td>
           Cappaccino Maker
        </td>
        <td>
        <input type="checkbox" name="chkCappa" value="Cappaccino" />
        </td>
    </tr>
    <tr>
        <td>
           Latte Maker
        </td>
        <td>
        <input type="checkbox" name="chkLatte" value="Latte" />
        </td>
    </tr>
</table>
    <p>
        Select the price range you would like
        </p>
        <table>
            <tr>
                <td>
                    <input type="radio" name="pricerange" checked="checked"
                        onclick="return pricerange_onclick(0)" value="budget" />
                </td>
                <td>
                    Budget
                </td>
                <td>
                    <input type="radio" name="pricerange" value="expensive" 
                        onclick="return pricerange_onclick(1)"  />
                </td>
                <td>
                    Expensive
                </td>
            </tr>
        </table>
        <input type="button" value="Check Form" name="btnCheck" 
            onclick="return btnCheck_onclick()" />
    </form>

</body>

</html>

Original Source Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 7: Example 6</title>
    <script type="text/javascript">

    var radCpuSpeedIndex = 0;

    function radCPUSpeed_onclick(radIndex)
    {
        var returnValue = true;
        if (radIndex == 1)
        {
            returnValue = false;
            alert("Sorry that processor speed is currently unavailable");
            // Next line works around a bug in IE that doesn’t cancel the
            // Default action properly
            document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;
        }
        else
        {
            radCpuSpeedIndex = radIndex;
        }
        return returnValue;
    }

    function btnCheck_onclick()
    {
        var controlIndex;
        var element;
        var numberOfControls = document.form1.length;
        var compSpec = "Your chosen processor speed is ";
        compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;
        compSpec = compSpec + "\nWith the following additional components\n";
        for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
        {
            element = document.form1[controlIndex];
            if (element.type == "checkbox")
            {
                if (element.checked == true)
                {
                    compSpec = compSpec + element.value + "\n";
                }
            }
        }
        alert(compSpec);
    }
    </script>
</head>
<body>
    <form action="" name="form1">
        <p>
            Tick all of the components you want included on your computer
        </p>
        <table>
            <tr>
                <td>
                    DVD-ROM
                </td>
                <td>
                    <input type="checkbox" name="chkDVD" value="DVD-ROM" />
                </td>
            </tr>
            <tr>
                <td>
                    CD-ROM
                </td>
                <td>
                    <input type="checkbox" name="chkCD" value="CD-ROM" />
                </td>
            </tr>
            <tr>
                <td>
                    Zip Drive
                </td>
                <td>
                    <input type="checkbox" name="chkZip" value="ZIP Drive" />
                </td>
            </tr>
        </table>
        <p>
            Select the processor speed you require
        </p>
        <table>
            <tr>
                <td>
                    <input type="radio" name="radCPUSpeed" checked="checked"
                        onclick="return radCPUSpeed_onclick(0)" value="3.8 GHz" />
                </td>
                <td>
                    3.8 GHz
                </td>
                <td>
                    <input type="radio" name="radCPUSpeed" value="4.8 GHz" 
                        onclick="return radCPUSpeed_onclick(1)" />
                </td>
                <td>
                    4.8 GHz
                </td>
                <td>
                    <input type="radio" name="radCPUSpeed" value="6 Ghz" 
                        onclick="return radCPUSpeed_onclick(2)"  />
                </td>
                <td>
                    6 GHz
                </td>
            </tr>
        </table>
        <input type="button" value="Check Form" name="btnCheck" 
            onclick="return btnCheck_onclick()" />
    </form>
</body>
</html>

Thanks a bunch!
Laurie

**Minos** · 08-17-2011, 02:15 PM

Okie dokie, I noticed you had posted another question which I assume pertains to the same project, so rather than simply giving you another less than elegant solution, I'm going to help by taking you step by step through the original code and explain how and why, and help fix your code. Once we get back to square one we can work on adding features

.

Let's start with the javascript:

Code:

<script type="text/javascript">

 var radCpuSpeedIndex = 0;

 function radCPUSpeed_onclick(radIndex){
  var returnValue = true;
  if (radIndex == 1){
   returnValue = false;
   alert("Sorry that processor speed is currently unavailable");
   // Next line works around a bug in IE that doesn’t cancel the
   // Default action properly
   document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;
  }else{
   radCpuSpeedIndex = radIndex;
  }
  return returnValue;
 }

 function btnCheck_onclick(){
  var controlIndex;
  var element;
  var numberOfControls = document.form1.length;
  var compSpec = "Your chosen processor speed is ";
  compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;
  compSpec = compSpec + "\nWith the following additional components\n";
  for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++){
   element = document.form1[controlIndex];
   if (element.type == "checkbox"){
    if (element.checked == true) compSpec = compSpec + element.value + "\n";
   }
  }
  alert(compSpec);
 }
</script>

Cleaned up the formatting a little, just so I could read it better. Okay so the first thing the script does is create a global variable called radCpuSpeedIndex and set it to 0. This variable is what is being used to tell the code which of the radio buttons has been clicked.

How? The next thing in the code is a function called radCpuSpeed_onclick, which is run when the user clicks one of the radios (<input type="radio" name="radCPUSpeed" value="4.8 GHz"
onclick="return radCPUSpeed_onclick(1)"/>). The first part of this function checks to see if the user selected 4.8 GHz which apparently is not in stock. (Notice on the radio button it calls radCPUSpeed_onclick(1), which sets the radIndex variable to 1. If they selected a different radio button, it updates radCpuSpeedIndex to whatever number was sent. step one is to verify that this is the functionality you want (the entire purpose of this function is simply to be able to flag items as out of stock).

Now, how does this compare to your code? You create the global index variable, and the function appears to be sound. But this function is never fired. If you look at your version of the radio buttons, when they are clicked they call a function called pricerange_onclick(somevariable), which doesn't exist. Your version of the function is called machineType_onclick. You can change either one, as long as they end up the same.

The next function is btnCheck_onclick(). Obviously, this function is called when the form button is clicked. Which is done correctly in your code. You correctly create the variables and get your form length, but again there is a mismatch. When the original code says document.form1.radCPUSpeed[radCpuSpeedIndex].value, it is an address. It is thinking "somewhere in this document is a form called form1 and in that form there should be something called radCPUSpeed." Well, if you look at the radio buttons, they are named radCPUSpeed. In your version, the function is looking in the form1 for something called machineType. Again, this doesn't exist. Your radio buttons are called pricerange.

I believe fixing those errors will get you back to square one, and once we confirm that we can work on adding functionality. Hope that was somewhat educational.

**lschena** · 08-17-2011, 08:04 PM

Thank you so very much for your help. I have not had a chance to test this and really understand it yet but when I do, I will let you know to see if I can configure it to work as I had originally hoped. I will post back either tonight or tomorrow.

Are you from Salem? I am from Methuen, MA.

Thread: Help with form

Thread Tools

Search Thread

Help with form

The Following User Says Thank You to Minos For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions