JS Hassle Again! Easy One For A Guru / JS Talent

Annoyingly, I can write 10K lines of PHP in a week without much headache and then on the second line of JS it's all gone ass over tits, so to speak.

I used to have a simple form working with a tickbox like this:

Item 1 [ ]
Item 2 [ ]
Item 3 [ ]

Then some JS that populates a pull down menu but ONLY if any of the tickboxes were in fact ticked. Otherwise it would alert "Tick something first you moron!". (Along those lines...)

Here comes me, wanting to change the tickbox to a radio button with 2 more options. The left most out of the three is basically what the tickbox used to be.

So now I need to change that JS to not check the tickbox, but the first of the radio buttons for each item.

Problem was, I also changed the naming of the form elements. Where it used to be named item_1 for the first tick box, it's now any number correspnding in the DB with that item. Not easily to check against.

On the old code, it worked like this:

CheckboxProductsChecked = false;
	for(i = 0;i < document.track_orders.tracking_box_number.value;i++) {
		if(document.getElementsByName("item_" + i)[0].checked == true) {
			CheckboxProductsChecked = true;
		}
	}

Code (markup):

Worked fine with the predictable name.

But now I can't use it like that anymore so I had to change it to getElementById and give it an easy to check against ID. But now I'm lost.

My NEW HTML comes out like this for the form:

<input type="radio" name="927_0" value="here" id="0"> &nbsp;<input type="radio" name="927_0" value="dd" id="0"> &nbsp;<input type="radio" name="927_0" value="not" id="0" CHECKED>
<input type="radio" name="927_1" value="here" id="1"> &nbsp;<input type="radio" name="927_1" value="dd" id="1"> &nbsp;<input type="radio" name="927_1" value="not" id="1" CHECKED>

Code (markup):

My NEW JS code looks like this:

CheckboxProductsChecked = false;
	for(i = 0;i < document.send_products.tracking_box_number.value;i++) {
		if(document.getElementById(i).checked == true) {
			CheckboxProductsChecked = true;
		}
	}

Code (markup):

Which is incorrect since it lets anything through.

When I try document.getElementById(i)[here] I get "here is not defined" and when I try document.getElementById(i)['here'] I get "document.getElementById(i).here has no properties. Or should it be [0] perhaps for the first one?

How do I get that Id's value? How do I check that the first radio button, called 'here', is in fact checked? Or actually, I just need to know at least one of the whole form is is checked.

Is the above code what I need for radio boxes or is it different entirely?

Hope someone can help. Cheers.

EDIT: Should ID's be unique for EVERY radio button option? Or only for the 'set'?

 

Firstly if you want the radio buttons to be part of the same group then give them the same name, keep there different id's if you want.

If you ever wanted to have a second grouping of radio buttons on the page you'd be stuffed. (radio buttons work by groups and there grouping is defined by there common name)

Once you have them grouped you should be fine the way you use to do it..

Let me know if you need a written example

 

I already have it like that.

Note how in my HTML code example I have 2 differently named groups of 3 'options'.

But I don't have unique IDs for each of those 'options'.

 

Sorry but i see your inputs with completely different values in the name attribute. Im talking about grouped radios with the same value in the name attribute.

Once you do this then you can reference them by there group eg. document.all.group1[0].value etc.


eg.
<input type=radio name=group1 value=red>
<input type=radio name=group1 value=green>

<input type=radio name=group2 value=yes>
<input type=radio name=group2 value=no>

 

I don't see how that is different from what I posted:

<input type="radio" name="927_0" value="here" id="0">
<input type="radio" name="927_0" value="dd" id="0">
<input type="radio" name="927_0" value="not" id="0" CHECKED>

<input type="radio" name="927_1" value="here" id="1">
<input type="radio" name="927_1" value="dd" id="1">
<input type="radio" name="927_1" value="not" id="1" CHECKED>

I also use same names for the group but different values. Am I being silly here?

 

Man im blind that is what you posted .... SORRY!

Ill create the same page here at work and get back to you, your javascript logic should work!

 

Another option could be to use css to style the checkboxes like radio buttons (if thats what you were looking for?)

 

I didn't even know you could do that with CSS!

I'll tell you what I need. And whoever delivers the goods, can claim $20.

Item one: option 1 -O- option 2 -O- option 3 -O-
Item two: option 1 -O- option 2 -O- option 3 -O-
Item three: option 1 -O- option 2 -O- option 3 -O-

Now below the list of items, I have some SELECT boxes and a submit button.

The SELECT boxes are only applicable to option 1. If none of the items are selected as option 1 then leaving the SELECTs empty should be OK. But my form has validation that requires at least one of what used to be a tickbox to be selected. Now I combined that tick box with 2 more options.

So the validation should 'think':

If for any of the listed items option 1 is selected, this validation code is applicable. On the other hand, if only option 2's and 3's are selected, I expect no input from the SELECTs and that's fine. We'll leave them empty.

Thing to note is: I can not name the radio selection 'groups' consistently. They get the names of the items. So that's why I tried getElementById because I can name the ID in a predictable manner.

Let me know if you guys need more to code this.

 

I'm confused by exactly what you're after.

If you just want the first of the radio buttons ticked, why not just use regular HTML to accomplish your goal? i.e.

<input type="radio" name="927_0" value="here" CHECKED> 
&nbsp;<input type="radio" name="927_0" value="dd"> 
&nbsp;<input type="radio" name="927_0" value="not">
<input type="radio" name="927_1" value="here" CHECKED> 
&nbsp;<input type="radio" name="927_1" value="dd"> 
&nbsp;<input type="radio" name="927_1" value="not">

