Solved

JQuery get textbox value dynamically

Posted on 2012-04-10
15
451 Views
Last Modified: 2012-04-11
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?
0
Comment
Question by:maredzki
  • 7
  • 5
  • 3
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37829272
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
 
LVL 2

Author Comment

by:maredzki
ID: 37829369
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 37829395
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:maredzki
ID: 37829404
ok, actually what is best used in this scenario if not a label if you just want to display text?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37829434
the best? I don't know. It depend your needs... You can use span, div, p, h1, h2, h3 and so on.
0
 
LVL 2

Author Comment

by:maredzki
ID: 37829544
here is the link I am trying to test, take a look. Does not seem to work.

URL
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37829607
<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
 
LVL 2

Author Comment

by:maredzki
ID: 37829661
not sure...

made the changes you recommended, but still no joy.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37830215
there's a missing quote after text_name, should be :
$("#txt_name").change(function() {
0
 
LVL 11

Expert Comment

by:mcnute
ID: 37831798
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
 
LVL 2

Author Comment

by:maredzki
ID: 37832378
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
 
LVL 11

Accepted Solution

by:
mcnute earned 250 total points
ID: 37832483
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
 
LVL 2

Author Comment

by:maredzki
ID: 37833547
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
 
LVL 11

Expert Comment

by:mcnute
ID: 37833569
you're right with keyup, obviously you want the input after the input has changed.
0
 
LVL 2

Author Closing Comment

by:maredzki
ID: 37833737
Thanks guys!
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

730 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