关于表单和 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： 我意识到，如果用户在文本区域中换行，当他们提交翻译时，就会出现 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： 添加一个 onkeydown 源文本区域中的事件执行翻译（或任何需要执行的操作），然后将结果放入结果文本区域中：

<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： 也许是一个 onsubmit 事件这form 元素将清理文本区域的输入。查看 JavaScript 的 encodeURIComponent。也许这对你有用：

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