PDA

View Full Version : Urgent help - dropdown issue


Cyberoxy
06-28-2011, 02:11 PM
Hey guys / gals

I am using HTML. When you select one example "Faith.jpg" from the first dropdown, then another dropdown should link this and display several prices. Each image with different prices.

How to do this in code?? I urgently need your help. I'm busy developing for my client. Thanks!

Look at my codes below:


<body>

<select name="ORDER 1" id="dlist1" onchange="swapImage1()">
<optgroup label="Sow Seeds of Love">
<option value="None">None</option>
<option value="Images/SowSeeds/Faith_small.jpg">Faith </option>
<option value="Images/SowSeeds/Hope_small.jpg">Hope</option>
<option value="Images/SowSeeds/Grace_small.jpg">Grace</option>
<option value="Images/SowSeeds/Peace_small.jpg">Peace</option>
<option value="Images/SowSeeds/FlowerSeedSachet_small.jpg">Flower Seed Sachet</option>
</optgroup>
</select>

//This is linked to the above first dropdown when you select Faith.jpg
<select>
<option>Description</option>
<option>Card A6 (blank) - R32.00 </option>
<option>Memo Book A6 - R62.00 </option>
<option>Gift Tags (4 designs per packet) - R8.50</option>
<option>Gift Tags - Single - Assorted - R1.80</option>
<option>Key Rings Perspex - R30.00</option>
<option>Fridge Art - R40.00 </option>
</select>

AND for example you choose another image with different prices

//This is linked to the above first dropdown when you select Hope.jpg (different prices)
<select>
<option>Description</option>
<option>Card A6 (blank) - R35.00 </option>
<option>Memo Book A6 - R65.00 </option>
<option>Gift Tags (4 designs per packet) - R9.50</option>
<option>Gift Tags - Single - Assorted - R1.80</option>
<option>Key Rings Perspex - R20.00</option>
<option>Fridge Art - R40.00 </option>
</select>
</body>


Thank you :-)

Corrosive
06-28-2011, 05:26 PM
Don't really understand what you mean. Could you explain further please?

Cyberoxy
06-29-2011, 07:58 AM
Sorry Corrosive for not making it clear. Lets me explain again. Well I am bad at English because I am Afrikaans from South Africa. Try my best :)

What I mean is that I want two dropdowns linked to each other so that when you select one item (card named Happy bday) of the first dropdown, then the second dropdown should display the prices (Card A6 R32 and Memo book R62 etc) you want to select. But each card with different prices, for example: happy bday card = Card A6 R32 and Memo book R62. Other card get well soon = Card A6 R35 and Memo book R64.

So I want you to select one item, the linked dropdown should automattically display own prices.

Hope you understand it better. I know I should code in java but I just dont know how to do this. Hope you can help me.

Thank you very much!

Cheers
Cyberoxy

Look at my codes below:


<body>

<select name="ORDER 1" id="dlist1" onchange="swapImage1()">
<optgroup label="Assorted Cards">
<option value="None">None</option>
<option value="Images/HappyBday.jpg">Happy Birthday Card </option>
<option value="Images/GetWell.jpg">Get Well Soon Card</option>
</optgroup>
</select>

//This second dropdown should be linked to above first dropdown - Happy bday card's prices
<select>
<option>Description</option>
<option>Card A6 (blank) - R32.00 </option>
<option>Memo Book A6 - R62.00 </option>
<option>Gift Tags (4 designs per packet) - R8.50</option>
<option>Gift Tags - Single - Assorted - R1.80</option>
<option>Key Rings Perspex - R30.00</option>
<option>Fridge Art - R40.00 </option>
</select>


//This dropdown should be linked to the first dropdown - Get well card's prices (different prices) but this is not third dropdown, only include second
dropdown.
<select>
<option>Description</option>
<option>Card A6 (blank) - R35.00 </option>
<option>Memo Book A6 - R65.00 </option>
<option>Gift Tags (4 designs per packet) - R9.50</option>
<option>Gift Tags - Single - Assorted - R1.80</option>
<option>Key Rings Perspex - R20.00</option>
<option>Fridge Art - R40.00 </option>
</select>
</body>

Should use switch code? But how?

Your help much apprecaited :-)




Thank you :smile:

Cyberoxy
06-29-2011, 08:14 AM
Hav a look at this link : http://www.asp.net/ajax/ajaxcontroltoolkit/samples/CascadingDropDown/CascadingDropDown.aspx

Thats what I mean. But it is only used for ASP.NET but I am currently using HTML. How to code in javascript??

Corrosive
06-29-2011, 08:15 AM
Oh right I see :)

First up, don't get java and javascript mixed up. Two different things :) You want javascript 'onchange' for this I think. How is your database set up to generate the prices? I.e. when you change the option, what is the call to the database going to be to get the correct table of prices?

