...

View Full Version : How to select multiple input to remove from the list



Pervez
10-01-2012, 01:35 PM
Hi,

I have the code , which add the data from input filed to list-box.Now am able to remove individual input's.

I want to have option multiple select to remove the data from list box .
Am not able to process all the data whichever are present in select tag:(


CODE:


<form id="frm" action="" method="post">
Select list:<br/>
<select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>
Add an option: <input type="text" name="optval" id="optval" /><br /><br/>
<input type="button" id="addopt" name="addopt" value="Add Option" onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp;
<input type="button" id="del_opt" name="del_opt" value="Delete Option" onclick="adOption.delOption('sel_list', 'optval');" />
</form>
<script type="text/javascript"><!--
var adOption = new Object();
adOption.checkList = function(list, optval) {
var re = 0;
var opts = document.getElementById(list).getElementsByTagName('option');

for(var i=0; i<opts.length; i++) {
if(opts[i].value == document.getElementById(optval).value) {
re = 1;
break;
}
}
return re;
};
adOption.addOption = function(list, optval) {
var opt_val = document.getElementById(optval).value;
if(opt_val.length > 0) {
if(this.checkList(list, optval) == 0) {
var myoption = document.createElement('option');
myoption.value = opt_val;
myoption.innerHTML = opt_val;
document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);

document.getElementById(optval).value = '';
}
else alert('The value "'+opt_val+'" already added');
}
else alert('Add a value for option');
};
adOption.delOption = function(list, optval) {
var opt_val = document.getElementById(optval).value;
if(this.checkList(list, optval) == 1) {
var opts = document.getElementById(list).getElementsByTagName('option');
for(var i=0; i<opts.length; i++) {
if(opts[i].value == opt_val) {
document.getElementById(list).removeChild(opts[i]);
break;
}
}
}
else alert('The value "'+opt_val+'" not exist');
}
adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
--></script>

How can I do this ....?
Please Help

Thank You
Pervez

VIPStephan
10-01-2012, 02:13 PM
If you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

sunfighter
10-01-2012, 03:09 PM
FYI: if you hit "enter" after typing a name into the input box, it disappears from that box and completely removes every name in the select list. Not a good thing.

xelawho
10-01-2012, 06:05 PM
generally speaking you loop through the options (using a reverse for loop) and if the option is selected, remove it.

if you need more detail, feel free to ask.

Pervez
10-03-2012, 06:49 AM
Hi ,

Sorry I didn't get you. can u bit clear about this ......?

And also I wanna process this select list to back end for further process .How can I add multiple data to select list at a time and process this .......?

Thank You
Pervez

shyagrawal
10-03-2012, 10:30 AM
you have to add "multiple" in the select tag to select multiple value. As I have added below:
<select multiple name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>

Also, you have to update your delete function. Please see below:
adOption.delOption = function(list, optval) {
var opts = document.getElementById(list).getElementsByTagName('option');;
for(var i=opts.length -1; i >= 0 ; i--) {
if(opts[i].selected == true) {
document.getElementById(list).removeChild(opts[i]);
}
}
}

Let me know is this you want?

Pervez
10-03-2012, 10:59 AM
Hi shyagrawal,

Thank You for your response.

When I update my code as you told , the list box not taking input from input filed .

And also i wann process all those list box items to back-end.

Please Help

Thank You
Pervez

shyagrawal
10-03-2012, 11:05 AM
use below code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
<h1>
Pizzeria</h1>
<p>
&nbsp;</p>
<p>
<b>Name:</b>&nbsp;
<input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Pickup:</b>
<input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
<input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
<p>
<!-- create ddl for style and size-->
<!-- make ddl have a set value-->
<b>Style:</b> &nbsp; &nbsp;
<select id="ddlStyle">
<option selected="selected">Choose Style</option>
<option value="empty"></option>
<option value="deepDish">Deep Dish</option>
<option value="TomatoPie">Tomato Pie</option>
<option value="ThinCrust">Thin Crust</option>
<option value="Stuffed Crust">Stuffed Crust</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
<select id="ddlSize">
<option selected="selected">Choose Size</option>
<option value="empty"></option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">Xtra Large</option>
<!-- <option value="other">Other value</option>-->
</select></p>
<p>
<!-- Toppings:
<select id="investment1" <optgroup="" label="" name="investment0">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</select></p>-->
<p>
<b>Toppings: </b>&nbsp; <input id="chkPepperoni" type="checkbox" value="Pepperoni"/><b>&nbsp;Pepperoni: </b>
<input id="chkBlkOlives" type="checkbox" value="Black Olives"/><b> Black Olives: </b>
<input id="chkMeatball" type="checkbox" value="Meatballs"/><b>Meatballs: </b>
<input id="chkSausage" type="checkbox" value="Sausage"/><b> Sausage: </b>

<p>
&nbsp;</p>
<p>
&nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" onclick="ConfirmOrder();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;
<input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
<!-- //does this work? -->
<p>
<textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
<p>
&nbsp;</p>
<script language="javascript" type="text/javascript">


var $ = function (id) {
return document.getElementById(id);

}

function () {

//get buttons and assign a funtion to its onclick

$("btnConfirmOrder").onclick = ConfirmOrder;

$("btnClrFrm").onclick = ClrFrm;


}
function ConfirmOrder() {

//alert
var message = "You have ordered the following:\n\n";

//test the toppings checkboxes
//display the checked toppings in textbox

if ($("chkPepperoni").checked) {
message +=" - " + $("chkPepperoni").value + "\n";
}
if ($("chkBlkOlives").checked) {
message +=" - " + $("chkBlkOlives").value + "\n";
}
if ($("chkMeatball").checked) {
message +=" - " + $("chkMeatball").value + "\n";
}
if ($("chkSausage").checked) {
message +=" - " + $("chkSausage").value + "\n";
}

//confirm to user what they have accepted
//confirm(message)

$("txtArea").value = message;

}

</script>
<!--</body>-->
</html>

Pervez
10-03-2012, 11:05 AM
Hi shyagrawal,

Thank You for your response.

When I update my code as you told , the list box not taking input from input filed .

And also i wann process all those list box items to back-end.

Please Help

Thank You
Pervez

shyagrawal
10-03-2012, 11:11 AM
Please correct my understanding. You want to delete entered text from the select list, right?
For Example, If you enter "test" in the text box and "test" is present in list box, then you want to delete that option from select box, right? In that case, you can delete only options whose value is "test" in the select list.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum