...

View Full Version : Is this valid Javascript?



4jd
10-13-2011, 02:11 PM
<input name="1" value="1" id="1" type="radio" onClick="change(this)">
<input name="1" value="2" id="2" type="radio" onClick="change(this)">
<input name="1" value="3" id="3" type="radio" onClick="change(this)">
<br>
<input name="2" value="4" id="4" type="radio" onClick="change(this)">
<input name="2" value="5" id="5" type="radio" onClick="change(this)">
<input name="2" value="6" id="6" type="radio" onClick="change(this)">
<br>
<input name="3" value="7" id="7" type="radio" onClick="change(this)">
<input name="3" value="8" id="8" type="radio" onClick="change(this)">
<input name="3" value="9" id="9" type="radio" onClick="change(this)">
<div id="tab3continue">
Hello
</div>
<script>
var tab3_button = document.getElementById('tab3continue');
tab3_button.style.visibility = 'hidden';
function change(switchElement) {
if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {
tab3_button.style.visibility = 'visible';
} else {
tab3_button.style.visibility = 'hidden';
}
}
</script>


So I have a div(tab3continue) which is hidden and want is visible if either 1, 2, 3 are selected AND either 4, 5, 6 are selected AND either 7, 8, 9 is selected. so need one from each group to be selected to make visible.

Could someone tell me if this code could work or where I am going wrong?

Thanks
-------------
Jay

