Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-03-09
4
Medium Priority
?
287 Views
Last Modified: 2012-05-11
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
Comment
Question by:lordrt
  • 2
  • 2
4 Comments
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 2000 total points
ID: 35091988
You would have to use jQuery for that to make it easy as possible:
I've created an example
http://jsfiddle.net/VETfB/
0
 
LVL 4

Author Comment

by:lordrt
ID: 35092278
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
 
LVL 27

Assisted Solution

by:Lukasz Chmielewski
Lukasz Chmielewski earned 2000 total points
ID: 35092315
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
 
LVL 4

Author Comment

by:lordrt
ID: 35092389
thanks much appreciated...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question