Corrosive
06-29-2011, 08:16 AM
Hav a look at this link : http://www.asp.net/ajax/ajaxcontroltoolkit/samples/CascadingDropDown/CascadingDropDown.aspx

Thats what I mean. But it is only used for ASP.NET but I am currently using HTML. How to code in javascript??

Ah, if you are using asp then I am out at the javascript suggestion. I know nothing about asp, sorry :(

emygold
06-29-2011, 09:26 AM
Hey friend i would have love to solve this challenging situation, but am just new to web design.. I can only work on HTML and Java and scripting language..

Cyberoxy
06-29-2011, 12:31 PM
Hey Corosive

Everything is working expect the price is not shown up.

When I inserted the javascript code for displaying image when selected item, it is working well but the prices was not shown up. Something with Javascript. Can you check my below code where is incorrect? Your help much appreciated. I must say it is urgent. Please help me :-)

Look at the red code (insert) below:

<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById("dlist1").onchange = function() {
var option = this.options[this.selectedIndex];
document.getElementById("price_card").innerHTML = option.getAttribute("data-card") ? option.getAttribute("data-card") : "";
document.getElementById("price_memo").innerHTML = option.getAttribute("data-memo") ? option.getAttribute("data-memo") : "";
document.getElementById("price_tags1").innerHTML = option.getAttribute("data-tags1") ? option.getAttribute("data-tags1") : "";
document.getElementById("price_tags4").innerHTML = option.getAttribute("data-tags4") ? option.getAttribute("data-tags4") : "";
document.getElementById("price_key").innerHTML = option.getAttribute("data-key") ? option.getAttribute("data-key") : "";
document.getElementById("price_fridge").innerHTML = option.getAttribute("data-fridge") ? option.getAttribute("data-fridge") : "";
}
}
</script>

<script type="text/javascript">
function swapImage1() {
var image = document.getElementById("imageToSwap1");
var dropd = document.getElementById("dlist1");
image.src = dropd.value;
};
</script>

<script type="text/javascript">
function swapImage2() {
var image = document.getElementById("imageToSwap2");
var dropd = document.getElementById("dlist2");
image.src = dropd.value;
};

</script>

</head>

<body>

<table width="700">

<tr>
<td>
<p class="Card">ORDER 1:</p>

</td>
</tr>
<tr>
<td>
<p class="Dropdown">
<select name="ORDER1" size="12" multiple="multiple" id="dlist1" onchange="swapImage1()">
<optgroup label="Sow Seeds of Love">
<option value="None">None</option>
<option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</option>
<option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Grace01_green.jpg">Grace</option>
<option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/Order_names/SowSeeds/Hope01_blue.jpg">Hope</option>
<option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/Order_names/SowSeeds/Peace01_pink.jpg">Peace</option>
<option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option>
</optgroup>
</select>

</p>

</td>
<td>
<img class="ImageToSwap" id="imageToSwap1" src="Images/DropdownImages.gif" width="147" height="207" />

</td>

</tr>
</table>


//This price list is not shown up.
<table>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td>
<td id="price_card"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td>
<td id="price_memo"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td>
<td id="price_tags4"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td>
<td id="price_tags1"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td>
<td id="price_key"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td>
<td id="price_fridge"></td>
</tr>
</table>


<table width="700">

<tr>
<td>
<p class="Card">ORDER 2:</p>

</td>
</tr>
<tr>
<td>
<p class="Dropdown">
<select name="ORDER2" size="12" multiple="multiple" id="dlist2" onchange="swapImage2()">
<optgroup label="Sow Seeds of Love">
<option value="None">None</option>
<option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Faith01_yellow.jpg">Faith</option>
<option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/Order_names/SowSeeds/Grace01_green.jpg">Grace</option>
<option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/Order_names/SowSeeds/Hope01_blue.jpg">Hope</option>
<option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/Order_names/SowSeeds/Peace01_pink.jpg">Peace</option>
<option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/Order_names/SowSeeds/FlowerSeedSachet01_two girls.jpg">Flower Seed</option>
</optgroup>
</select>

</p>

</td>
<td>
<img class="ImageToSwap" id="imageToSwap2" src="Images/DropdownImages.gif" width="147" height="207" />

</td>

</tr>
</table>

//This price list is also not shown up
<table>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td>
<td id="Td1"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td>
<td id="Td2"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td>
<td id="Td3"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td>
<td id="Td4"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td>
<td id="Td5"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td>
<td id="Td6"></td>
</tr>
</table>

</body>

Thank you
Natz

domedia
06-29-2011, 12:50 PM
Java != JavaScript

Although I'm sure many know what you really mean, it's a landmine for confusion in some contexts.
They're completely different languages.