Need a little help on this Javascript.

[Tasmanian Devil]

Hello~
I was needing a little help with this script if someone can help. This is a working page (http://s88434475.onlinehome.us/test.html) of the script. The script is to make sure at least one radio button is selected and the ranking is picked as well as needing in the 00-00 input box, four numbers seperated by the dash and can only have a max of two on either side of the dash. Also I need to have the first name input box to have at least six letters and allow one space. As you can see on the page, I have it check for the format but it still submits the form without correcting the problems. I do not know if it would be better to have it set up like input - input for two numbers each input and then one for the first name and one for the last name. Can someone help me out on what they think I should do?

Thanks
Devil

P.S. The next page with the php, is not the correct php page that you should see but it works for the time being.

[David Harrison]

Try doing this:



<form onsubmit="return false;" name="test_form" method="post" action="/message_sent.php">

<input type="submit" value="Send" name="button" onclick="return checkRadios(this);">

[Tasmanian Devil]

lavalamp~
That helped me out some what, the only problem is that the name will not let me submit it.

Thanks
Devil

[David Harrison]

Oops, try this instead then.



var temp=false;

--></script>

<form onsubmit="return temp;" name="test_form" method="post" action="/message_sent.php">

<input type="submit" value="Send" name="button" onclick="temp=checkRadios(this);">

[Tasmanian Devil]

lavalamp~
Now it submits the form even if the number input is invalid. Here is a page (http://s88434475.onlinehome.us/test.html) that has the updated info that you had me try.

Thanks
Devil

[gasman]

I'm only starting with JS but you have the following?

<td width="24" height="20">
<input type="radio" name="radiobutton1" value="Test1">
</td>
<td width="75" height="20">Test1</td>
<td width="24" height="20">
<input type="radio" name="radiobutton1" value="Test2">
</td>

and

<td width="24">
<input type="radio" name="radiobutton2" value="Test3">
</td>
<td width="75">Test3</td>
<td width="24">
<input type="radio" name="radiobutton2" value="Test4">
</td>

surely the names must be unique?, or am I missing something?

Looks like copy and paste, but not changing to new names.

Also the logic looks wrong. you are checking for not checked as you go thru the loop. I found you can check 2 radio buttons and it all goes to pot. You need to check if a radio button was clicked at the end of the loop, not in the middle of the loop. Once you check one button the others by default will not be checked and the first one not checked will present an error. I checked radio 4 and got an error 'please check an answer for radio 1'

[Tasmanian Devil]

gasman~
do you have a idea what I can do? Do you understand what I am trying to do?

Thanks
Devil

[gasman]

Not quite, your code is more than I know in JS, but the logic should be the same. Your test page allows 2 radio buttons to be selected, then I get a message about nn-nn, but I can get my name and 'Test' shown on a new page playing around with it. I do not know how JS processes radio buttons, but if one is checked and the others are not automatically cleared, then you need to do that manually. You have a proble in the loop as far as I can see with the logic as I mentioned before. I'm new to JS but have programmed in other languages so the logic remains the same.

If you test the buttons in the loop, then you will allways find one not set. As I mentioned before, that check needs to be done at the end of the loop. Set a count, store the number of the checked radio button, but only then can you check them.

If I check radio1, the by default 2, 3 & 4 will be unchecked and the error comes up on radio 2. This is what happens on that page.

Your code is admittedly more complex than I know, so I can not see what you are trying to achieve, but I can see that the logic is wrong when testing the radio buttons.

Does that help at all?

[gasman]

Ok,

I looked at the book I have, and it suggests the following.

Create a variable with

var group = document.radioform.myRadio

then loop around it

for (var i=0; i<group.length; i++) {
if (group[i].checked) break;
}
if (i==group.length) return alert("No button checked")'


In the radio buttons declare them all as name="myRadio"

This way if you find one selected you exit, if not and you reach the end of the loop, then nothing has been selected and you show an error.

Hope this helps.

[David Harrison]

I just assumed that your validation was right. Never mind, here's one of my very own.

For the name check I simply temporarily remove all whitespace characters and check that the length isn't 0.

I have made sure that no field is created empty (I have used value=" ") to comply with the WCAG (http://www.w3.org/TR/WAI-WEBCONTENT/#gl-interim-accessibility) checkpoint 10.2 (I have also used fieldsets, lengends and labels to comply with checkpoint 10.4).

[Tasmanian Devil]

lavalamp~
I thought I had it coded it right but I guess I was WRONG:( I was wondering if the code could be adjusted to say for example how much the user likes you then another set of radio buttons to ask them how much they like me?

Thanks
Devil

P.S. I am grateful that you are able to help me out

[David Harrison]

Originally posted by Tasmanian Devil
I was wondering if the code could be adjusted to say for example how much the user likes you then another set of radio buttons to ask them how much they like me?Well it's almost what you wanted. ;)

This new code allows you to simply fill in the names of the groups of radio buttons you want to check and the error message when the user gets it wrong:


var radcheck=new Array();
radcheck[radcheck.length]=new Array("lava","\\nBlasphemy!!! You did not select how much you like lavalamp!!!");
radcheck[radcheck.length]=new Array("taz","\\nOi!!! You didn\'t select how much you don't like Tasmanian Devil!!!");
The only problem is that all of the radio buttons are checked before other form fields so the error messages will be out of sequence if you scatter the radio buttons around the form.

I have used eval for sheer simplicity, some consider it to be outdated and say that it should hardly ever be used. However I don't know the JavaScript (and don't know where to find it) to get the script to do the same job without using eval.
If fredmv (or someone else) wants to come along and enlighten me then I will use that code, until then it's strictly eval.

[Tasmanian Devil]

lavalamp~
I have one more thing if you can help me out? Below is your page with two pulldowns that have to be ranked. One pulldown has to have the #1 and the other has to have #2 in any order. I just do not know how to add the script to yours and make them work together, can you help?

<html> <head>
<title>Tasmanian Devil 2</title>
<script type="text/javascript">
var badrank;
function validator() {
badrank = false;
rankem(1,16);

return badrank
}
function rankem(question, q_size) {
var aLert1 = "";
var aLert2 = "";

var cal = "abcdefghijklmnopqrstuvwxyz";
var a = 0;
var irate = "rank" + question;
irate = new Object();
var myrate = "";

for (var x=0;x<q_size;x++) {
myrate = "q"+question+cal.charAt(x);
irate[x] = document.forms['test_form'][myrate].selectedIndex
if (irate[x]) {
a++
for (var y=0;y<x;y++) {
if (irate[y] == irate[x]) {
aLert1 = "Please use each rank each team only once.\n";
}
}
}
}
if (a != q_size) {
aLert2 = "Please rank all all of the teams.\n";
}
var aLert = aLert1 + aLert2;
badrank = true
if (aLert) {
alert(aLert);
badrank = false;
}
}
</script>

<script type="text/javascript"><!--

var message, temp, n, o;

var radcheck=new Array();
radcheck[radcheck.length]=new Array("lava","\\nBlasphemy!!! You did not select how much you like lavalamp!!!");
radcheck[radcheck.length]=new Array("taz","\\nOi!!! You didn\'t select how much you don't like Tasmanian Devil!!!");

function validate(f){message=""

for(o=0;o<radcheck.length;o++){

eval('for(n=0;n<f.'+radcheck[o][0]+'.length;n++){if(f.'+radcheck[o][0]+'[n].checked){break;}}');
eval('if(n==f.'+radcheck[o][0]+'.length){message+="'+radcheck[o][1]+'";}');

}

temp=f.numdashnum.value;

while(temp.length<5){temp+="a";}

if(temp.substring(0,2).replace(/\d/g,"").length==2){message+="\nYou did not enter two numbers for the first two characters!"}
if(temp.substring(2,3)!="-"){message+="\nThe third character is not a dash!"}
if(temp.substring(3,5).replace(/\d/g,"").length==2){message+="\nYou did not enter two numbers for the last two characters!"}

if(f.name.value.replace(/\s/,"").length==0){message+="\nYou didn't enter your name!"}

if(message.length==0){return true;}
else{alert("You have made the following errors in the form:\n"+message);return false;}

}

//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<FORM onsubmit="return validate(this);" name="test_form" method="post" action="/message_sent.php">
<p>
<table border=0 width="171">
<tr valign="top">
<td width="24" height="15">
<input type="radio" name="lava" id="lava1" value="test3">
</td>
<td width="75" height="15">Greatest</td>
<td width="24" height="15">
<input type="radio" name="lava" id="lava2" value="test4">
</td>
<td width="43" height="15">Rocks</td>
<td width="92" height="15">
<select name="q1a">
<option> </option>
<option>1 </option>
<option>2 </option>
</select>
</td>
</tr>
<tr>
<td width="24">
<input type="radio" name="taz" id="taz1" value="test3">
</td>
<td width="75">Greatest</td>
<td width="24">
<input type="radio" name="taz" id="taz2" value="test4">
</td>
<td width="43">Rocks</td>
<td width="92">
<select name="q1b">
<option> </option>
<option>1 </option>
<option>2 </option>
</select>
</td>
</tr>
<tr>
<td colspan="5" height="7">
<p>
<input type="text" name="numdashnum" id="numdashnum" value=" NN-NN Format" maxlength="5">
</p>
</td>
</tr>
<tr>
<td colspan="5">&nbsp;</td>
</tr>
<tr>
<td colspan="5">
<input type="text" name="name" id="name" value=" First &amp; Last Name">
</td>
</tr>
</table>
<input type="submit" value="Send" name="submit">
</form>
</body>
</html>

Thanks
Devil

[David Harrison]

I'll take a look but can you go back and stick it between some [code] tags? Easier to copy and paste.

[David Harrison]

OK then, don't use [code] tags.

Here's a script that works for two dropdowns, any more and it'll need tinkering with.

[Tasmanian Devil]

lavalamp~
One last question man, how do I edit this code below the correct way so I can add four more pulldows?


if(f.sel1.selectedIndex>0 && f.sel2.selectedIndex>0 && f.sel1.selectedIndex==f.sel2.selectedIndex){message+="\nYou selected the same option for both dropdowns!";}


Thanks
Devil

[Tasmanian Devil]

lavalamp~
Is there a better way to code the following code so If I add say five more to have seven dropdowns that it will not be such a mess of a code?


if(f.sel1.selectedIndex>0 && f.sel2.selectedIndex>0 && f.sel1.selectedIndex==f.sel2.selectedIndex){message+="\nYou selected the same option for both dropdowns!";}


Thanks
Devil
:D

[Tasmanian Devil]

bump

[David Harrison]

I'm still contemplating the best way to do it. I might post something a bit later.

[Tasmanian Devil]

lavalamp~
Thanks for your help, sorry man

Thanks
Devil

[David Harrison]

Here's a little something.

[Tasmanian Devil]

lavalamp~
:D you are the man!!!:D

Thanks
Devil

P.S. I can work out what I need to do with it

[David Harrison]

Happy to help. :)