dynamically changing value of input field

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!

Or_AAsked:
Who is Participating?
 
HainKurtConnect With a Mentor Sr. System AnalystCommented:
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
 
Gurvinder Pal SinghCommented:
0
 
ProculopsisCommented:

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
 
Or_AAuthor Commented:
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
 
HainKurtSr. System AnalystCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.