Javascript producing a value into a form textbox on selection

Question

Trying to figure out how I can produce text dynamically in a text box of a form using javascript.

I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.

So far this is what I have but I have no value being produced in the textbox any help appreciated.

  function totalprice(){
        if($('#type').val() == '3'){

        $('#eventprice') == ("45");
        }

        }



 <input type="text"  disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />

Just saying, you _know_ that there are _good_ _proven_ frameworks that do this sort of thing (called data-binding), right? (KnockoutJS, EmberJS, AngularJS, the list is long) Also, check out http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript — Benjamin Gruenbaum, May 16 '13 at 01:26
what are you trying to do in your *function*? I can't get that — Sachin, May 16 '13 at 01:26
Also, to fix your current code `$('#eventprice'.val("45");` instead of `$('#eventprice') == ("45");` — Benjamin Gruenbaum, May 16 '13 at 01:27
Given that your `input` is `disabled` how is it going to do anything with an `onchange` event? (Typically programmatic changes, such as those effected by JavaScript, don't fire the `change` event, unless specifically made to do so.) — David Thomas, May 17 '13 at 21:34

webketje · Answer 1 · 2013-05-17T22:24:48.067

If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:

Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.

Working demo: http://jsbin.com/acuyux/6/edit

The HTML

<select id="type">
    <option data-price="25">Party</option>
    <option data-price="35">Meeting</option>
    <option data-price="45">Lounge</option>
  </select>
 <input type="text"  id="eventprice" name="eventprice" disabled="" class="form-input" />

The JS

$('#type').change(function totalprice(){
  $('option').each(function() {
    if($(this).val() === $('#type').val()) {
      $('#eventprice').val($(this).data('price'));
    }
  });
});

There are many DOM libraries using the `$` ... this is not jQuery specific — mate64, May 17 '13 at 21:41

Singh · Answer 2 · 2013-05-18T21:55:10.823

I would recommend using jQuery due to its efficient code.

HTML:

    <input type="text" disabled id="eventprice" />
  <select id="select">
    <option data-cost="5">Event 1</option>
    <option data-cost="10">Event 2</option>
  </select>

jQuery:

    $('#select').change(function () {
        var str = $(this).find('option:selected').data('cost');
        $('#eventprice').val(str);
    });

    // This code can be used to run it on load
  // $('#select').trigger('change');

Code in action:
http://jsfiddle.net/LkaWn/

Hope this helps :)

score 0 · Answer 3 · answered May 16 '13 at 01:58

0

Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.

answered May 16 '13 at 01:58

Joseph Myers

6,434
27
36

Javascript producing a value into a form textbox on selection

3 Answers3