動的に入力フィールドにjavascriptを追加しましたが、これらのフィールドのパラメータ名は何ですか？

私は入力フィールドのリストを動的に構築するためにインターネット上で見つかった次の例を使用しています。動的に入力フィールドにjavascriptを追加しましたが、これらのフィールドのパラメータ名は何ですか？

正常に動作するようですが、私は、フォームを送信すると、PARAM名は私がのHttpServletRequestからのデータを入れて使うのですか？あなたの入力は（自分のJSPは、名前を使用していない場合は「ID」が、名前は、私は信じていることが好ましい）、「名前」属性をオブジェクト与える必要が

おかげで、ロブ

<HTML> 

<HEAD>  
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>  

<SCRIPT language="javascript">   

function addRow(tableID) {    
    var table = document.getElementById(tableID);    
    var rowCount = table.rows.length;    
    var row = table.insertRow(rowCount);    
    var cell1 = row.insertCell(0);    
    var element1 = document.createElement("input");    
    element1.type = "checkbox";    
    cell1.appendChild(element1);    
    var cell2 = row.insertCell(1);    
    cell2.innerHTML = rowCount + 1;    
    var cell3 = row.insertCell(2);    
    var element2 = document.createElement("input");    
    element2.type = "text";    
    cell3.appendChild(element2);   
}   

function deleteRow(tableID) {    
    try {    
     var table = document.getElementById(tableID);    
     var rowCount = table.rows.length;    
     for(var i=0; i<rowCount; i++) {     
      var row = table.rows[i];     
      var chkbox = row.cells[0].childNodes[0];     
      if(null != chkbox && true == chkbox.checked) {      
       table.deleteRow(i);      
       rowCount--;      
       i--;     
      }    
     }    
     }catch(e) {     
      alert(e);    
     }   
    }  
</SCRIPT> 
</HEAD> 

<BODY> 

<form name="myform" action="myServlet" method="post"> 

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />  
    <TABLE id="dataTable" width="350px" border="1">   
    <TR>    
     <TD><INPUT type="checkbox" name="chk"/></TD>    
     <TD> 1 </TD>    
     <TD> 
      <INPUT type="text" /> 
     </TD>   
    </TR>  
    </TABLE> 

    <input type="submit" value="Go!"/> 

</form> 

</BODY> 
</HTML>

出典

2012-04-05 Robert Hume

はこれを試してみてください：

function addRow(tableID) {    
    var table = document.getElementById(tableID);    
    var rowCount = table.rows.length;    
    var row = table.insertRow(rowCount);    
    var cell1 = row.insertCell(0);    
    var element1 = document.createElement("input");    
    element1.type = "checkbox";    
    element1.name = "chk_input";  //*** EDIT ***    
    cell1.appendChild(element1);    
    var cell2 = row.insertCell(1);    
    cell2.innerHTML = rowCount + 1;    
    var cell3 = row.insertCell(2);    
    var element2 = document.createElement("input");    
    element2.type = "text"; 
    element2.name = "text_input";  //*** EDIT *** 
    cell3.appendChild(element2);   
}

次に、あなたのparamsは、 "TEXT_INPUT" と "chk_input" と命名されます。これをもっと意味のあるものに置き換えることができます。

私はしばらくの間でJSPを使用していない（私はHttpServletRequestには約あるものだと仮定し...）ので、私はそれらにアクセスする方法を覚えていないことができますが、これらのキーになります。

EDIT：動的に行を追加する場合は、一意の名前が必要です。（フォームを処理するものは何でも）あなたのコントローラで、その後

... 
element2.name = 'text-input-' + rowCount; 
...

あなたは私のために（ループを設定することをrowCountを使用することができます。それは、あなただけのような何かを行うことができるようにあなたは、行数を追跡しているようです。。rowcount）ここで、フォームの各行に対して "text-input-" + CastToString（i）のようなキーをチェックします。

フォームとをrowCountを渡していない場合は、名前だけ=「をrowCount」と行数varの値に隠されたタイプの入力を追加します。ユーザーが送信ボタンをクリックして各行で更新する必要がないので、これを行うことができます）

form = document.getElementById('myform'); 
rc = document.createElement('input'); 
rc.type = 'hidden' 
rc.value = rowCount; // make sure it's in scope!!! 
form.appendChild(rc);

出典

2012-04-05 16:07:34 Kasapo

ありがとうございますが、「追加」ボタンを何度もクリックできます。各入力に固有の名前が必要ですか？私はこれをどのように扱うことを提案しますか？ –

@Robert Hume参照編集:)私は最初に答えた後にそれを実現しました – Kasapo

また、私はCastToStringを作りました - 私はちょうどあなたがそれが文字列でないならばそれをキャストしなければならないことを指摘したいと思っていました - Javaはしばらくの間 – Kasapo

動的に入力フィールドにjavascriptを追加しましたが、これらのフィールドのパラメータ名は何ですか？

答えて

関連する問題