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
278 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

729 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