homepage Welcome to WebmasterWorld Guest from 54.166.255.168
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JS from class into id
kajje



 
Msg#: 4242184 posted 10:22 am on Dec 14, 2010 (gmt 0)

Since a while I'm using this little js function to select and deselect multiple selectboxes. It all worked fine till I had a great idea to implement css into my site. Were I before could use the class='x' as parameters of my script, it now is impossible. A big boy as I am I tried to change the class='x' into id='x'. Should work, doesn't work.

My original javascript:
function checkAll(cName, status)
{
var theForm = document.getElementById('selectForm');

for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
{
theForm.elements[i].checked = status;
}
}


And a snip of my original html code:
<form method=post id="selectForm">
Shopping
Food
<span onclick="checkAll('results2', 1);checkAll('results3', 1);checkAll('results4', 1);checkAll('results5', 1);checkAll('results6', 1);checkAll('results7', 1);checkAll('results8', 1);checkAll('results9', 1);checkAll('results10', 1);checkAll('results11', 1);">ALL</span>
<span onclick="checkAll('results2', 0);checkAll('results3', 0);checkAll('results4', 0);checkAll('results5', 0);checkAll('results6', 0);checkAll('results7', 0);checkAll('results8', 0);checkAll('results9', 0);checkAll('results10', 0);checkAll('results11', 0);">NONE</span>

Vegetables
<span onclick="checkAll('results2', 1);">ALL</span>
<span onclick="checkAll('results2', 0);">NONE</span>

<input type="checkbox" value="potato" name="shopping[]" class="results2"> Potato
<input type="checkbox" value="cucumber" name="shopping[]" class="results2"> Cucumber
<input type="checkbox" value="tomato" name="shopping[]" class="results2"> Tomato


Fruit
<span onclick="checkAll('results3', 1);">ALL</span>
<span onclick="checkAll('results3', 0);">NONE</span>

<input type="checkbox" value="orange" name="shopping[]" class="results2"> Orange
<input type="checkbox" value="apple" name="shopping[]" class="results2"> Apple
<input type="checkbox" value="pear" name="shopping[]" class="results2"> Pear
</form>


As you see I use class to feed the javascript of parameters.
I would like to change the class-es into id-s

Any hints?

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4242184 posted 2:31 pm on Dec 14, 2010 (gmt 0)

I before could use the class='x' as parameters of my script, it now is impossible.

Why is it impossible? I don't see any reason why your original code would not work. Is it simply that you are reusing the class names, for example, results2? Why not do something like this:


Vegetables
<span onclick="checkAll('vegetable', 1);">ALL</span>
<span onclick="checkAll('vegetable', 0);">NONE</span>
<input type="checkbox" value="potato" name="shopping[]" class="vegetable"> Potato
<input type="checkbox" value="cucumber" name="shopping[]" class="vegetable"> Cucumber
<input type="checkbox" value="tomato" name="shopping[]" class="vegetable"> Tomato
Fruit
<span onclick="checkAll('fruit', 1);">ALL</span>
<span onclick="checkAll('fruit', 0);">NONE</span>
<input type="checkbox" value="orange" name="shopping[]" class="fruit"> Orange
<input type="checkbox" value="apple" name="shopping[]" class="fruit"> Apple
<input type="checkbox" value="pear" name="shopping[]" class="fruit"> Pear

kajje



 
Msg#: 4242184 posted 2:38 am on Dec 15, 2010 (gmt 0)

Hi Fotiman,

The reason I used resultsX was to be more easy able to generate it more easily by my php script. Your replacement by "fruit" looks better indeed if you look to the source, but is more difficult to generate out of my php script. Don't really care about presenting fancy readable stuff for people sniffing in my html code :-)

The thing is that in my new setup I cannot use classes anymore because the classes are filled by the css.
The class-names for every entry are the same in my new setup, they all point to on single stylesheet entry.

I therefore thought I had to get rid of the classes for feeding the js. I cannot use the 'name' either because they are all point to the same shopping[] array. Therefore I thought to use id='x'?

I thought about something like
<code><input type="checkbox" value="potato" name="shopping[]" class="mycssclass" id="result2"> Potato</code>
And get the js to use the id rather than the class for doing its job.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4242184 posted 3:41 pm on Dec 15, 2010 (gmt 0)

I still don't know what you mean by "the classes are filled by the css". There would be nothing preventing you from doing something like this in your CSS:

.vegetable, .fruit { /* styles */ }

instead of

.result2 { /* styles */ }

Alternatively, you could give your inputs multiple classes like:

class="vegetable result2"
class="fruit result2"

And then still apply the common styling to the .result2 class.

In any case, the issue is that you need some way to distinguish the different groups. If you use id's, they have to be unique for each input, which seems like it would be even more work server side than simply identifying the common groups and applying classes as in my previous example.

I'm not really sure how your PHP is generating the output, but it doesn't seem to me as though it would be all that difficult to apply different classes via the PHP. You obviously already know where the delineation point is between vegetables and fruits because there's where you output the Fruit heading.

kajje



 
Msg#: 4242184 posted 4:30 am on Dec 16, 2010 (gmt 0)

Multiple classes... Haven't thought of that - in fact - didn't know that was possible!

Thanks for the help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved