Help: Disable All Buttons Inside A Div Element How do you write a function to disable all buttons given a div id

[sonesay 7]

I need help to write a function to disable all buttons iside a div ID. if possible the function will disable all buttons even the ones inside child divs belonging to the main div.

[truefusion 3]

I think it's possible if you use the childNode array. Not not exactly sure how it goes, since i've never delt with it, but i'll do a quicky to see if it's possible and post back. In the mean time, this is some good reading: http://www.quirksmode.org/dom/intro.html

[sonesay 7]

I've seen a loop where a form element is counted and then a loop executed to process each form element. I think the same can be done here for buttons I just cant seem to find example codes for counting elements when I am actually looking for one.

 

[hr=noshade] [/hr]

Ok I think I'ved found it. looked around in w3schools and found http://forums.xisto.com/no_longer_exists/

 

 

x = document.getElementById('combat_skills_merits').getElementsByTagName("div").length;

I'm assuming x will be an array containing those object nodes and I can acess them with x.button.disabled='true';

 

going to try it now.

[truefusion 3]

Ok I think I'ved found it. looked around in w3schools and found http://forums.xisto.com/no_longer_exists/

x = document.getElementById('combat_skills_merits').getElementsByTagName("div").length;

I'm assuming x will be an array containing those object nodes and I can acess them with x.button.disabled='true';

 

going to try it now.

It seems you may have beaten me to the punch.

 

But here's the JavaScript function i made, regardless:

function disableButtons(){var x = document.getElementById('buttons');var y = x.getElementsByTagName('button');for (var i = 0; i < y.length; i++){	y[i].disabled = true;}}

[sonesay 7]

nice that looks like it will work. Mine isnt working at the moment I still havent figured out how to correctly reference the child nodes.heres an example of my layout

echo "<div id='combat_skills_merits' class='merit_groups'>";		echo "<span class='merit_cpl'>";		echo "Max Combo: 20";		echo "</span>";		echo "<br />";		echo "<span class='merit_cpl'>";		echo "Weapon Skills - Max Item: 8 Cost: 1>2>3>3>3>3>3>3";		echo "</span>";					echo "<div id='hand2hand_merits'>";			echo "</div>";			echo "<div id='dagger_merits'>";			echo "</div>";			echo "<div id='sword_merits'>";			echo "</div>";			echo "<div id='great_sword_merits'>";			echo "</div>";			echo "<div id='axe_merits'>";			echo "</div>";			echo "<div id='great_axe_merits'>";			echo "</div>";			echo "<div id='scythe_merits'>";			echo "</div>";			echo "<div id='polearm_merits'>";			echo "</div>";			echo "<div id='katana_merits'>";			echo "</div>";			echo "<div id='great_katana_merits'>";			echo "</div>";			echo "<div id='club_merits'>";			echo "</div>";			echo "<div id='staff_merits'>";			echo "</div>";			echo "<div id='archery_merits'>";			echo "</div>";			echo "<div id='marksmanship_merits'>";			echo "</div>";			echo "<div id='throwing_merits'>";			echo "</div>";echo "<span class='merit_cpl'>";		echo "Defensive Skills - Max Item: 4 Cost: 1>2>3>3";		echo "</span>";					echo "<div id='guarding_merits'>";			echo "</div>";			echo "<div id='evasion_merits'>";			echo "</div>";			echo "<div id='shield_merits'>";			echo "</div>";			echo "<div id='parrying_merits'>";			echo "</div>";			echo "</div>";

the buttons them selves are inside the individual skills e.g hand2hand_merits div, dagger_merits div... but I'm trying to make a function to first get the main container div which in this case is <div id='combat_skills_merits' then count child divs (19) in total for this one. and then acess button nodes in each one and disable them.edit: sorry i didnt explain in more detail first time round. I need it this way so I can reuse the function for different sections of the page.

Edited December 3, 2007 by sonesay (see edit history)

[truefusion 3]

the buttons them selves are inside the individual skills e.g hand2hand_merits div, dagger_merits div... but I'm trying to make a function to first get the main container div which in this case is <div id='combat_skills_merits' then count child divs (19) in total for this one. and then acess button nodes in each one and disable them.

 

edit: sorry i didnt explain in more detail first time round. I need it this way so I can reuse the function for different sections of the page.

Rather than taking into account all 19 DIV elements, let's modify the JavaScript function i posted a bit:

function disableButtons(id){var x = document.getElementById(id);var y = x.getElementsByTagName('button');for (var i = 0; i < y.length; i++){	y[i].disabled = true;}}

This way you can have something like onclick="disableButtons('buttons');" without having to obtain an array full of the 19 DIV elements while still be-ing able to disable button elements for a specific section.

[sonesay 7]

I wll try your code next. Its about lunch time now and I need to go make something to eat. I think I have serious problems when all the individual divs get reloaded. The buttons dont seem to be disabled yet I get no error from fire bug. I know its gonna be difficult to explain since I do have alot of other JS code running when a button is pressed.

heres my code so far for my specific layout . it returns no errors yet dosent seem to work.

for (var i = 0; i < y.length; i++){ // loop for buttons in child div.
y.disabled = true;
z = y.getElementsByTagName('button');
z.disabled=true;
}

} linenums:0'>function disable_btn(div_id) { x = document.getElementById(div_id) // get main div y = x.getElementsByTagName('div'); // get child divs for (var i = 0; i < y.length; i++){ // loop for buttons in child div. y.disabled = true; z = y.getElementsByTagName('button'); z.disabled=true; } }
Whats suppose to happen is when 1 button is pressed this code is suppose to run and disable all other buttons. oh 1 last question about your code will it get the buttons iside the child div's if I just pass it the parent div id?

be back in 30mins or so lunch time.

[truefusion 3]

Weird, but the function i posted works on my side.

oh 1 last question about your code will it get the buttons iside the child div's if I just pass it the parent div id?

Yeah, the function i gave does disable all buttons that is the child of the child, etc, of the element that has the ID which you give to the function.

[sonesay 7]

Yeah thanks alot man it works beautifuly. Solved that problem with your code but it showed me another flaw in my programming lol. because I'm reloading each merit skill individually and my integrity checks arnt exactly working with multiple ajax calls, I'm starting to think i need to just group them and reload them together instead of individually. Its ugly this way and I didnt want to have to resort to it but I may have to.heres whats happening 19 skills to load...skill 1 loaded (button disabled)... skill 2 loaded (button disabled)... skill 3 loaded (button disabled)... skill 4 loading (button not disabled)... skill 5 loading (button not disabled)...so in that example only 1-3 is loaded the rest is loading and user clicks button. this vokes the disable function and does ajax calls. since other buttons were not loaded yet they continue loading active lol. So a user can click it right away and execute two ajax calls messing up data integrity. Yes its my bad programming logic I am gonna think about what I'm gonna do to address it. Most likely group them up and elimiate this individual reload problem all together./sigh