PDA

View Full Version : Help with removing dynamic content from dropdown list



sdotsen
05-31-2008, 03:57 AM
The code below adds and removes an element from a dropdown list. It works to a certain extent, it just fails when you check off more than 1 checkbox. Go ahead and check both boxes and then remove one. It removes the last thing you selected.Javascript isnt my thing so I have no idea where to begin. This is what I have so far.

Link to example (http://www.kubicle.com/~sam/thunder.html)



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

document.myform.DropDownList.remove(document.myform.DropDownList.options.length-1);
}
}
-->
</SCRIPT>

<form name="myform" method="post" id="myform">
<input name="box1" type="checkbox" value="turnkey" onclick="addItem(this, 'turnkey', 'turnkey');"> Turnkey <br>
<input name="box2" type="checkbox" value="inroom" onclick="addItem(this, 'inroom', 'inroom');"> Inroom<br>
<select name="DropDownList"></select> </form>

jscheuer1
05-31-2008, 06:53 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function addItem(obj, t, v) {

var sel = obj.form.elements['DropDownList'],
o = sel.options,
l = o.length;

if(obj.checked)
o[l] = new Option(t, v);

else if (l > 0)
for (var i = l-1; i > -1; --i)
if(o[i].text == t && o[i].value == v)
sel.remove(i);

}
// -->
</script>
</head>
<body>
<form action="" name="myform" method="post" id="myform">
<div>
<input name="box1" type="checkbox" value="turnkey" onclick="addItem(this, 'turnkey', 'turnkey');"> Turnkey <br>
<input name="box2" type="checkbox" value="inroom" onclick="addItem(this, 'inroom', 'inroom');"> Inroom<br>
<select name="DropDownList">
<option value="" selected>Choose</option>
</select>
</div>
</form>
</body>
</html>

sdotsen
05-31-2008, 04:23 PM
Thanks so much, do you have any tips for the following?

The checkboxes are static (always 3 checkboxes) but each product is different in a way where Item A has curbside enabled and Item B has all 3 delivery method. These values are stored in the DB, so when it's displayed, the appropriate checkboxes are checked off. I got that working on the PHP side, but now on the JS side of things. For example, Item A has Curbside and Inroom enabled so in the dropdown box, it should list curbside and inroom. In the event that someone unchecks curbside, curbside should be remove.

Is there a way for the JS script to check the current status of a checkbox that you as a user didn't check off (it came from the DB where I scripted a php statement to default the check if it exists).

For example, I checked off "inroom" by default but it doesnt show in the dropdown list.
http://www.kubicle.com/~sam/thunder.html

jscheuer1
05-31-2008, 05:01 PM
<script type="text/javascript">
<!--
function addItem(obj, t, v) {

var sel = obj.form.elements['DropDownList'],
o = sel.options,
l = o.length;

if(obj.checked)
o[l] = new Option(t, v);

else if (l > 0)
for (var i = l-1; i > -1; --i)
if(o[i].text == t && o[i].value == v)
sel.remove(i);

}

window.onload = function(){
var boxes = document.forms['myform'].elements;
for (var i = boxes.length-1; i > -1; --i)
if (boxes[i].name && /^box\d+$/.test(boxes[i].name))
boxes[i].onclick.apply(boxes[i]);
}
// -->
</script>

But, if the user refreshes the page, unless your server side code can prevent it, it will come back in most cases with the options they had set. This may or may not be a good thing.

Also, what about non-javascript enabled users? Are they going to be able to make any sense of this form once it gets live for actual commercial use?