Code (markup):

Unless I'm missing something.

And if you must use Javascript to tick one of them by default, just use these two lines:

document.send_products.927_0[0].checked = true; // This will uncheck the other ones by default.
document.send_products.927_1[0].checked = true;

Code (markup):

Also, you can't assign the same id to each option in a radio list or checkbox. You'd have to count them off from there.

 

No. The right one is always checked by default. It basically means, 'do nothing'. Then there's the left one which is the one that requires the pull downs. So the pulldown validation stuff only needs to kick in when at least one of the left radios is activated.

 

T0PS3O, you've asked a lot of questions, and people have given good responses, but it looks like your question has still gone unanswered, so I have a suggestion. Instead of having the leftmost radio buttons ("option 1") be an indicator of that group being selected, do the opposite. Label them as "None" and if they're checked then that group isn't selected.

<p>
<input type="radio" name="927_0" value="here" CHECKED>None &nbsp;<input type="radio" name="927_0" value="dd"> &nbsp;<input type="radio" name="927_0" value="not">
</p>
<p>
<input type="radio" name="927_1" value="here" CHECKED>None &nbsp;<input type="radio" name="927_1" value="dd"> &nbsp;<input type="radio" name="927_1" value="not">
</p>

Code (markup):

You may notice I removed the id values, since in this case, you don't need to reference them. If you ever do, heed the other's advice about naming them uniquely. No two elements should have the same id.

With the above HTML, you could use javascript similar to your original code to validate.

CheckboxProductsChecked = false;
	for(i = 0;i < document.track_orders.tracking_box_number.value;i++) {
		if(document.getElementsByName("927_" + i)[0].checked == false) {
			CheckboxProductsChecked = true;
		}
	}

Code (markup):

 

T0PS3O, you wrote while I was putting together my post, and now that I read your comment about the "right one", I now realize you were doing I was suggesting, just on the right instead of the left.

So my suggestion now is for you to change the javascript reference ("927_" + i)[2] instead of ("927_" + i)[0]

If that doesn't work for you, then I think you're making this more complicated than it needs to be, or maybe you haven't fully explained the purpose of the the "options". I figure one of them means "None" (you say the rightmost one), and the others are both equal choices of non-None values.

 

Thanks for looking into it. My problem is that the 927 name is something that is database driven and can be anywhere from 0 to 10000 and beyond. That's why the for loop checking against the name won't work I think. Hence the IDs since I can ID them properly and predictably.

I'd call the first item's options id=1_0 id=1_1 etc.
I'd call the second item 's options id=2_0 id=2_1 etc.

That way it's easy to build a for loop.

I've got an idea now, let me mess about a bit and I'll report back.

 

Sorry about that. I concentrated too much on the other requirements, I forgot about the unpredictable name requirement.

What I'd suggest is not giving an id to the non-None options. Only give an id to rightmost options.

<p>
<input type="radio" name="927_0" value="here"> &nbsp;<input type="radio" name="927_0" value="dd"> &nbsp;<input type="radio" name="927_0" id="x0" value="not" CHECKED>None
</p>
<p>
<input type="radio" name="927_1" value="here"> &nbsp;<input type="radio" name="927_1" value="dd"> &nbsp;<input type="radio" name="927_1" id="x1" value="not" CHECKED>None
</p>

Code (markup):

	CheckboxProductsChecked = false;
	for(i = 0;i < document.track_orders.tracking_box_number.value;i++) {
		if(document.getElementById('x' + i).checked == false) {
			CheckboxProductsChecked = true;
		}
	}

Code (markup):

 

Then you may be looking at it from the wrong angle.

Try something like this:

<input type="radio" name="927_0" value="Value 1" onclick="pullMenuDown(true)" />
&nbsp;&nbsp;
<input type="radio" name="927_0" value="Value 2" onclick="pullMenuDown(false)" />

Code (markup):

The true/false for the function would indicate whether the menu should or shouldn't be pulled down.

So, your function would be:

function pullMenuDown (pullDown) {
     if (pullDown) {
     // put your pull down menu code here.
     } else {
     // put your other code here, if necessary.
     }
}

Code (markup):

You'll notice how I put if (pullDown). With any boolean variable, putting if (variable) checks to see if the variable is true and putting if (!variable) checks to see if it's false.

When it comes to any select options or radio options that require individual DHTML processing based on the options, I prefer to pass parameters to the JScript rather than have the script try to read form inputs. I'm not sure if others do, but I find processing is easier that way.

 

Thanks guys!

It seems I have it going now anyway... The actual form as I had it with the IDs worked fine in the end. The if statements handling whether any of the left-most were ticked were wrong. I'll show you in a bit, gotta make a call now.

AWD1, I like your suggestion about just not showing the form at all if it's not needed. Though on the other hand, it adds a level of unpredictability if you don't know what should be in that space or might appear.

Anyways, it's 22:55, still in the office, need to f off and go to sleep. Thanks! Green coming your way, all of you.

 

Glad you got it working. Based on what you're saying about it only needing a couple changes, and looking back at my last suggestion, I noticed that I didn't really differ too much from your original code. It's funny that it took all this work just to end up pretty much where you were in the first place.

 

Run with it then. Let it frustrate the hell out of you, and eventually you'll learn something cool.

 

Yeah that's the best way of learning... But I just don't like JS. Getting better though.