1

我正在使用一个微消息 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 中写的内容。

我认为使用 Javascript 或 PHP 可以做到这一点，这两者我都不太了解，所以详细的回复是有益的。此外，如果您需要更多信息或脚本，请随时询问。

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

4

3 回答 3

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
?>

应该这样做

于 2012-08-09T19:24:56.590 回答
2

你是对的，一个简单的 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/

编辑：起初我没有看到这是在提交页面时。为此，codingbiz 发布的内容应该可以正常工作。仅当他们可以更新自定义文本时才应使用这种方式。

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

小提琴：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>​
于 2012-08-09T19:26:51.240 回答
2

codingbiz 发布的答案对你有用..（不能投票，没有特权：（）。

但是，如果您想要一个 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>​
于 2012-08-09T19:47:48.410 回答