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
277 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 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 500 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
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…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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).

738 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