文本区域内容在显示内容一秒钟后更改为"值"

我有一个关于textarea字段的查询，我遇到了一个非常奇怪的问题，我正在努力解决它。首先，我要做的是：

我有一个下拉菜单，从中选择一个模板
当选择时，我在文本区域显示模板的值｛这是有问题的部分｝
之后，我处理来自文本区域的数据。。好好休息是不可能的

问题描述：当我尝试使用函数document.getElementById("mytext").innerHTML=myvalue.value;将从下拉菜单中选择的值显示到文本区域时它会显示一秒钟，然后页面重新加载并再次显示默认值。

这是我的代码：

javascript:

<SCRIPT language="javascript">
function add(index_array) {
//create the form
var myform = document.createElement("form");
myform.id="k_form"
for ( i =0 ; i <index_array.length ; i ++)
{
var mytext = document.createElement("input");
mytext.tpye="text";
mytext.name=index_array[i];
mytext.value=index_array[i];
mytext.id=index_array[i];
myform.appendChild(mytext); 
}
mydiv=document.getElementById("d_div");
mydiv.appendChild(myform);
}
</SCRIPT>
<SCRIPT>
function getkeywords() {
//          var current_Date = new date();
//          document.write(current_Date);
var index_array = new Array();
var myString = "one and a two and a three = $ and four = $ and five = $";
var splitresult = myString.split(" ");
for(i = 0; i < splitresult.length; i++)
{
if (splitresult[i] == "$" && i > 1 )   //retireving the keywords..
{
index_array.push(splitresult[i-2]);
}
}
add(index_array);
/*                      
console.log("inside the if statement");
index_array.push(splitresult[i-2]); //saving the keywords for creating a new form with these as inputs....
}}
for ( i = 0 ; i < index_array.length ; i++ )
{ 
add(index_array[i]);
}
*/                      
}
</SCRIPT>    
<script>
function populate_text()
{
var myvalue = document.getElementById("rawquery");
document.getElementById("mytext").innerHTML=myvalue.value;
}
</script>

函数"populate_text"是填充文本区域的函数。我的HTML代码如下：

</HEAD>
<BODY>
<FORM>
<BR/>
<div align = "center">
<form method = "post" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
Select a Template<br />
<select name = "element" id = "rawquery">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
<br /> 
<input type = "submit"  onclick="populate_text()" name = "submit"><br /><br />
</form>
<textarea id = "mytext" name = "raw" rows = "10" cols = "50">raw      template</textarea>
<br /><br />
<INPUT type="button" value="Click To Enter Values"    onclick="getkeywords()"/>
</div>
<div align="center" id="d_div">
<br/> <br/>
</div>
</FORM>
</BODY>
</HTML>

我相信问题出在浏览器中的页面是逐行呈现的，但我不知道到底是什么原因造成的，以及如何解决。任何帮助都将不胜感激。

您正在使用一个提交按钮，并为其提供一个onclick处理程序。当点击按钮时，它会执行onclick处理程序，然后继续提交表单。这就是为什么你会看到值更新，然后页面重新加载。

如果您不想使用该按钮提交表单，那么<input type="submit">是错误的选择。改为使用按钮：

<input type="button" onclick="populate_text()" />

与默认提交表单的type=submit不同，type=button默认不执行任何操作。

W3Ctype=submit:文档

具有值为"submit"的类型属性的输入元素表示用于提交表单的按钮。

type=button:的W3C文档

具有值为"button"的类型属性的输入元素表示没有附加语义的按钮。

这只是因为您将输入类型定义为"提交">

<input type = "submit"  onclick="populate_text()" name = "submit" />

无论何时在提交时执行操作，页面都将重新加载。因此，默认值将再次渲染。您必须将其类型更改为"按钮"。

<select>在html中的更好用途是，您可以监听其所选项目的更改，如下所示，

<select name="element" id="rawquery" onchange="populate_text()">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>

您可以使用populate_text函数来更新文本区域

function populate_text() {
var myvalue = document.getElementById("rawquery");
document.getElementById("mytext").innerHTML = myvalue.value;
}

相关内容

最新更新

热门标签：