• ll87
  • Member
  • Offline
  • Registered: March 23, 2009
  • Posts: 30

Topic: Fill textarea from select box (nightmare!)

I have a form which displays users notes that they have saved. I want a textarea to display the main note text when they select the title from a select box.

I am trying to insert a value into a textarea depending on the option chosen from a select box. This i am obviously trying to do in Javascript.

This ISN'T trying to put the same text into the textarea that is in the select box (this i can do easily).

I have brought values from a MySQL database and stored the titles in a select box, and the main text (that i want in the text area) in hidden input variables.

I have tried to 'id' both the titles and the main text that corresponds to them in the same way, thinking that i can get to the main text id by saying 'if title id == main text id set textarea value to main text value', but i cant work out how to do it!

this may not be very clear. here is my html/php:

<?php

    session_set_cookie_params(30*60,"/");
    session_start();
    include 'database.php';
    
    $id = $_SESSION['id'];
    $queryNotes = "SELECT title,note FROM notes WHERE member_id = $id";
    $result = mysql_query($queryNotes);
    $result1 = mysql_query($queryNotes);
    $rows = mysql_num_rows($result);

?>

<div id="note_body">
            <h3>Note:</h3>
            <textarea id="note_body_entry" name="note_area">
            
            </textarea>
            <?php
                for($i=0;$i<$rows;$i++){
                    $array = mysql_fetch_array($result1);
                    $note = $array['note'];
                    echo '<input id="note'.$i.'" type="hidden" value="'.$note.'" />';
                }
            ?>
        </div>
        <br />
        <div id="note_select">
            <h3>Choose a note:</h3>
            <select id="note_select_box" name="note_select_box">
                <?php
                    for($j=0;$j<$rows;$j++){
                        $array = mysql_fetch_array($result);
                        echo '<option id="title'.$j.'" onclick="loadNote(this)">'.$array['title'].'</option>';
                    }
                ?>
            </select>
        </div>

if any one can offer a way of doing this it would end my headache! javascript is a pain in the arse but looks like im stuck with it as a means of client side scripting.

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 157
  • Reputation: 2

Re: Fill textarea from select box (nightmare!)

Hi,

when you're writing out the <option> using PHP try:

            <select id="note_select_box" name="note_select_box">
                <?php
                    for($j=0;$j<$rows;$j++){
                        $array = mysql_fetch_array($result);
                        echo '<option id="title'.$j.'" onclick="loadNote(this)" value="note'.$j.'">'.$array['title'].'</option>';
                    }
                ?>
            </select>

(Notice the extra "value='noteX'" parameter on the <option>)

now you can put on the <select> an onChange event to fire a function:

<select id="note_select_box" name="note_select_box" onChange="fillTextArea();">

This will enable us to fire a function called fillTextArea() whenever the Select box's selected option changes. So therefore you might wanna add an initial blank option, before the PHP Loop.

You fillTextArea() function will look something like this:

<script type="text/javascript">
function fillTextArea(){
    // get the select box and put it in a variable
    var selectBox = document.getElementById('note_select_box');
    
    // get the VALUE of the selected option
    var noteId = selectBox.options[selectBox.selectedIndex].value;
    
    // get the contents of the Hidden element which ID matches the Selected option's value
    var noteContents = document.getElementById(noteId).value;
    
    // put text area in variable
    var txtArea = document.getElementById('note_body_entry');
    
    // clear the value of text area then fill with new content
    txtArea.value = '';
    txtArea.value = noteContents;
}
</script>

Above code is not tested so if it doesn't work then Sorry tongue

Good luck.

Vote up Vote down