output a string depending on a user html-select

Question

I have a form where the user inputs a quantity from 1 to 10, and a readonly text field where I need to output a string with the calculated price. Could also be another king of container, but since the position is inside a formatted cell, I'd prefer not to use a div. As told, anything is inside a form to post values (there's a captcha too) to a php file for the purchase process. Here is my code as far as is concerned:

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").innerHTML = "Total price: \u20AC " + totalprice;
}

<form method="post" id="buy_form" action="buy.php">

<select name="numberselect" id="number_select" onChange="calculatePrice()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<input type=text class="totalprice" id="total_price" style="border: none" readonly>

//a captcha image
//a captcha input field
//a submit button

</form>

The function simply does not output anything in the readonly text field. What am I missing?

I've edited your code into a snippet but you're missing a closing `` tag. I didn't add this, in the event it's the cause of your issue(s). — Tyler Roper, Apr 19 '19 at 13:28
Question : this here "var num_pieces = parseInt(form.elements.number_select.value);" shouldnt it be "numberselect".value because the name attribute is without the underscore? Maybe you should choose it by ID otherwise it won't be recognised — Edwardcho Vaklinov, Apr 19 '19 at 13:29
Well, this isn't going to work because there are no `option`s in your `select`. You should consider using `addEventListener` instead of an inline HTML attribute. Finally, `input` elements have a `value`, not `innerHTML`. — Heretic Monkey, Apr 19 '19 at 13:33
Possible duplicate of [What is innerHTML on input elements?](https://stackoverflow.com/questions/20604299/what-is-innerhtml-on-input-elements) — Heretic Monkey, Apr 19 '19 at 13:33

score 1 · Accepted Answer · answered Apr 19 '19 at 13:43

document.getElementById("total_price").innerHTML

should be,

document.getElementById("total_price").value

function calculatePrice() {
        var form = document.getElementById('buy_form');
        var num_pieces = parseInt(form.elements.number_select.value);
        var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
        var totalprice = price_for_1 * num_pieces;
        document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
    }

<form method="post" id="buy_form" action="buy.php">

    <select name="numberselect" id="number_select" onChange="calculatePrice()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>

    <input type=text class="totalprice" id="total_price" style="border: none" readonly>
</form>

I am wondering if ' onChange="calculatePrice()" ' in the select has something wrong — gab, Apr 19 '19 at 13:49
I added an " alert('totalprice'); " inside the function just to debug, but no alert. So something isn't going on between the select and the function — gab, Apr 19 '19 at 13:53
Tried again and now it runs. So thank you, my issue is solved — gab, Apr 19 '19 at 13:59

score 1 · Answer 2 · answered Apr 19 '19 at 13:47

Actually issue is

 document.getElementById("total_price").innerHTML

innerHTML will never work, because innerHTML will add HTML element on the element fetched in javascript

Should use,

document.getElementById("total_price").value

So function will look like this

function calculatePrice() { 
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

Hope this will help

This is my pin, have a look, its working fine as you required, Have a look, let me know, if i can help you in this https://codepen.io/dupinderdhiman/pen/MRGrMv — Dupinder Singh, Apr 19 '19 at 14:19

score 0 · Answer 3 · answered Apr 19 '19 at 14:07

In your JavaScript code do the following changes:

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

window.calculatePrice = calculatePrice;

Change the innerHTML to value.
Add the function to window object.

score 0 · Answer 4 · answered Apr 19 '19 at 15:35

0

It might be this little thing you're missing. If this is native HTML and JS, the event is onchange, not onChange

Try this!

answered Apr 19 '19 at 15:35

Gineet Mehta

53
1
1
8

You're right. Nevertheless it was running without problems also with onChange. Mysteries of browsers ; ) – gab Apr 21 '19 at 07:00

output a string depending on a user html-select

4 Answers4