Solved

dynamically changing value of input field

Posted on 2011-02-17
5
439 Views
Last Modified: 2012-05-11
Hi,
a newbie will appreciate your help!

lets say that i have an html form with two text input fields that the user fills and another readonly input field. i wish that using js, the readonly field will always show, lets say, a concatenation of the two other fields. generally the question is how do i use the onblur/onclick etc. methods in certain fields to dynamically change the VALUE of another field.

thanks!

0
Comment
Question by:Or_A
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34918542
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34918582

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26829060.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function () {

  $(".concat").keyup( function() {
    var result = "";
    $(".concat").each( function() {
      result += $(this).val();
    });
    $("#result").val( result );
  });

});

</script>
<body>

<input class="concat" /> + <input class="concat" /> = <input id="result" readonly="true" />
 
</body>
</html>

Open in new window

0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 34918881
using pure js
<script type="text/javascript">
function concat(){
	var result = document.getElementById("result");
	var txt1 = document.getElementById("txt1");
	var txt2 = document.getElementById("txt2");
	result.value=txt1.value+ txt2.value;
	}
</script>
<body>

<input id=txt1 class="concat" onKeyPress="concat()"/> + <input id=txt2 class="concat" onKeyPress="concat()"/> = <input id="result" readonly="true" />

Open in new window

0
 

Author Closing Comment

by:Or_A
ID: 34924607
This is what i wanted, thanks, but i have two small questions:
1. i changed "OnKeyPress" to "OnKeyUp", because the first one was not working well, it always reflected in the "result" only the first n-1 characters from the last input that had been updated.  "OnKeyUp" works great.
2. what is the:
<input...>+<input...>=<input...> for?
i just used:
<input...>
<input...>
<input...>
can you please explain?
thanks :)
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34926423
I just copied the sample from previous jQuery solution...

<input...>+<input...>=<input...>

you can ignore it...  OnKeyUp & OnKeyPress is almost same, whicever works fine for you, use that one...

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now