0

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

  1. 我有一个下拉菜单，我从中选择一个模板。
  2. 选择后，我在 textarea 中显示模板的值 {这是有问题的部分}
  3. 之后我处理来自文本区域的数据..并且休息不在图片中。

问题描述：当我尝试使用以下功能将下拉菜单中选择的值显示到文本区域时：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 是填充 textarea 的函数。我的 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>

我相信问题在于页面被逐行渲染到浏览器中，但我无法弄清楚究竟是什么导致了这个问题以及如何解决它。任何帮助表示赞赏。

4

2 回答 2

0

您正在使用提交按钮，并给它一个 onclick 处理程序。单击按钮时，它会执行您的onclick处理程序，然后继续提交表单。这就是您看到值更新然后页面重新加载的原因。

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

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

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

W3Ctype=submit文档：

type 属性值为“submit”的 input 元素表示提交表单的按钮。

W3Ctype=button文档：

type 属性值为“button”的 input 元素表示没有附加语义的按钮。

于 2012-11-22T08:15:44.073 回答
0

那只是因为您将输入类型定义为“提交”

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

每当提交时执行的操作，页面都会重新加载。因此，默认值将再次呈现。您必须将其类型更改为“按钮”。

在 html 中更好的用途<select>是，您可以像下面这样监听它的选定项目的变化，

<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;
}
于 2012-11-22T08:22:06.580 回答