我有几个关于表单和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>