单击发送按钮时将数据发送到textarea的列表框

Question

我正在使用允许用户以简单干净的形式提交消息的微信息PHP脚本。它使用数据库作为条目。它的组成部分看起来是这样的：

<form name="new_post" method="post" action="admin.php?page=wp-admin-microblog/wp-admin-microblog.php" id="new_post_form"> 
    <table> 
     <thead> 
     <tr> 
      <td> 
       <div id="postdiv" class="postarea" style="display:block;"> 
        <textarea name="wpam_nm_text" id="wpam_nm_text" style="width:100%;" rows="4"></textarea> 
       </div> 
       <p style="text-align:right; float:right;"><input name="send" type="submit" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" /> 
      </td> 
     </tr> 
     </thead> 
    </table> 
</form> 

我想添加一个下拉列表的形式和这取决于用户在下拉列表中选择，自定义文本应该被添加到当用户点击发送按钮时textarea（wpam_nm_text）消息的开头。

让我来解释一下。我想补充是这样的：

<select> 
<option>Milk</option> 
<option>Coffee</option> 
<option>Tea</option> 
</select> 

...的形式，如果用户选择了选项“咖啡”，那么我想添加文本“咖啡让我清醒”到textarea的时候用户点击发送按钮。所以当表单发送到数据库时，它将包含“Coffee让我醒来”，接着是用户在textarea中写的内容。

我会认为这是可能的使用Javascript或PHP，这两者我都没有很好的知识，所以详细的答复是有益的。另外，如果您需要更多的信息或脚本，请尽一切办法随时询问。

这里是一个小提琴，如果你想要一个：http://jsfiddle.net/tNrfA/

Answer 1

发表codingbiz答案会为你..（不能给予好评，没有priveleges :(）工作

但是，如果你想要一个JavaScript解决方案，我认为这应该适用于你..

<script type="text/javascript"> 

function setText(){ 

    var drink = document.getElementById('drink'); 
    var feed = document.getElementById('feed'); 
    feed.value = drink.value + " keeps me awake:" + feed.value; 

    } 

</script> 

<form name="new_post" method="post" id="new_post_form"> 
     <table> 
      <thead> 
      <tr> 
       <td> 

        <div id="postdiv" class="postarea" style="display:block;"> 
         <textarea name="wpam_nm_text" id="feed" style="width:100%;" rows="4"></textarea> 
        </div> 
        <select id = "drink"> 
         <option>Milk</option> 
         <option>Coffee</option> 
         <option>Tea</option> 
        </select> 
        <p style="text-align:right; float:right;"><input name="send" type="submit" onClick="setText()" class="button-primary" id ="submit" value='go' /> 
       </td> 
      </tr> 
      </thead> 
     </table> 
</form>​ 

Answer 2

我想你可以从服务器端访问您选择下拉值，并将其追加到文本

HTML

<select name="choice"> 
<option>Milk</option> 
<option>Coffee</option> 
<option>Tea</option> 
</select> 

PHP

<?php 
$wpam_nm_text = $_POST['wpam_nm_text']; 
$choice = $_POST['choice']; 

$customText = "default"; 

if($choice == "Coffee") 
    $customText = "Coffee keeps me awake"; 
else if($choice == "Milk") 
    $customText = "WhatStuffYouWantHere"; 

//combine the dropdown value and the textarea value 
$requiredVal = $customText.' '.$wpam_nm_text; 

print($requiredVal); 

//do whatever you want with $requiredVal 
?> 

应该这样做

Answer 3

你是对的，一个简单的javascript可以帮你实现这个目标。

<script> 
    var drinks = { 
     Milk: "does a body good", 
     Coffee: "keeps me up", 
     Tea: "is yummy" 
    }; 

    function optionChange(){ 
     var drinkText = drinks [document.getElementById('drinkSelection').value] 
     document.getElementById('wpam_nm_text').value = drinkText;  
    } 
</script> 

这里是更新的小提琴 http://jsfiddle.net/tNrfA/6/

编辑： 我并没有在第一次看到，这是在提交页面。为此，发布什么编码应该工作得很好。这种方式只能用于更新自定义文本。

如果你确实需要在前端做到这一点，你可以做这样的事情。

小提琴：http://jsfiddle.net/tNrfA/14/

var drinks = { 
    Milk: "does a body good", 
    Coffee: "keeps me up", 
    Tea: "is yummy" 
}; 

function submitForm(){ 
    drinkText = drinks [document.getElementById('drinkSelection').value] 
    document.getElementById('wpam_nm_text').value = drinkText + ' ' +document.getElementById('wpam_nm_text').value; 
    document.getElementById('new_post_form').submit();  
} 

   <div id="postdiv" class="postarea" style="display:block;"> 
        <textarea name="wpam_nm_text" id="wpam_nm_text" style="width:100%;" rows="4"></textarea> 
       </div> 
       <select id="drinkSelection"> 
        <option>Milk</option> 
        <option>Coffee</option> 
        <option>Tea</option> 
       </select> 
       <p style="text-align:right; float:right;"><input name="send" type="button" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" onclick="submitForm()" /> 
      </td> 
     </tr> 
     </thead> 
    </table> 
</form>​