• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Help w/ javascript

L

LuckyTaxi

Diamond Member
I have the following code that populates a drop down list depending on the checkbox you check off. It works when you check the box but if you uncheck, it doesn't remove the entry, it actually adds an additional entry to the dropdown.

Javascript
-------------
<SCRIPT LANGUAGE="JavaScript">
<!--
function addItem(text, value) {
addOption = new Option(text, value);
document.myform.DropDownList.options[document.myform.DropDownList.options.length]=addOption;
return true;
}
-->
</SCRIPT>


HTML
---------
<form name="myform" method="post" id="myform">
<input name="box1" type="checkbox" value="turnkey" *****="addItem('turnkey', 'turnkey');">
<select name="DropDownList"></select>
</form>
 
in the addItem function, you need to have some conditional code
if the box is checked, add the items to the select box
if the box is UNchecked, remove the previously added items

var yourBox = yourForm.yourCheckInputName.checked;
if(var)
{
//add items
}
else
{
//remove items
}

not sure if thats right, javascript is a bit rusty
 
Originally posted by: sourceninja
I've become such a jquery whore that I don't write normal javascript anymore.
Click to expand...

thats awesome

i love jquery, but haven't even touched that in about 2 years
 
Your function only allows for adding and not removing. Additionally you don't have a conditional to check for the status of the checkbox.

So to help you out you'll need to add the following code:

1) A conditional to check the status of the checkbox either in javascript or explicitly set through the listener attribute of the html form object
2) A remove option object method or code block that will actually remove the object in the options array.
 
I've modified it to with the following and it doesnt remove.

Code:


<SCRIPT LANGUAGE="JavaScript">
<!--
function addItem(text, value) {
if(document.myform.turnkey.checked==true) {
addOption = new Option(text, value);

document.myform.DropDownList.options[document.myform.DropDownList.options.length-]=addOption;
return true;
}

if(document.myform.turnkey.checked==false) {
//addOption = new Option(text, value);

document.myform.DropDownList.options[document.myform.DropDownList.options.length-1];
return true;
}
}
-->
</SCRIPT>
 
document.myform.DropDownList.options[document.myform.DropDownList.options.length-1]; does absolutely nothing. Perhaps you are looking for

document.myform.DropDownList.options.length -= 1;

It also looks like you have a syntax error in your adding part

document.myform.DropDownList.options[document.myform.DropDownList.options.length-]=addOption;

length-?
 
sorry - i must've copied and paste code as i was changing it around.

I did what you said and it works like a charm!
Do i not need the first part of the following statement for the "adding" script?

"document.myform.DropDownList.options[document.myform.DropDownList.options.length]"

 
If the arrays are using a 0-based index then

document.myform.DropDownList.options[document.myform.DropDownList.options.length] = addOption; should be all you need.

Imagine a dropdown list with 3 elements, they would be using indexes 0,1,2 so when you want to add a new one you would put it in index 3, or the length of the dropdown list which is 3 🙂
 
javascript is not my strength. the issue im dealing with now is when you check off two checkboxes, it removes the "hidden" elements. Say you click on "inroom" first and then turnkey. now remove inroom, it removes turnkey.

check it out -

link

I want as far as breaking them into separate functions though i know you would only need 1 function to accomplish this.
 
Originally posted by: Chosonman
Ok here it is.
Click to expand...

Thanks - but I'm still running into the issue where it removes the last item you checked off.
Your code works like the one I have in place but it's missing something else. I can't put my finger on it as I have no experience with JS.
 
I understand, i need it to add/remove the value that's checked off. If i check off "curbside" it should add curbside to the dropdown.
If I uncheck it, it should remove. This works but it doesnt work when two items are checked off.

I think the missing piece is to pass the value that you want to remove. So if I uncheck curbside, I need to tell the function to remove "curbside" and not anything else.
If only I knew enough about JS' syntax.
 
In order to do that you'll need to iterate through the array of options and match the of the option to the value of the text you want to remove.

ie

for(i = 0; i<options.length; i++)
{
if(option(i) == TEXT)
{
//CODE TO REMOVE OPTION
}
}

}
 
Wow.

I feel like I'm in 1997, why is everyone recommending all these oldschool methods?
Here's a script I've made which might help you. Note: no use of .options, or the .add method, or dom 0 accessing (document.forms = fugly and old)

http://paste.zoffix.com/1212205519/page/

Note: You should remove the size attribute, I've only added that so you can see the dropdown being populated "live"

I've become such a jquery whore that I don't write normal javascript anymore.
Click to expand...

So you couldn't post a jQuery solution? Personally I won't use it until I learn all the inner workings.. Resig is a hell of a coder.

 
Couldn't you just make an array with a length equal to the number of checkboxes (I'm assuming you are working with a form with a fixed number of checkboxes). Each checkbox is associated with a specific element in the array. When the box is checked it sets the corresponding position in the array to the designated text and when a box is unchecked the element is set to NULL or some constant. Step through a For script and if the array is NULL then you skip it, but if it is not NULL then add that item to the dropdown. Could do the same thing with a pair of arrays one containing a Boolean and the other with the text values.

Sorry if this is old school, but it has been a very long time since I've done any javascript. Sorry I don't have any code, but it should be straight forward enough.
 
Originally posted by: Woosta
Wow.

I feel like I'm in 1997, why is everyone recommending all these oldschool methods?
Here's a script I've made which might help you. Note: no use of .options, or the .add method, or dom 0 accessing (document.forms = fugly and old)

http://paste.zoffix.com/1212205519/page/

Note: You should remove the size attribute, I've only added that so you can see the dropdown being populated "live"
Click to expand...

Awesome, works perfectly, now my next question, how would you populate the box with an element that's checked by default? With your code, I checked off magic by default but it doesn't show up in the select menu. If i uncheck and recheck then it works as advertised.
I got one issue solved but now I have to accommodate for when I'm reading the values of the checboxes from the db table.

NEVERMIND - it works perfectly, my if/else for the php wasn't working correctly. 😛
Thanks again!
 
Originally posted by: Woosta
Wow.

I feel like I'm in 1997, why is everyone recommending all these oldschool methods?
Here's a script I've made which might help you. Note: no use of .options, or the .add method, or dom 0 accessing (document.forms = fugly and old)

http://paste.zoffix.com/1212205519/page/

Note: You should remove the size attribute, I've only added that so you can see the dropdown being populated "live"

I've become such a jquery whore that I don't write normal javascript anymore.
Click to expand...

So you couldn't post a jQuery solution? Personally I won't use it until I learn all the inner workings.. Resig is a hell of a coder.
Click to expand...

I like your solution but it may be overkill for what he was asking and might get him in trouble when his teacher asks him to explain the code to the class.
 
Perhaps. But if he was in a class and the teacher expected him to explain the JS logic, I don't think he'd be using...

it works perfectly, my if/else for the php wasn't working correctly.
Click to expand...

For the job. I could be wrong, of course.
 
Woosta - thanks for the script. As I've said before, I have no experience with JS. I actually avoid it at all cost but there are times when it's required.

Chosonman - Why don't you ask me what it's for before you say something smart. I'm releasing a new version of our CMS for our shopping cart.
I could've used a different method w/o JS but it just made more sense to use JS in this case.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top