[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

help with dynamic update of a textbox to accept new value when drop-down selection is changed in html forms

Hello
Anyone can please provide me with a sample code to perform dynamic updates on a text-box display in a html form, whereby multiple drop-downs are present, example drop-down 1 has a list of 3 options, with each one having a value, drop-down 2 same etc, and if I select only an option from drop-down 1, the text box displays the corresponding value, and if I select an option from drop-down 2 as well with an option from drop-down 1 selected, the text-box displays the sum of value from 1 and 2?
0
lordrt
Asked:
lordrt
  • 2
  • 2
2 Solutions
 
Lukasz ChmielewskiCommented:
You would have to use jQuery for that to make it easy as possible:
I've created an example
http://jsfiddle.net/VETfB/
0
 
lordrtAuthor Commented:
thanks, but is this part in a function or something ??

$('select[name=option1]').change(function() {
    $('input[name=result]').val($(this).val());
});

$('select[name=option2]').change(function() {
    var v1 = $('select[name=option1]').val();
    var v2 = $('select[name=option2]').val();
    var sum = parseInt(v1) + parseInt(v2);
    $('input[name=result]').val(sum);
});
0
 
Lukasz ChmielewskiCommented:
This is part of the jQuery library:
http://jquery.com/
Look here
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26872577.html?cid=1131#a35079850

You just have to add
 <script src="http://code.jquery.com/jquery-1.5.js"></script> 

Open in new window

to the head section and wrap what you pasted into
<script>
    $(document).ready(function(){
       // HERE    
    });
</script>

Open in new window


I really recommend jQuery - it is much easier than plain JS having the functions gathered into simple commands.
0
 
lordrtAuthor Commented:
thanks much appreciated...
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now