Forum Moderators: open
Ive got a form which has 2 sets of radio buttons (Supplier 1 and Supplier 2) both of which have 4 buttons in each (4 buttons per row as it were). Im trying to set it up so that your only able to select a single radio button in each row or column. This is ok for each row, as each radio button has the same name.
Im trying to have a system set up whereby if a user selects 2 radio buttons in the same column, their values are compared and if matching, an alert appears asking you to change it. However this doesnt seem to be working and is causing me some grief. Any suggestions are most welcome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form name="rank" method="post" action="rerankingScript.php">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Supplier 1 </td>
<td><input name="supplier1" type="radio" value="1" onclick="compare();"></td>
<td><input name="supplier1" type="radio" value="2" onclick="comparet();"></td>
<td><input name="supplier1" type="radio" value="3" onclick="comparet();"></td>
<td><input name="supplier1" type="radio" value="4" onclick="compare();"></td>
</tr>
<tr>
<td>Supplier 2 </td>
<td><input name="supplier2" type="radio" value="1" onclick="compare();"></td>
<td><input name="supplier2" type="radio" value="2" onclick="compare();"></td>
<td><input name="supplier2" type="radio" value="3" onclick="compare();"></td>
<td><input name="supplier2" type="radio" value="4" onclick="compare();"></td>
</tr>
</table>
</form>
<SCRIPT LANGUAGE="javascript">
function compare() {
var NewCount = 0
if (document.rank.supplier1.checked == document.rank.supplier2.checked)
{supplier = supplier + 1}
if (supplier == 1)
{
alert('Pick Just Two Please')
document.rank; return false;
}
}
</SCRIPT>
</body>
</html>
Error: comparet is not defined
Line: 1
Error: supplier is not defined
Line: 37
Fixing the 'comparet' error still reports
Error: supplier is not defined
Line: 37
So you would add var supplier just to get it to run. Now we have no syntax errors. Note what happens when you put
alert(document.rank.supplier1.checked);
at the top of your function. It's undefined, and it's undefined because both supplier1 and supplier2 are arrays. You need to iterate through arrays to get at their checked values. There are a number of ways to do this, here's one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
</head>
<body>
<form name="rank" method="post" action="rerankingScript.php">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Supplier 1 </td>
<td><input name="supplier1" type="radio" value="1" onclick="compare(this.form);"></td>
<td><input name="supplier1" type="radio" value="2" onclick="compare(this.form);"></td>
<td><input name="supplier1" type="radio" value="3" onclick="compare(this.form);"></td>
<td><input name="supplier1" type="radio" value="4" onclick="compare(this.form);"></td>
</tr>
<tr>
<td>Supplier 2 </td>
<td><input name="supplier2" type="radio" value="1" onclick="compare(this.form);"></td>
<td><input name="supplier2" type="radio" value="2" onclick="compare(this.form);"></td>
<td><input name="supplier2" type="radio" value="3" onclick="compare(this.form);"></td>
<td><input name="supplier2" type="radio" value="4" onclick="compare(this.form);"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function compare(form) {
var s1 = form.supplier1;
var s2 = form.supplier2;
var c1ind,c2ind,c1val,c2val;
for (i=0;i<s1.length;i++) {
if (s1[i].checked) { c1val = s1[i].value; c1ind = i; }
if (s2[i].checked) { c2val = s2[i].value; c2ind = i; }
}
if ((c1val >0) && (c2val > 0) & (c1val == c2val)) {
s1[c1ind].checked = false;
s2[c2ind].checked = false;
alert('Pick Just Two Please');
form.focus();
return false;
}
}
</script>
But you still have a problem: if Javascript is disabled the whole thing falls down. Why don't you just use radios as they are intended and name them all the same name? Just change the values in row 1 and 2.
First of all, thanks for your help!
Im not sure what you meant by the above comment though. The basic premise is that I have 2 (or 3 or 4) different suppliers, who I will be rating from 1-4. The thing on, you can only use each rating once.
Could you just use radio buttons to achieve that?
