Hi, I have a page that I want users to add a number to a "list" that is disypled on the page. They enter the number into a text box and click a button that will add the number to the "list" on the page (without refreshing). I need to be able to delete one or poss more than one number from the list, by way of another button. Is there a way of doing this? The powers to be don't want the page refreshed...
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Add/Delete from a list
- Thread starter WorkSuxs
- Start date
what is a "list"?
*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
If the list is a SELECT list/drop down, then you can add an option by writing:
var dfmo = document.forms[0].mySelectList.options;
dfmo[dfmo.length] = new Option(optionText, optionValue);
To remove:
dfmo[indexToRemove] = null;
This is from memory. 'may need tweaking. I'll test it myself in a little bit when I get a chance.
--Dave
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!![[infinity]](/data/assets/smilies/infinity.gif "[infinity] [infinity]")
var dfmo = document.forms[0].mySelectList.options;
dfmo[dfmo.length] = new Option(optionText, optionValue);
To remove:
dfmo[indexToRemove] = null;
This is from memory. 'may need tweaking. I'll test it myself in a little bit when I get a chance.
--Dave
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!
or, an ordered list:
*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function addVal(v) {
var d = document.getElementById('list');
var n = document.createElement("li");
d.appendChild(n);
n.innerHTML = v.value;
v.value = "";
}
function removeLastVal() {
var d = document.getElementById('list');
d.removeChild(d.children(d.children.length-1));
}
//--></script>
</head>
<body>
<form name="f">
<input type="text" name="t1" />
<input type="button" onclick="addVal(this.form.t1);" value="add value" />
<input type="button" onclick="removeLastVal();" value="remove last value" />
</form>
<ol id="list"></ol>
</body>
</html>*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
- Thread starter
- #6
Thanks, that does work. I hate to say this, but I'm not a javascript programmer, but I knew you should be able to do it in javascript. How do you pass the list to the next page when they hit the submit button and how would you gather in list on that page. Very sorry to ask this.
What kind of list IS it?
Are you using JSPs?
The easiest thing to do might be to create a <form method='POST'> with a hidden input element (<input type='hidden' name='mylist' value=''>).
Then, when you submit, go through the list and create a string of elements, separating them by asterisks so the final string might be something like:
hats*gloves*scarf*boots and umbrella*parka
When the form submits, the element will go with it.
If you're using a JSP at the far end, you can get the value via request.getParameter("mylist");
To do this when you submit the form, add on onsubmit attribute to the FORM tag which calls a function. The function will then cycle through the list. Much easier in the case of a drop down, but do-able, with some work, in the case of an ordered list.
--Dave
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!
Are you using JSPs?
The easiest thing to do might be to create a <form method='POST'> with a hidden input element (<input type='hidden' name='mylist' value=''>).
Then, when you submit, go through the list and create a string of elements, separating them by asterisks so the final string might be something like:
hats*gloves*scarf*boots and umbrella*parka
When the form submits, the element will go with it.
If you're using a JSP at the far end, you can get the value via request.getParameter("mylist");
To do this when you submit the form, add on onsubmit attribute to the FORM tag which calls a function. The function will then cycle through the list. Much easier in the case of a drop down, but do-able, with some work, in the case of an ordered list.
--Dave
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!
This is code from a site I currently working on. Simple script to add numeric values to a select list, you cn edit it to suit your needs. I don't know what type of list you are looking for. In the example I would add the numeric values entered together (name="checkamount") I would then post the value to another page or the same page for processing.
From there on its a matter of what language you are using and what the purpose of your list is. What exactly do you need to do?
Code:
<form action="The_page_which_I_post-too" method="post">From there on its a matter of what language you are using and what the purpose of your list is. What exactly do you need to do?
Code:
<script>
var checklist = new Array();
var listi = 0;
function init_checklist()
{
var objSub = document.getElementsByName("checklist")[0];
listi = objSub.length;
if(listi != 0 && checklist.length == 0)
{
for(var i = 0; i < listi; ++i)
{
checklist[i] = objSub.options[i].text;
}
}
}
function addcheck()
{
var amount = document.getElementsByName("individualcheckamount")[0].value * 1;
if(amount == 0)
{
return;
}
init_checklist();
var objSub = document.getElementsByName("checklist")[0];
var checklist_values = "";
checklist[listi] = amount;
var listOpt = document.createElement("option");
listOpt.value = checklist[listi];
listOpt.text = checklist[listi];
objSub.add(listOpt);
var checkamount = 0;
for(var i = 0; i <= listi; ++i)
{
checkamount += checklist[i] * 1;
checklist_values += checklist[i] + ":"
}
++listi;
document.getElementsByName("individualcheckamount")[0].value = "";
document.getElementsByName("checkamount")[0].value = checkamount;
document.getElementsByName("checklist_values")[0].value = checklist_values;
}
function removecheck()
{
var objSub = document.getElementsByName("checklist")[0];
var si = objSub.selectedIndex;
if(si == -1)
{
alert("Please select a check amount to delete!");
return;
}
init_checklist();
var checkamount = document.getElementsByName("checkamount")[0].value - checklist[si];
document.getElementsByName("checkamount")[0].value = checkamount;
objSub.options[si] = null;
var checklist_new = new Array();
var j = 0;
for(var i = 0; i < listi; ++i)
{
if(i != si)
{
checklist_new[j++] = checklist[i];
}
}
--listi;
checklist = checklist_new;
}
</script>
<table>
<td>Check Amount:<td align=right><input type="text" name="individualcheckamount" maxlength=7 style='width:60px'>
<tr>
<td align=right><button onClick="javascript:addcheck();"> Add </button>
<td align=right><button onClick="javascript:removecheck();"> Delete </button>
<td align=right><select name="checklist" size="4" maxlength=7 style='width:90px'></select>
<td align=right><input readonly=readonly type="text" name="checkamount" value='' maxlength=7 style='width:60px'>
<input type=hidden name=checklist_values>
</table>- Status
Similar threads
- Locked
- Question