동적으로 입력 필드에 javascript가 추가되었지만이 필드의 매개 변수 이름은 무엇입니까?

인터넷에서 입력란 목록을 동적으로 빌드하는 다음 예제를 사용하고 있습니다.동적으로 입력 필드에 javascript가 추가되었지만이 필드의 매개 변수 이름은 무엇입니까?

잘 작동하는 것처럼 보입니다. 그러나 양식을 제출하면 param 이름을 사용하여 HttpServletRequest의 데이터를 저장합니까?

감사합니다, 롭

<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

당신은 당신의 입력이 "name"속성 개체를 줄 필요가

(또는 'ID'당신의 JSP가 이름을 사용하지 않는 경우,하지만 이름 난 생각이 바람직하다) 이 시도

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를 전달하지 않으면 name = 'rowCount'및 rowCount var 값으로 hidden 유형의 입력을 추가하십시오. 사용자가 제출 버튼을 클릭하면 각 행을 업데이트 할 필요가 없으므로이 작업을 수행 할 수 있습니다.)

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을 추가해야합니다. - 문자열이 아니라면 캐스팅해야한다는 것을 지적하고 싶었습니다. 사용하지 않았습니다. 자바는 잠시 동안 – Kasapo

동적으로 입력 필드에 javascript가 추가되었지만이 필드의 매개 변수 이름은 무엇입니까?

답변

관련 문제