A little drop down help?

[Coly010]

I've made a dropdown box with some values in it.

Now what I want to do is, when somebody selects an option it changes the writing within a <td>.

Here's my code so far.

To be honest I don't see why it isn't working

<table width="75%" style="color: white;"><tr><td>Size:</td><td><select type="dropdown" name="size">
<option id="a2" onclick="A2()">A2</option>
<option id="a3" onclick="A3()">A3</option>
<option id="a4" onclick="A4()">A4</option>
<option id="a5" onclick="A5()">A5</option></select></td></tr>
<tr><td>Email Address:</td><td><input type="email" name="email" /></td></tr>
<tr><td>Price:</td><td id="price">£150</td></tr>
<tr><td></td><td><input type="submit" Value="Continue" /></td></tr></table></form>
<script type="javascript">
function A2()
{
         document.getElementById("price").innerHTML = "<td>£150</td>";
}
function A3()
{
         document.getElementById("price").innerHTML = "<td>£100</td>";
}
function A4()
{
         document.getElementById("price").innerHTML = "<td>£75</td>";
}
function A5()
{
         document.getElementById("price").innerHTML = "<td>£50</td>";
}
</script>

thanks for any help :)

[a_bertrand]

Why did you added the <td> within your JS? It will replace anyhow the content of your td... so no need to place the TD tag in the replacement string.

Second issue, instead of having on a "onclick" even on the option (which I doubt it works), you should use a "onchange" even on the select tag, and then see which value has been selected with something like

 

var drp=document.getElementById('myDropdown');
var value=drp.options[drp.selectedIndex].text;

[Coly010]

I'm confused now, lol, i'm sorry but could you please change the code so that it looks correct? thanks. Sorry but i'm very confused.

[Djkanna]

I think A.B means something like

<!--HTML-->
<p id="currentlySelected"></p>
<label for="selectList">Select something:</label>
<select type="dropdown" onchange="changeSelected()" name="options" id="selectList">
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
</select>

<!--JS-->
<script>
   function changeSelected() {
       var drp = document.getElementById('selectList'),
           drpVal = drp.options[drp.selectedIndex].text;

       document.getElementById('currentlySelected').innerHTML = drpVal;
       return;
   }
</script>

Could be wrong.

[Coly010]

Sorry put it's still not working.

What i'm trying to do is when the user clicks a size it changed the price.

So if there is an alternative method for doing this it would be great. Thanks :)

[a_bertrand]

For sure what DJ gave you works you simply need to add some more logic to show what YOU want there ;)

[Coly010]

i have tried lol look at my code now. lol I'm not good at this part of js/html btw this is encased in php :P

<form action="buy.php" method="POST"><input type="hidden" name="id" value="1" /><table width="75%" style="color: white;"><tr><td>Size:</td><td><select type="dropdown" id="selectList" onchange="changeSelected" name="size">

<option id="a2" value="£150">A2</option>

<option id="a3" value="£100">A3</option>

<option id="a4" value="£75">A4</option>

<option id="a5" value="£50">A5</option></select></td></tr>

<tr><td>Email Address:</td><td><input type="email" name="email" /></td></tr>

<tr><td>Price:</td><td id="price"><p id="currentlySelected"></p></td></tr>

<tr><td></td><td><input type="submit" Value="Continue" /></td></tr></table></form>

<script type="javascript">

function changeSelected() {

var drp = document.getElementById(\'selectList\'),

drpVal = drp.options[drp.selectedIndex].text;

document.getElementById(\'currentlySelected\').innerHTML = drp;

return;

</script>

[rulerofzu]

Is there a base value for what your trying to achieve.

Ie Base price is 15 + what ever option or is it just the option price.

DJK's code works as berty has stated you just need to work out what your trying to do.

[Coly010]

what i'm trying to do is :

if the user clicks on A2 then the price goes to £150

making any sense?