在顯示第二個內容後，文本區域內容更改爲「value」

我有一個關於textarea字段的查詢，我遇到了一個非常奇怪的問題，我試圖弄清楚它。首先，這是我想要做的：在顯示第二個內容後，文本區域內容更改爲「value」

我有一個下拉菜單，我從中選擇一個模板。
當選擇我顯示模板的值在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>

我相信問題是頁面被渲染到逐行的瀏覽器中，但我無法弄清楚究竟是什麼原因造成了這種情況，以及如何解決這個問題。任何幫助表示讚賞。

來源

2012-11-22 Riddle

你表單正在提交，在你的onclick函數的末尾添加'return false;'。 – Musa

嘗試過'document.getElementById（「mytext」）。value = myvalue.value;'？ – Passerby

@Musa，我編輯了protion。我不是孤獨的生成提交按鈕，我試圖這樣做，我提交的值使用「提交查詢」按鈕，調用「populate_text」請參閱HTML代碼 – Riddle

您正在使用提交按鈕，並給它一個onclick處理程序。點擊按鈕後，它會執行您的onclick處理程序，然後繼續提交表單。這就是您看到更新值然後重新加載頁面的原因。

如果您不想用該按鈕提交表格，那麼<input type="submit">是錯誤的選擇。使用按鈕來代替：

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

的type=button默認會什麼都不做，不像type=submit它默認提交表單。

W3C docs爲type=submit：

與一種類型的屬性的值是「提交」輸入元素表示提交表單的按鈕。

W3C docs爲type=button：

與一種類型的屬性的值是「鍵」表示不帶任何附加的語義的按鈕輸入元件。

來源

2012-11-22 08:15:44 MrCode

這只是因爲你被定義輸入類型爲「提交」

<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-22 08:22:06

在顯示第二個內容後，文本區域內容更改爲「value」

回答

相關問題