www.webdeveloper.com
Results 1 to 4 of 4

Thread: Need direction

  1. #1
    Join Date
    Jun 2011
    Posts
    3

    Need direction

    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.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>

  3. #3
    Join Date
    Jun 2011
    Posts
    3
    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.

  4. #4
    Join Date
    Jun 2011
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles