/    Sign up×
Community /Pin to ProfileBookmark

A Puzzle

Copy linkTweet thisAlerts:
Dec 07.2005

Hoping someone can point me in the right direction.

My application has a pull down menu for various ingredients and an “add” button beside it to add the ingredient. When added, it will be appended to an ingredient list below the form and each line item of the list will have a field to change quantity and a button to delete.

Anyone have a good strategy how I should implement this?

Started down the path of writing to the list using an onchange with document.getElementById and .innerHTML. A loop will be used to add multiple lines for each ingredient added. I suppose each time a line is added, it can on-the-fly create a text form with a unique name for quantity. In regards to the delete button, I don’t know how the code will know which line item’s delete button was pressed. Any thoughts?

Thanks!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsDec 07.2005 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script>

function CngIngredient(obj){
index=obj.selectedIndex;
if (!obj.set){
obj.set=new Array();
for (zxc0=0;zxc0<obj.options.length;zxc0++){
obj.set[zxc0]=obj.options[zxc0].text;
obj.ary=new Array();
}
}
if (index<1){ return }
if (obj.options[index].text==obj.set[index]){
obj.options[index].innerHTML='&#8730; '+obj.options[index].innerHTML ;
obj.ary[index]=document.getElementById('TRClone').cloneNode(true);
document.getElementById('TBdy1').appendChild(obj.ary[index]);
obj.ary[index].sel=obj;
obj.ary[index].getElementsByTagName('TD')[0].firstChild.data=obj.set[index];
}
else {
obj.options[index].text=obj.set[index];
document.getElementById('TBdy1').removeChild(obj.ary[index]);
}
obj.selectedIndex=0;
}

function Remove(obj){
obj=obj.parentNode.parentNode;
for (zxc0=0;zxc0<obj.sel.length;zxc0++){
if (obj.sel.set[zxc0].match(obj.getElementsByTagName('TD')[0].firstChild.data)){
obj.sel.options[zxc0].text=obj.sel.set[zxc0];
}
}
obj.sel.selectedIndex=0;
document.getElementById('TBdy1').removeChild(obj);
}
</script>
<select onchange="CngIngredient(this);">
<option>Select</option>
<option>Sugar</option>
<option>Salt</option>
</select>
<table border="1">
<tr>
<td colspan="3" width="300" >Ingredient</td>
</tr>
<tbody id="TBdy1" >
</tbody>
</table>

<div style="position:absolute;visibility:hidden;" >
<table>
<tr id="TRClone" >
<td width="100">fred</td>
<td width="100"><input size="4" ></td>
<td width="100"><input type="button" name="" value="Remove" onclick="Remove(this);" ></td>
</tr>
</table>
</div>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@NotionCommotionauthorDec 08.2005 — I haven't gone in detail and figured out exactly what you did, but THANK YOU! It works great!
×

Success!

Help @NotionCommotion spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...