CODEWITHSUNDEEP
jqueryhtmlforms
chell
chell

Reputation: 7866

how to I put the input from a field on a form into a text area on the same form

I have a form with a name field and a text area.

When the user types in their name I want to include it in the text area along with some other pre-formatted text.

How can this be done?

jQuery?

Upvotes: 0

Views: 74

Answers (4)

mu is too short
mu is too short

Reputation: 434675

Use a keyup handler on the text input and add a readonly="readonly" attribute to the textarea if you want to use it for display only.

For example:

<input type="text">
<br>
<textarea readonly="readonly" rows="10" cols="40"></textarea>

And some jQuery:

var static_text = "Where is pancakes house?\n\n";
$('input').keyup(function() {
    $('textarea').text(static_text + $(this).val());
});

Live demo: http://jsfiddle.net/ambiguous/Tt2gt/1/

Binding to the keyup event will get your <textarea> updating callback called every time a key is pressed in the <input> (including backspaces). If you use a change handler, the <textarea> won't be updated until the <input> loses focus and that doesn't sound like what you're after.

Upvotes: 1

kaps
kaps

Reputation: 478

Yes you can do it with jQuery.

$('#namefieldID').change(function() {
  var formatedText = $("#namefieldID").val() + "any text you want";//do any formatting you want here
  $("#textareaID").val( formatedText);
});

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

you can do it onchange event or onblur event of your name textbox

$('#name-id').change(function(){

var name = $(this).val();

$('#textarea').text("this is "+ name +" . he is the user");

});

http://api.jquery.com/blur/

http://api.jquery.com/change/

Upvotes: 0

ShaneC
ShaneC

Reputation: 2406

Yes, jQuery (as well as any old JavaScript) can do that for you. What you want to do is listen for the onchange event. Click here to read more on JavaScript events

In jQuery, we might have something like this:

$(document).ready( function(){

    $("#my_Name_Field").change( function(){

        var myText = "Some preformatted text." + 
                     "Oh, and here's the name you entered:" + $("#my_Name_Field").val();

        $("#my_Text_Field").val( myText );

    });

});

Where my_Name_Field represents the ID attribute of your "Name" text-field, and my_Text_Field represents the ID of your Text Area.

Upvotes: 0

Related Questions