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>

...到表单，如果用户选择“Coffee”选项，那么当用户点击发送按钮时，我想在textarea中添加“Coffee keep me awake”文本。因此，当表单发送到数据库时，它将包含“Coffee keep me awake”，然后是用户在textarea中写的内容。

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

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

Answer 1

我认为您可以从服务器端访问您的选择下拉值并将其附加到文本

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

编辑：我一开始并没有看到这是在提交页面时。为此，发布的编码应该可以正常工作。只有在他们可以更新自定义文本时才应使用此方法。

如果您确实需要在前端执行此操作，则可以执行此类操作。

小提琴：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>

Answer 3

codingbiz发布的答案对你有用..（不能upvote，没有特权:(）。

但是如果你想要一个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>

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

3 个答案: