Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

Question

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage.

Here is a snippet of my HTML:

<div class="payment-term">
   <label>Billing period:</label>
   <select id="billing-price" name="billing-term" class="selectpicker">
     <option value="200">12 Months: $200/mo. (Save 20%)</option>
     <option value="250">1 Month: $250/mo.</option>
   </select>
</div>
<div class="card-charge-info">
    Your card will be charged $<span id="payment-total"></span> now, and your subscription will bill $<span id="payment-total"></span> every month thereafter. You can cancel or change plans anytime.
</div>

This is the initial Javascript code that I have started:

var e = document.getElementById("#payment-term");
var stringPmt = e.options[e.selectedIndex].value;

You can view the progress in my JSFIDDLE here: http://jsfiddle.net/rynslmns/DcJ4f/1/

javascript jquery html css select

Answer 1

Answer №1

To update the prices separately, you will need to connect an event to your select box and have functions for each price with their respective ids.

var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);

function updatePrice(e) {
    var price = select.value;
    document.getElementById('payment-total').innerText = price;
    document.getElementById('payment-rebill').innerText = price;   
}

Check out the live example here: http://jsfiddle.net/DcJ4f/2/

Answer 2

To update the prices separately, you will need to connect an event to your select box and have functions for each price with their respective ids.

var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);

function updatePrice(e) {
    var price = select.value;
    document.getElementById('payment-total').innerText = price;
    document.getElementById('payment-rebill').innerText = price;   
}

Check out the live example here: http://jsfiddle.net/DcJ4f/2/

Answer 3

Answer №2

Retrieve the chosen value with this code snippet:

var selectedPrice = document.getElementById("billing-price").value;

Answer 4

Retrieve the chosen value with this code snippet:

var selectedPrice = document.getElementById("billing-price").value;

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

Answer №1

Answer №2

Similar questions

Is there a way to automatically zoom in when clicking on a marker and centering the map to that

Contrasting characteristics of class members in JavaScript versus TypeScript

Tips for implementing a controlled RadioGroup in React: Mapping through an array of values to dynamically populate radio buttons

Unable to modify the state with a computed setter in VueJS

creating an animated loop within an Angular template

In AngularJS, I was attempting to display array indexes in reverse order. Can anyone provide guidance on how to achieve this?

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

What is the process for utilizing jQuery's advanced ticker feature to extract content from a text file?

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

What is the best way to ensure that two Node processes do not insert duplicate database records when running concurrently?

How can Angular prevent displaying 404 errors in the console by utilizing fallback mechanisms?

When the browser window is resized to mobile view, a div is overlapped by an image

Code for remotely connecting to a server and starting a Node.js application called app.js via SSH

Can you explain the significance of "javascript:void(0)"?

Retrieve Images from URL - Similar to Facebook Thumbnails

What is the best way to set the first radio button as the default selection in Material UI?

When the drop-down selection changes in AngularJS, the textbox value becomes empty

The value returned by EntityRecognizer.resolveTime is considered as 'undefined'

Locate the selected icon on one webpage and automate the clicking of a similar icon on a different webpage using Python and Selenium

The challenge of aligning widgets in bootstrap panels across different browsers