フォーム要素を動的に作成

こんにちは私はHTMLフォームを持っており、ボタンクリックイベントでフォームのdivセクションを作成しようとしています。私は以下のようにjavascriptでHTMLコードを持っていますが、ボタンクリックイベントの後にフォーム要素を追加していません。 Person div要素のように入力テキストボックスと共にすべての行とセルを作成し、AddPersonボタンをクリックするとDiv- Personを追加または追加する必要があります。そのdivタグに関連付けられたボタンをクリックした後に、追加または作成する必要のある他の入力要素を含むDiv要素がいくつかあります。ここには、3つの入力フィールドとボタンが1つのDiv要素のサンプルコードがあります。ヘルプは高く評価されるでしょう.i変数またはj変数の値をインクリメントする必要があります。それは常に私が= 1を取っているそれは問題ですか？フォーム要素を動的に作成

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Sample</title> 

    <style type="text/css"> 
     form 
     { 
      width: 600px; 
      background-color:#FA7300; 
      margin: 0px auto; 
      overflow: hidden; 
     } 
    </style> 
    <script> 
    var i=1; 
    var j=1; 
    //create Person section 

    function CreatePerson(divName) 
    { 
    var y= document.createElement('div'); 
    y.innerHTML="<br/><input type='text' name='Key_Firstname_'+i+1><br/><input type='text' name='Key_lastname_'+i+1><br/><input type='text' name='Key_DOB_'+i+1>"; 

    document.getElementById(divName).appendChild(y); 
    } 




    </script> 
</head> 
<body> 
<form method="post" name="mainfrm" action=""> 



    <fieldset style="border:0px; background-color: #ffffff; margin-left:50px; width:500px"> 

     <table style="width: 100%"> 
      <tr> 
       <td style="width:125px">&nbsp; 

       </td> 
       <td style="width:375px">&nbsp; 

       </td> 

      </tr> 
      <tr> 
      <td>Acc NUMBER</td> 
       <td align="left"> 
        <input name="Key_Acc_Number_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr> 
      <td>Branch NUMBER</td> 
       <td align="left"> 
        <input name="Key_BNumber_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr><td align="center" COLSPAN="2"> <b>PERSON</b><td></tr> 
      <div id="Person"> 

      <tr> 
      <td>First Name</td> 
       <td align="left"> 

        <input name="Key_FirstName_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
      <td>Last Name</td> 
       <td align="left"> 

        <input name="Key_Lastname_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
       <td>DOB</td> 
       <td align="left"> 

        <input name="Key_DOB_1" size="35" type="text" /> 
       </td> 
       <td><button onClick="CreatePerson('Person')">Add Person</button> 
       </td> 
       </tr> 
       </div> 
       </table> 
       </fieldset> 
       </form> 
</body> 
</html>

私はそれはまた、ページの上部にある2姓と名のテキストボックスを作成したが、すぐにコードは、Javaスクリプトから既存されると、それらのテキストボックスが消え終了されるこれにjavascript関数を変更しました。

var i=2; 
var j=2; 
function CreatePerson(divName) 
    { 
    var Y= document.createElement("div"); 
    Y.id=divName+i; 
    // Y.innerHTML="<tr> 
    var appendText="<tr><td>First Name</td><td align="+"left"+"><input name="+"Key_FirstName_"+i+" size="+"35"+" type="+"text"+" /></td></tr><tr><td>Last Name</td></tr><tr><td align="+"left"+"><input name="+"Key_lastName_"+i+" size="+"35"+" type="+"text"+" /></td></tr>"; 

Y.innerHTML=appendText; 
    document.getElementById(divName).after(Y); 
    i++; 
    }

出典

2017-10-16 user2897967

'y.innerHTML =」
の試す
の
; '閉じる' "がありません – tommyO

jsを下に置く必要があります – MohitC

いいえ、あなたは@MohitCをしない - 'CreatePerson'関数は頭の中で定義されていて、divの前には適用されていますedは存在しますが、onClickハンドラが起動するまで_called_されません。それはDOM全体が読み込まれレンダリングされた後にのみ起動できます。ベストプラクティスを話したければ、あなたのJSを完全に別々の '.js'ファイルに入れて、DOMContentLoadedイベント（またはjquery' $（document）.ready（） 'からトリガーするのが最善です。 –

-1

この

<form method="POST"> 
    <div id="dynamicInput"> 
      Entry 1<br><input type="text" name="myInputs[]"> 
    </div> 
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"> 
</form> 

var counter = 1; 
var limit = 3; 
function addInput(divName){ 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 
      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
      document.getElementById(divName).appendChild(newdiv); 
      counter++; 
    } 
}

dynamically add form elements via JavaScript

出典

2017-10-16 18:33:20

の最後に引用符（' "'）がありません少しの説明が参考になりました問題は何でしたか、どのようにコードが解決しましたか？ – showdev

はい、人々が言及した欠落した引用を追加するだけではありません。 _else_あなたは何を変えましたか？ _Why_変更しましたか？なぜ以前にはうまくいかなかったのですか？（あなたの答えを更新する、コメントで私にそれを説明しないで、私はここで私が提出した3つの質問への答えを知っている） –

追加失われた引用符が追加されましたが、まだ動作しません。 – user2897967

フォーム要素を動的に作成

答えて

関連する問題