2016-11-02 6 views
0

私はクライアント側のレンダリングに取り組んでいます。私は数字とクリックボタンを置く入力タグを持っています。ボタンのOnclick私のページに入力タグを追加する必要があります。しかし、問題はそれが入力の数を追加し、何も理由をリセットページです。実行を完了した後にJavaスクリプトがページのリロードを望ましくない

なぜ私はそれがリセットされているページなのか説明してください。 onclickイベントの行為1.Your

<HTML> 
<script src="js/main.js"></script> 
//for converting document.getelementbyid() to _() 
<body> 
    <div id="form_place"> 
    <form> 
     <input name="nos" id='nos' type="text"> 
     <button onclick="addnos()">Enter</button> 
    </form> 
    </div> 
</body> 
<SCRIPT> 
function addnos(){ 

    var nos = _('nos').value; 
    for (i=0;i < nos;i++){ 

    manddy = document.createElement('INPUT'); 
    manddy.setAttribute("id", 'name'+i+1); 
    _('form_place').appendChild(manddy); 

    }       
}  
    </SCRIPT> 

</HTML> 
+0

ページに投稿するために使用されるフォーム要素内にコントロールを配置します。 –

答えて

1

フォームでs内のボタンのデフォルトの動作を忘れてはいけない見提出フォームにクリック機能を適用ubmit。それはリロードを引き起こすでしょう。これにあなたのコードを変更します。

<HTML> 
<script src="js/main.js"></script> 
//for converting document.getelementbyid() to _() 
<body> 
    <div id="form_place"> 
    <form> 
     <input name="nos" id='nos' type="text"> 
     <button type="button" onclick="addnos()">Enter</button> 
    </form> 
    </div> 
</body> 
<SCRIPT> 
function addnos(){ 

    var nos = _('nos').value; 
    for (i=0;i < nos;i++){ 

    manddy = document.createElement('INPUT'); 
    manddy.setAttribute("id", 'name'+i+1); 
    _('form_place').appendChild(manddy); 

    }       
}  
    </SCRIPT> 

</HTML> 
1

ああフォームが提出するように。

2.ページがリロードされていません。フォームform action="some.php"のアクション内のページを適用3.Ifは

は5.Soがリターン虚偽の.Itsに適用http://firsthtml/some.php

4. More reference and demo of from submit

のように、そのページにリダイレクトするページのresting.Andを防ぐことができます以下のコード

<HTML> 
    <script src="js/main.js"></script> 
    //for converting document.getelementbyid() to _() 
    <body> 
     <div id="form_place"> 
     <form onsubmit="return addnos()"> <!--return with function--> 
      <input name="nos" id='nos' type="text"> 
      <button >Enter</button> 
     </form> 
     </div> 
    </body> 
    <SCRIPT> 
    function addnos(){ 

     var nos = _('nos').value; 
     for (i=0;i < nos;i++){ 

     manddy = document.createElement('INPUT'); 
     manddy.setAttribute("id", 'name'+i+1); 
     _('form_place').appendChild(manddy); 

     }       
           return false; //its will prevent page refresh 
    }  
     </SCRIPT> 

    </HTML> 
+0

実際にあなたの方法は正しいですが、私は、ボタンにtype = 'button'を指定しなかった場合、フォームのSUBMITボタンのように動作することが分かりました。おかげで助けてくれてありがとう –

1
<HTML> 
<script src="js/main.js"></script> 
//for converting document.getelementbyid() to _() 
<body> 
    <div id="form_place"> 
    <form> 
     <input name="nos" id='nos' type="text"> 
     <button onclick="return addnos()">Enter</button> 
    </form> 
    </div> 
</body> 
<SCRIPT> 
function addnos(){ 

    var nos = _('nos').value; 
    for (i=0;i < nos;i++){ 

    manddy = document.createElement('INPUT'); 
    manddy.setAttribute("id", 'name'+i+1); 
    _('form_place').appendChild(manddy); 

    } 

    return false; 
}  
    </SCRIPT> 

</HTML> 
はこのようにコードを変更し

。これは、HTMLでreturn someFunc()を呼び出すので、関数が何を返しても返されるため、デフォルトの動作が妨げられます。関数はfalseを返します。したがって、最終的には、onclickメソッドにfalseが返され、コードの実行中にデフォルトの動作が妨げられます。

希望します。

+0

実際にあなたの方法は正しいですが、ボタンにtype = 'button'を指定しなかった場合は、フォームのSUBMITボタンのように機能することが分かりました。ウルの助けをありがとう –

関連する問題