JQuery get textbox value dynamically

Hello,
I am trying to get a value out of a textbox and then have it placed in two places on the page mixed with other text and would like to have it dropped there as it is being typed in the textbox. How can that be done?
LVL 2
maredzkiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
setTimerout(function() { $("#otherPlaceID1,#otherPlaceID2,,#otherPlaceIDn").val( $("#ID_OF_YOUR_TEXTBOX").val() ) }, 350);

Open in new window


or if you don't worry about all technic to change the textbox value, just use :

$("#ID_OF_YOUR_TEXTBOX").change(function() {
      $("#otherPlaceID1,#otherPlaceID2,,#otherPlaceIDn").val( $(this).val() );
});

Open in new window

or :

$("#ID_OF_YOUR_TEXTBOX").bind("change keyup blur focus copy paste click",function() {
      $("#otherPlaceID1,#otherPlaceID2,,#otherPlaceIDn").val( $(this).val() );
});

Open in new window

0
maredzkiAuthor Commented:
leakim971,
any ideas how I can have the labels (i.e. #otherPlaceID1) expand dynamically based on the text that is entered in the textbox?
0
leakim971PluritechnicianCommented:
you can play with width when possible with :

$("#otherPlaceID1").css( "width", "100px");
$("#otherPlaceID1").css( "width", $("#ID_OF_YOUR_TEXTBOX").width * 1.25 + "px" ); // 1.25 x width of your textbox

if it's a label, use html() instead val()

$("#otherPlaceID1,#otherPlaceID2,,#otherPlaceIDn").html( $(this).val() );
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

maredzkiAuthor Commented:
ok, actually what is best used in this scenario if not a label if you just want to display text?
0
leakim971PluritechnicianCommented:
the best? I don't know. It depend your needs... You can use span, div, p, h1, h2, h3 and so on.
0
maredzkiAuthor Commented:
here is the link I am trying to test, take a look. Does not seem to work.

URL
0
leakim971PluritechnicianCommented:
<script type="text/javascript">
<script language="JavaScript">

what is this ?

valid  :

<script type="text/javascript" language="Javascript">

now you must be sure to run the code once page is totally loaded not before :

<script type="text/javascript" language="Javascript">

$(document).ready(function() {

$("#txt_name).change(function() {
      $("#txt_name_dynamic1").val( $(this).val() );
});

});

</script>

Open in new window

0
maredzkiAuthor Commented:
not sure...

made the changes you recommended, but still no joy.
0
leakim971PluritechnicianCommented:
there's a missing quote after text_name, should be :
$("#txt_name").change(function() {
0
mcnuteCommented:
use the keydown() method of jquery.

$("#txt_name").keydown(function(e) {

$("#txt_name_dynamic1").val( e.target.val() ); // val() is only for input text fields use html() instead for span div p

});

Open in new window

0
maredzkiAuthor Commented:
mcnute,
so for span/div it would look like this?

$("#txt_name").keydown(function(e) {

$("#txt_name_dynamic1").html( e.target.html() ); // val() is only for input text fields use html() instead for span div p

});

Open in new window

0
mcnuteCommented:
No, it still would be val(), because your $("#txt_name") must be an input field for users to write something in it.

$("#txt_name").keydown(function(e) {

         $("#txt_name_dynamic1").html*( e.target.val()** ); // val() is only for input text fields use html() instead for span div p

});

* this here can be "val()" or "html()" according to if  $("#txt_name_dynamic1") is an input field or a div, span, p etc.

** this must remain val() in order to get the user input.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maredzkiAuthor Commented:
Thank you both for helping me out getting this done. Here is a working sample in case someone would like to use it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="Javascript">
$(document).ready(function() {

$(function(){
$('#txt_name').keyup(function(){
$('#txt_name_dynamic1,#txt_name_dynamic2').text($(this).val());
});
});

});

</script>

</script>
</head>
<body>

<p class="strong">Enter name</p>
    <p><input type="text" id="txt_name" name="txt_name" size="50">

<p>We should see the value of the textbox  -> <span id="txt_name_dynamic1"></span> <- here and here -> <span id="txt_name_dynamic2"></span> <- </p>

</body>
</html>

Open in new window

0
mcnuteCommented:
you're right with keyup, obviously you want the input after the input has changed.
0
maredzkiAuthor Commented:
Thanks guys!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.