关于表单和php的问题(清除表单、实时刷新、多行)


Questions regarding forms and php (clearing form, live refresh, multiline)

我有几个关于表单和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=''",按下按钮时会清除一个文本框。有没有可能让同一个属性清除我表单中的两个文本区域?我似乎在任何地方都找不到用一个按钮清除2个元素的答案。我不想清除表单,因为我想保留所选的下拉值,这就是我这样做的原因

问题2:如何实现结果文本区域的实时刷新,以便用户可以简单地键入并查看结果?我看过所需的ajax和jquery,但很困惑,因为大多数都没有显示如何输出到表单元素,而只输出到div。(类似于谷歌的translate

问题3:我意识到,如果用户在文本区域中新建一行,当他们提交翻译时,会出现php头错误。有什么办法可以避免这种情况吗?这是我在表单中使用的translate.php文件的标题

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

我只是想把这作为一种学习上的锻炼,我真的很感激这三个问题的任何指导或答案。非常感谢你的帮助!

问题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 urlender()函数

答案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:可能是form元素中的onsubmit事件,该事件将清除文本区域中的输入。看看JavaScript的encodeURIComponent。也许这对你有用:

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