Question

我有关于textarea字段的查询，我遇到了一个非常奇怪的问题，我想弄明白。首先，这是我想要做的：

我有一个下拉菜单，我从中选择一个模板。
选中后，我会在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是填充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>

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

Answer 1

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

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

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

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

type=submit的

W3C docs：

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

type=button的

W3C docs：

带有type属性值为“button”的input元素表示一个没有其他语义的按钮。

Answer 2

这只是因为你将输入类型定义为“提交”

<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;
}

在显示内容一秒钟之后，文本区域内容变为“值”

2 个答案: