Need direction

**cjtannu** · 06-19-2011, 01:04 PM

Hi all,

I've been searching online for a few hours now and am stuck with how to describe my issue. I'm trying to create a dynamic text area that is updated based on input from a field and drop down as seen here: http://shortyawards.com/

I've messed around with keyup and it gets me part way there, but I don't know what the next level is to get the contents from the text field to be mirrored in the text area. Any direction would be greatly appreciated.

Thank you.

**Kor** · 06-20-2011, 08:51 AM

You don't need a JavaScript library (like JQuery) for such a simple thing. You may use a simple JavaScript code like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function fillTextArea(field){
var t=field.form['tarea'];
var v=field.value;
t.value=v;
}
</script>
</head>
<body>
<form action="">
<input type="text" onkeyup="fillTextArea(this)" onblur="fillTextArea(this)">
<br>
<textarea name="tarea"></textarea>
</form>
</body>
</html>

**cjtannu** · 06-20-2011, 10:23 AM

Kor,

Thank you for the direction that helps a lot! Would you be able to weigh in on also how to target a specific area within the text area?

Ideally there will be multiple inputs that need to be targeting a certain area in the text area like so:

lorem ipsum $input1 more lorem ipsum $input2

Where $input1 is from one text field and $input2 is from another field like a drop down.

Thank you again for the direction, this helps a lot.

**cjtannu** · 06-21-2011, 11:17 PM

I got this to work with the help of a friend. For anyone else that is interested, here is the code sample:

Code:

<select name="category" id="category">
    <option value="category1">Category 1</option>
    <option value="category2">Category 2</option>
    <option value="category3">Category 3</option>
</select>
<br/>
<textarea id="tweet" style="width: 350px; height: 50px">
    I want to vote for XYZ in category #category1
</textarea>

$('#category').change(function(){
   var text = $('#tweet').val();
    text = text.replace(/#\w+/, '#' + $(this).val());
   $('#tweet').val(text);
});

Thread: Need direction

Thread Tools

Display

Need direction

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions