CODEWITHSUNDEEP
javascriptjquerydrop-down-menuappend
user2946613
user2946613

Reputation: 131

Trying to dynamically populate a div based on user input from a drop down menu selection

I have this jquery: 

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>

<script>
$("#ImmortalAsuraKaiser").change(function(){
    var value = $("#ImmortalAsuraKaiser").val();
    $("#AsuraRevenue").append(value * 15);
});
</script>

This drop down menu:

 <select name="Quantity" id="ImmortalAsuraKaiser">
 <option value="0">0</option>
 <option value="1">1</option> 
 <option value="2">2</option> 
 <option value="3">3</option> 
 <option value="4">4</option> 
 </select>

And this div:

 <div id="AsuraRevenue"></div>

I'm trying to take whatever value the user selects from the drop down menu, multiply it by 15, and then append it to the div called "AsuraRevenue".

However, my code is not working. I'm not sure why. Any ideas?

Here is a test page: http://www.angelfire.com/rpg2/twotaileddemon/index.html

I currently only have this coded for the LEFTMOST drop down menu. I want to make it so that if I select a number - for example 3 - the number 45 appears next to the word "Cost:" (which is calculated by multiplying the value by 15 before appending it).

To give some background: I work in the advertising industry. I am trying to gather variables from various inputs and pass them to a javascript file to collect data when a user makes a purchase. I would like to display the cost associated with each purchase so that when a user selects a quantity from a drop down menu, the cost automatically updates. Eventually, I want to pass this to my javascript file!

Thanks! Let me know if any clarification is needed. Appreciate the help.

Upvotes: 0

Views: 845

Answers (2)

Rafael Brasil
Rafael Brasil

Reputation: 232

Your code is almost ok. However, you have to init the Change event only when the page is fully loaded. try this:

$(document).ready(function(){
    $("#ImmortalAsuraKaiser").change(function(){
        var value = $("#ImmortalAsuraKaiser").val();
        $("#AsuraRevenue").append(value * 15);
    });
});

Upvotes: 2

caspian
caspian

Reputation: 1804

Move you script tag to the end of the document and it will work - inside the head the jquery cannot find the #ImmortalAsuraKaiser element, so it does nothing.

OR

use the document.ready function: 

$(document).ready(function () {
    $("#ImmortalAsuraKaiser").change(function () {
        var value = $("#ImmortalAsuraKaiser").val();
        $("#AsuraRevenue").append(value * 15);
    });
});

see fiddle http://jsfiddle.net/DwS69/1/

Upvotes: 1

Related Questions