0

textarea フィールドに関するクエリがあります。非常に奇妙な問題に遭遇し、それを理解しようとしています。まず、私がやろうとしていることは次のとおりです。

  1. テンプレートの 1 つを選択するドロップダウン メニューがあります。
  2. 選択すると、テンプレートの値がテキストエリアに表示されます{これが問題の部分です}
  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 は、テキストエリアにデータを入力するものです。私の 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

それは、入力タイプが「送信」として定義されているためです。

<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 に答える
0

送信ボタンを使用しており、onclick ハンドラーを指定しています。ボタンをクリックすると、onclickハンドラーが実行され、フォームの送信に進みます。これが、値が更新されてからページがリロードされる理由です。

そのボタンでフォームを送信したくない場合は、 an<input type="submit">は間違った選択です。代わりにボタンを使用します。

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

デフォルトでフォームを送信するとtype=buttonは異なり、 はデフォルトでは何もしません。type=submit

のW3C ドキュメントtype=submit:

値が "submit" である type 属性を持つ input 要素は、フォームを送信するためのボタンを表します。

のW3C ドキュメントtype=button:

値が "button" である type 属性を持つ input 要素は、追加のセマンティクスを持たないボタンを表します。

于 2012-11-22T08:15:44.073 に答える