Or_A
asked on
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!
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!
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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...>=<inp ut...> for?
i just used:
<input...>
<input...>
<input...>
can you please explain?
thanks :)
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...>=<inp
i just used:
<input...>
<input...>
<input...>
can you please explain?
thanks :)
I just copied the sample from previous jQuery solution...
<input...>+<input...>=<inp ut...>
you can ignore it... OnKeyUp & OnKeyPress is almost same, whicever works fine for you, use that one...
<input...>+<input...>=<inp
you can ignore it... OnKeyUp & OnKeyPress is almost same, whicever works fine for you, use that one...
http://www.w3schools.com/jsref/dom_obj_text.asp
http://www.w3schools.com/jsref/prop_text_value.asp