Help with form - more functionality [Archive]

lschena

08-18-2011, 03:08 PM

Hello,

Thank you for the help with my previous post here. I totally understand what it is going on and how and why I fixed it to work because of your great explanation and skillful teaching!! Way better than my teacher at bight school!! He is not a good teacher unfortunately (I am in a certif. program in web design)

So now I want to list several features of various cappaccino machines and another category of cost - budget, moderate and expensive. By clicking on this it will result in a box listing one or two, of a total of three or four machines that one could buy with their particular choices.

The most important thing is not what the script does but I need to understand why it does this. How would adding the functionality I want be done? If it is too complicated to explain, I am very happy with what it does now and can expand on it as is, and explain why it works. If you can go over how to make it do more, all the better. Thank you so much for making it make sense!! Excellent job! - Laurie

Here is what I have now:

[CODE]
<script type="text/javascript">

var machineTypeIndex = 0;

function machineType_onclick(machIndex)
{
var returnValue = true;
if (machIndex == 1)
{
returnValue = false;
alert("Sorry that 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>
Delonghi Cappaccino Machine
</td>
<td>
<input type="checkbox" name="chkCoffee" value="Delonghi" />
</td>
</tr>
<tr>
<td>
Solis Ultra Touch
</td>
<td>
<input type="checkbox" name="chkEspresso" value="Solis" />
</td>
</tr>
</table>
<p>
Select the price range you would like
</p>
<table>
<tr>
<td>
<input type="radio" name="machineType" checked="checked"
onclick="return machineType_onclick(0)" value="budget" />
</td>
<td>
Budget
</td>
<td>
<input type="radio" name="machineType" value="expensive"
onclick="return machineType_onclick(1)" />
</td>
<td>
Expensive
</td>
</tr>
</table>
<input type="button" value="Check Form" name="btnCheck"
onclick="return btnCheck_onclick()" />
</form>

[CODE]

Minos

08-18-2011, 06:48 PM

Hi Laurie, I will take another stab at this. Normally a site that does something similar uses a database and a server-side language to query it. As such, we are somewhat limited in what we can do, but I will show you one option using javascript.

The easiest way to accomplish this is using a two-dimensional array. An array is a variable that holds multiple pieces of data. In a 2-D array, these pieces of data are also arrays.

var machines = new Array();
machines[0]=[true,false,true,false,0,"Cheapomatic"];
machines[1]=[false,true,false,false,0, "Cheapacino"];
machines[2]=[true,false,true,true,1,"Joe++"];
machines[3]=[true,true,true,true,1, "TrueBrew"];

Note that arrays start at 0, not 1. So, if I told a script to alert(machines[0][5]); It would open an alert box that said "Cheapomatic". Basically, machines[0] is a cappucino machine, and each of the values it contains represents one of the features (or, the checkboxes in your html). I used four checkboxes as an example. In order for the user to pick it exactly, the first and third checkbox would be ticked, and the first radio button would be clicked. I hope that makes sense.

In any event, now I will introduce a function that will determine the top two selections. If you are still confused, perhaps seeing how it is used will help make sense.

function decider(){
var topPick = 0, secondPick = 0;
var topMatches = 0, secondMatches = 0;
var matches = 0;
var element;
for (i=0;i<machines.length; i++){
matches=0;
for (n = 0; n < document.form1.length; n++){
element = document.form1[n];
if (element.type == "checkbox"){
if (element.checked && machines[i][n]) matches++;
}
}
if (machineTypeIndex == machines[i][4]) matches++;
if (matches > topMatches){
secondMatches = topMatches;
secondPick = topPick;
topMatches = matches;
topPick = i;
}else if (matches > secondMatches){
secondMatches = matches;
secondPick = i;
}
}
alert(machines[topPick][5]+" or "+machines[secondPick][5]);
}

This might look daunting, but it really isn't bad. The first thing I have done is created a whole slew of variables, and set them to zero. Pretty basic. After the variables are created, we start a loop that will cycle from 0 to machines.length (in this example the length is 4, 0-1-2-3). When it starts, we set matches to 0. Then, we start another for loop, this time cycling through the number of elements in your form. We then say is the checkbox true? Is machines[0][0] true? Well, then add one to match. Then it asks the same thing about the next checkbox, and machines[0][1], and so on.

So once the second for loop ends, we should have the total number of feature matches, and now we check to see if the selected price (radio button) is also a match to the machine. machine[0][4] is 0, so if the selected radio is 0, it will add one more to matches.

Now we ask if the number of matches is the highest, and if it is, we change the old highest to the second variables, and set the highest to the current matches and machine. If it isn't the highest, we find out if it is at least higher than the second highest. If it isn't we don't care and do nothing, if it is, we replace the second highest.

Then we do ALL that over again, this time checking machine[1][0] then machine[1][1] and so on.

Once both for loops have completed, we open an alert box that simply prints the highest recommended and the second recommended.

If you need help integrating this into what you already have, let me know, the same applies if you need any clarification :)