从下拉菜单中选择统计信息后，使用自定义文本自动填充文本字段

Question

I need some help for this script. It's a script I got from other place and I would like to add a function to it but I really got stuck. This is the script:

          <select name="order_status_id">
            <?php foreach ($order_statuses as $order_statuses) { ?>
            <?php if ($order_statuses['order_status_id'] == $order_status_id) { ?>
            <option value="<?php echo $order_statuses['order_status_id']; ?>" selected="selected"><?php echo $order_statuses['name']; ?></option>
            <?php } else { ?>
            <option value="<?php echo $order_statuses['order_status_id']; ?>"><?php echo $order_statuses['name']; ?></option>
            <?php } ?>
            <?php } ?>
          </select>
        </td>
      </tr>
      <tr>
        <td><?php echo $entry_notify; ?></td>
        <td><input name="notify" type="checkbox" value="1" checked="checked" /></td>
      </tr>
      <tr>
        <td><?php echo $entry_comment; ?></td>
        <td><textarea name="comment" cols="40" rows="8" style="width: 99%"></textarea>

I would like to fill the textfield automatically after I selected one name from the dropdown menu. for example in the dropdown listbox I selected a status "Processing" then the textfield below will automatically fill with "We are now processing your request. Please wait for X days and we would inform you shortly."

So when I selected another status "canceled" , the textfield will change it's content with "We have cancelled your request." and so on..

Please tell me if my description wasn't clear enough. Thank you so much beforehand.

Answer 1

You can add a javascript function that will do what you need in the onchange event of your select box like this:

<select id="order_status_id" name="order_status_id" onchange="updateTextBox()">
<textarea id="comment" name="comment" cols="40" rows="8" style="width: 99%"></textarea>

Also I added id values for both elements so we can easily select them with getElementById

This event would fire each time you change the selection. You then would implement a simple javascript function updateTextBox() that will update the textbox for you:

function updateTextBox() {
    var orderStatusSelect = document.getElementById("order_status_id");
    var status = orderStatusSelect.options[orderStatusSelect.selectedIndex].text;
    var myTextBox = document.getElementById("comment");

    if(status == "Processing") {
        //set the value of the text box
        myTextBox.value = "We are now processing your request. Please wait for X days and we would inform you shortly." ;
    } else if(status == "Cancelled") {
        myTextBox.value = "We have cancelled your request!";
    } else if(status == "OtherStatus") {
        myTextBox.value = "another message goes here!";
    }
    //and so on for all different options
}

See this jsFiddle for a running example.