有关表单和 php 的问题（清除表单、实时刷新、多行）

Question

我有几个关于表单和 PHP 的问题，但如果我应该将它们放到不同的帖子中，我会的。

这是我的表单代码：

<form id="t-form" name="tForm" action="translate.php" method="POST">
            <div id="t-bar">
                <div class="t-select">
                    <select name="start-lang" id="choice-button">
                        <option value="english">English</option>
                    </select>
                    <label>into</label>
                    <select name="end-lang" id="choice-button" onChange="document.forms['tForm'].submit();">
                        <option value="caps"<?php if ($resLang == 'caps') echo ' selected="selected"'; ?>>CAPS</option>
                        <option value="lowercase"<?php if ($resLang == 'lowercase') echo ' selected="selected"'; ?>>lowercase</option>
                    </select>
                    <input type="submit" id="t-submit" value="Translate">
                </div>
            </div>
            <div id="t-main">
                        <textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onChange="document.forms['tForm'].submit();"><?php echo $source; ?></textarea>
                        <input type="button" id="t-clear" onclick="this.form.elements['t-src'].value=''">

                        <textarea id="txt-result" name="txt-result" readonly disabled="disabled" placeholder="result..."><?php echo $result; ?></textarea>
                        <input type="button" id="t-copy" name="t-copy">
            </div>
        </form>

问题 1： 我目前有onclick="this.form.elements['t-src'].value=''"，它会在按下按钮时清除一个文本框。是否可以在我的表单中使用相同的属性清除两个文本区域？我似乎无法在任何地方找到用 1 个按钮清除 2 个元素的答案。我不想清除表单，因为我想保留选定的下拉值，这就是我这样做的原因。

问题 2： 我该怎么做关于实现结果文本区域的实时刷新，以便用户可以简单地键入并查看结果？我已经查看了所需的 ajax 和 jquery 并且很困惑，因为大多数都没有显示如何输出到表单元素而只输出到 div。 （类似于谷歌的翻译）

问题 3： 我意识到如果用户在 textarea 中换行，当他们提交翻译时，它会给他们一个 php 标头错误。有什么想法可以避免这种情况吗？这是我在表单中使用的 translate.php 文件的标题：

header("location: /?txt-result=$result&t-src=$textSource&end-lang=$outputLang");

我只是尝试将其作为学习练习，并且非常感谢对这三个问题的任何指导或答案。非常感谢您的帮助！

Answer 1

问题 1

你应该有：

onclick="clearTextboxes();"

在 javascript 中类似：

//if you want to delete all the inputs that are of type text
function clearTextboxes(){
   var inputs = document.getElementById('t-form').getElementsByTagName('input');
   for (var control in inputs){
      if(inputs[control].getAttribute('type') == 'text'){
         inputs[control].value = '';
      }
   }
}

问题 2

这里太宽泛了，不能作为答案，你真的应该看看 jQuery 的 $.ajax，并创建一个有具体疑问的不同问题。

问题 3

使用 PHP urlencode() 函数

Answer 2

答案 1：让您的 onclick 事件调用一个为您清除这些值的函数：

<script type="text/JavaScript">
    function clearTextareas()
    {
        this.form.elements["t-src"].value = "";
        this.form.elements["txt-result"].value = "";
    }
</script>

<input type="button" id="t-clear" onclick="clearTextareas()">     

答案 2： 在源 textarea 中添加一个 onkeydown 事件以执行翻译（或任何需要执行的操作），然后将结果放入结果 textarea：

<script type="text/JavaScript">
    function translateText()
    {
        var text = this.form.elements["t-src"].value;
        // do something
        this.form.elements["txt-result"].value = text;
    }
</script>

<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onkeydown="translateText()"><?php echo $source; ?></textarea>

答案 3： 可能在 form 元素中的 onsubmit 事件将净化来自文本区域的输入。看看 JavaScript 的encodeURIComponent。也许这对你有用：

<script type="text/JavaScript">
    function sanitize()
    {
        this.form.elements["t-src"].value = encodeURIComponent(this.form.elements["t-src"].value);
    }
</script>