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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
"Go Fund Me" type plugin 5 24
parse url to form? 7 25
Alert after MVC form submitted 1 22
Bootstrap list items overlap 3 11
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

861 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