DaveyErwin
10-13-2011, 02:31 PM
do this
alert('1' || '2' || '3')
it alerts 1 so ..
if ((switchElement.value == '1' || '2' || '3' )
is the same as
if ((switchElement.value == '1' )
what you want is
if ((switchElement.value == '1' ||switchElement.value == '2' ||switchElement.value == '3' )
same with the other condition
does this make sense to you ?

++++++++++EDIT-----------
the above is just wrong
see the next post by
Old Pedant for the
correction
----------------more edits--------
If i had done ...
alert(6 == '1' || '2' || '3' )
I would have seen it's
all one expression that
returns true if comparison
is true or it returns '2' and the
'3' part is never evaluated.

4jd
10-13-2011, 03:51 PM
Sorry still learning JS. Are you trying to create a 'variable'/'alert' with the values then output it in the 'if' statement?

Where would I replace the code?

Old Pedant
10-13-2011, 07:38 PM
Davey's point is that YOUR code

switchElement.value == '1' || '2' || '3'
does *NOT* do what you think it does.

It *FIRST* evaluates the expression


'1' || '2' || '3'

and the value of that is simply

'1'

and then compares that to switchElement.value

So your code is *ACTUALLY* doing


switchElement.value == '1'

and ignoring the || '2' || '3'

Okay, so now perform that same simplification to your other || conditions and this line

if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {

is reduced to this

if ( switchElement.value == '1' && switchElement.value == '4' && switchElement.value == '7' ) {

HOWEVER...

However, that is total nonsense. Because that is saying "if the value of switchElement is '1' *AND* the value of switchElement is '4' *AND* the value of switchElement is '7' then..."

But of course there is no possible way for *ONE* value to match '1' and '4' and '7', so your condition will *NEVER* be true. NEVER.

So you will *ALWAYS* end up doing

else {
tab3_button.style.visibility = 'hidden';
}


***********

Now, tell us what you WANT to have happen and maybe we can make it do so.

4jd
10-13-2011, 07:58 PM
Think I need to go right back to basics, maybe even open a book. Thanks for your explanation guys.

What I was trying was....

have 3 groups of radio buttons, with the continue button hidden. only when all 3 groups are checked then make the continue button visible.

....that's it.

I also understand that the simplest way is to do it is to checked="checked" them and allowing the user to change them if needed but I want to avoid having them checked initially for other reasons.

If you could help out, that would be brilliant.

DaveyErwin
10-13-2011, 08:15 PM
If i had done ...
alert(6 == '1' || '2' || '3' )
I would have seen it's
all one expression that
returns true if comparison
is true or it returns '2' and the
'3' part is never evaluated.

Old Pedant
10-13-2011, 08:43 PM
Okay, for starters, ids and names can't start with a digit. (Well, names can, but only if you do some hokey things when accessing by name.)

And you don't need ids when you have names.

So how about this?


<html>
<head>
<script type="text/javascript">
// function to get the value of a group of radio buttons
// works even if there is only one button in the group:
function getRBvalue(group)
{
if ( group.length == null ) /* if only one button */
{
return group.checked ? group.value : null;
}
/* if two more more buttons */
for ( var g = 0; g < group.length; ++g )
{
if ( group[g].checked )
return group[g].value;
}
return null;
}

function change(rb)
{
var tab3 = document.getElementById("tab3continue");
var form = rb.form;
if ( getRBvalue(form.rb1) == null
|| getRBvalue(form.rb2) == null
|| getRBvalue(form.rb3) == null )
{
// if any group is unchecked, leave tab3 hidden
tab3.style.visibility = "hidden";
} else {
// only show it when each group has a button checked
tab3.style.visibility = "visible";
}
}
</script>
</head>
<body>
<form>
<input name="rb1" value="1" type="radio" onClick="change(this)"/>
<input name="rb1" value="2" type="radio" onClick="change(this)"/>
<input name="rb1" value="3" type="radio" onClick="change(this)"/>
<br/>
<input name="rb2" value="4" type="radio" onClick="change(this)"/>
<input name="rb2" value="5" type="radio" onClick="change(this)"/>
<input name="rb2" value="6" type="radio" onClick="change(this)"/>
<br/>
<input name="rb3" value="7" type="radio" onClick="change(this)"/>
<input name="rb3" value="8" type="radio" onClick="change(this)"/>
<input name="rb3" value="9" type="radio" onClick="change(this)"/>
<br/>
<div id="tab3continue" style="visibility: hidden;">
Hello
</div>
</form>
</body>
</html>

Old Pedant
10-13-2011, 08:45 PM
Whoops...Davey is correct. My operator precedence was off.

Still, the point that the value of the || expressions wasn't what you thought was correct.

siberia-man
10-14-2011, 12:17 AM
have 3 groups of radio buttons, with the continue button hidden. only when all 3 groups are checked then make the continue button visible.

Take my five pences... Let's consider some kind of storage where one bit corresponds to one whole group of radiobuttons with the same name. Each checked radiobutton sets a flag in a storage and all setted flags (this is definite numeric value) mean that a hidden field should be visible.

I wrote the example below that solves the requested issue. Some comments are present there.


<input name="rb1" value="1" id="rb1" type="radio" onClick="change(this)">
<input name="rb1" value="2" id="rb2" type="radio" onClick="change(this)">
<input name="rb1" value="3" id="rb3" type="radio" onClick="change(this)">
<br>
<input name="rb2" value="4" id="rb4" type="radio" onClick="change(this)">
<input name="rb2" value="5" id="rb5" type="radio" onClick="change(this)">
<input name="rb2" value="6" id="rb6" type="radio" onClick="change(this)">
<br>
<input name="rb3" value="7" id="rb7" type="radio" onClick="change(this)">
<input name="rb3" value="8" id="rb8" type="radio" onClick="change(this)">
<input name="rb3" value="9" id="rb9" type="radio" onClick="change(this)">
<div id="tab3continue" style="visibility: hidden;">Hello</div>
<script>
// the storage of flags. Each bit corresponds to one group of radiobuttons
var flags = 0;
function change(rb)
{
// get the name of the radiobutton
var name = rb.name;
// get only a digital part of the name
var index = name.slice(2);
// set a flag per a group
// rb1 sets 1
// rb2 sets 2
// rb3 sets 4
flags |= 1 << (index - 1);
// all flags in sum give 7 this means that the filed should be visible
document.getElementById('tab3continue').style.visibility = flags == 7 ? 'visible' : 'hidden';
};
</script>

Cammy
10-14-2011, 12:25 AM
Are you trying to find if switchElement.value is between 1 and 9?
If so, to fix the problem change this line:

if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {

To this line:

if ((switchElement.value == '1' || switchElement.value == '2' || switchElement.value == '3' ) || (switchElement.value == '4' || switchElement.value == '5' || switchElement.value == '6')& || switchElement.value == '7' || switchElement.value == '8' || switchElement.value == '9')) {

That'll check whether switchElement.value is one of those numbers.

4jd
10-14-2011, 07:37 AM
Thanks everyone, but this these are my actual radio buttons. I have tried altering your code Old Pedant and Siberia-man to suit but with no luck,



<input name="id[18]" value="81" id="attrib-18-81" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />

<input name="id[19]" value="99" id="attrib-19-99" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />

<input name="id[20]" value="117" id="attrib-20-117" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />

<!-- MY CONTINUE BUTTON -->
<div id="tab3continue" style="visibility:hidden;">
<img src="images/tabs/button_continue.gif" alt="CONTINUE"
</div>


I tried doing this to Old Pedant's code


<script type="text/javascript">
// function to get the value of a group of radio buttons
// works even if there is only one button in the group:
function getRBvalue(group)
{
if ( group.length == null ) /* if only one button */
{
return group.checked ? group.value : null;
}
/* if two more more buttons */
for ( var g = 0; g < group.length; ++g )
{
if ( group[g].checked )
return group[g].value;
}
return null;
}

function change(rb)
{
var tab3 = document.getElementById("tab3continue");
var form = rb.form;
if ( getRBvalue(form.id[18]) == null
|| getRBvalue(form.id[19]) == null
|| getRBvalue(form.id[20]) == null )
{
// if any group is unchecked, leave tab3 hidden
tab3.style.visibility = "hidden";
} else {
// only show it when each group has a button checked
tab3.style.visibility = "visible";
}
}
</script>


and this to Siberia-man's code...


<script>
// the storage of flags. Each bit corresponds to one group of radiobuttons
var flags = 0;
function change(rb)
{
// get the name of the radiobutton
var name = id[.name.];
// get only a digital part of the name
var index = name.slice(2);
// set a flag per a group
// rb1 sets 1
// rb2 sets 2
// rb3 sets 4
flags |= 1 << (index - 1);
// all flags in sum give 7 this means that the filed should be visible
document.getElementById('tab3continue').style.visibility = flags == 7 ? 'visible' : 'hidden';
};
</script>


The name is auto generated, so not sure if the square brackets are making it not work or am I missing out other entries that need to be altered?
----------updated--------------
Just did some research on the square brackets, if I've understood it correctly, javascript uses the brackets to define an array? so this would cause a problem? how would I tell javascript to ignore the brackets for the purpose of creating an array e.g. \" in php?

DaveyErwin
10-14-2011, 12:27 PM
<input name="id[18]" value="81" id="attrib-18-81" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />

<input name="id[19]" value="99" id="attrib-19-99" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />

<input name="id[20]" value="117" id="attrib-20-117" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />

<!-- MY CONTINUE BUTTON -->
<div id="tab3continue" style="visibility:hidden;">
<img src="images/tabs/button_continue.gif" alt="CONTINUE"
</div>

<script>
changedArray=[]
function change(el){
if(changedArray.indexOf(el.name == -1))changedArray.push(el.name);
if(changedArray.length == 3)alert('DONE')
}

</script>

===========edit+++++++=
here is way for IE

changedArray=[]
function change(el){
if(changedArray.toString().indexOf(el.name == -1))changedArray.push(el.name);
if(changedArray.length == 3)alert('DONE')
}

thankyou siberia-man

siberia-man
10-14-2011, 12:41 PM
The name is auto generated, so not sure if the square brackets are making it not work or am I missing out other entries that need to be altered?
Oh! So we have to be sure that each time when the name is auto generated -- it is the same as it was last time and it will be the same as now. So can we be sure that the group marked as id[18] will have the same name always? This can be important if you will implement some algorythms depending on names. This cannot be important in the suggestion by DaveyErwin. But his way has serious shortcoming -- the Array.indexOf method is not defined in IE and should be implemented by yourself.


Just did some research on the square brackets, if I've understood it correctly, javascript uses the brackets to define an array? so this would cause a problem? how would I tell javascript to ignore the brackets for the purpose of creating an array e.g. \" in php?
Both yes and no. Square brackets are used to define an array in the server-side, for example in PHP, but not in JavaScript. When data come to PHP the interpreter parses data and their names and bracketized names converts to array.

Old Pedant
10-14-2011, 07:46 PM
Because you use square brackets in your names, you can't just do form.id[18]

Javascript sees that as the name id and expects an array of such names, with id[18] referencing the 19th one.

But it's easy to change my code to work:


function change(rb)
{
var tab3 = document.getElementById("tab3continue");
var form = rb.form;
if ( getRBvalue(form.["id[18]"]) == null
|| getRBvalue(form.["id[19]"]) == null
|| getRBvalue(form.["id[20]"]) == null )
{
// if any group is unchecked, leave tab3 hidden
tab3.style.visibility = "hidden";
} else {
// only show it when each group has a button checked
tab3.style.visibility = "visible";
}
}

That form of coding means "look up the name 'id[18]' in the form elements" and works no matter what weird characters you have in the name(s).

Old Pedant
10-14-2011, 07:51 PM
Square brackets are used to define an array in the server-side, for example in PHP, but not in JavaScript.

Ummm...that's confusing, siberia. Clearly square bracket *ALSO* are used to define an array in JavaScript.

It's just that you can't use square brackets in a name and then use the form.name coding style, because the square brackets are indeed seen *AS* an array, and not as part of the name.

Fortunately, you *can* use form.elements["id[18]"] or the shorter form["id[18]"] to force JavaScript to treat the literal name, with its square brackets, *as* a name.

siberia-man
10-14-2011, 08:10 PM
Old Pedant
Agree with you totally. Square brackets are used to initialize an array or as reference to an item of an array. This is the syntax of the language.

But a DOM element and it's attribute cannot be considered in this context. Some DOM element having the attribute name="x[3]" does not make an array with the single value 3 or does not refer to the 4th item of an array. Also the attribute name="x[3]" does not eval'd automatically to produce an array with some values.

That's why I said that this is the server side mechanism.

Old Pedant
10-14-2011, 09:02 PM
Yes, yes. I understood your point. Putting square brackets into a name (or id) doesn't create an array, because the name/id/whatever is inside quotes which makes it a string, and JS doesn't try to convert strings to variables. (Let's not get into eval() ... <grin/>)

I was just saying that your wording might have confused him. That was all.

Sorry if I wasn't clear.

siberia-man
10-14-2011, 09:46 PM
I understood you. I really can confuse them. Thank you that you clarified my point of view.

Old Pedant
10-14-2011, 10:06 PM
I should mention that, so far as I know, the required use of [] to indicate a multi-valued element (e.g., many checkboxes with the same name, or a <select multiple>) is unique to PHP.

ASP and ASP.NET and JSP quite happily recognize multi-valued elements just by the presence in the GET or POST data of multiple occurrences of the same name.

So while you might need to do

<select name="cities[]" multiple>
in your HTML if the server-side code is PHP, in ASP and ASP.NET and JSP you would simply do

<select name="cities" multiple>

And of course the same rules apply to several checkboxes with the same name, radio buttons, etc., etc.

FWIW, PHP complicated the life of the JavaScript developers with its requirement of the square brackets. You have to wonder why PHP didn't follow the lead of the other server-side systems and handle multi-valued names automatically.

4jd
10-15-2011, 11:20 AM
Because you use square brackets in your names, you can't just do form.id[18]

Javascript sees that as the name id and expects an array of such names, with id[18] referencing the 19th one.

But it's easy to change my code to work:


function change(rb)
{
var tab3 = document.getElementById("tab3continue");
var form = rb.form;
if ( getRBvalue(form.["id[18]"]) == null
|| getRBvalue(form.["id[19]"]) == null
|| getRBvalue(form.["id[20]"]) == null )
{
// if any group is unchecked, leave tab3 hidden
tab3.style.visibility = "hidden";
} else {
// only show it when each group has a button checked
tab3.style.visibility = "visible";
}
}

That form of coding means "look up the name 'id[18]' in the form elements" and works no matter what weird characters you have in the name(s).

YOU ARE FREAK'N BRILLIANT!!!!!!!!!!!!

Only thing I edited was the *form.["id[18]"]* to *form["id[18]"]* which I noticed in your next post i.e. removed the period before bracket, works brilliantly, been trying to get this to work for 2 weeks now.

Thanks to everyone for their input and knowledge:thumbsup::thumbsup:
----------------------
Jay

Old Pedant
10-16-2011, 04:33 AM
Sorry about the typo. Blame it on old eyes. I really didn't see the period in there.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum