2010-01-21 1 views
0

"새 항목 추가"버튼을 클릭하면 행/필드를 동적으로 추가하는 JavaScript가 있습니다. 각 행의 값은 숨겨진 텍스트 필드 "txtIndex"에 캡처됩니다. (txtIndex의 초기 값은 1로 설정됩니다.) 그런 다음 txtIndex를 vbscript의 변수에 캡처하여 SQL 테이블에 삽입 될 수 있도록 값을 반복합니다 (삽입은 저장 프로 시저 "spInsert"). 이것은 내가 문제가되는 부분입니다.SQL 삽입에서 DHTML 행 값이 캡처되지 않습니다.

페이지의 첫 번째 행이 SQL 테이블에 잘 삽입되지만 버튼을 클릭하고 후속 행을 추가하면 해당 값이 테이블에 삽입되지 않습니다. 대신 빈 행이 삽입됩니다. 그래서, 그것은 SQL 문제가 아닙니다. 페이지 소스를 볼 때 볼 수있는 것으로부터, 페이지는 새로운 행/값을 추가 한 것을 인식하지 못합니다. 그럼, 내 자바 스크립트에서 뭔가 추측하고있어? 아무도 내가 뭘 잘못하고 어떻게 해결할 수 있는지 말해 줄 수 있습니까? 감사!

<!--#includes file="header.asp"--> 

<head> 
<title>Offset Input</title> 
</head> 

<%Dim CN, RS, vIndex, vSQL 

'GetDataConnection is included in header file. 
Set CN = GetDataConnection 

If Request.TotalBytes > 0 Then 
    vIndex = Request.Form("txtIndex") 

    If Request.Form("cboOffsetGroupOperator") = "" Then 
     Response.Write("Unable to process your request. Please complete a new entry.") 
     Response.Redirect("input.asp") 
    Else     
     'Loop through values in txtIndex. Insert data into table. 
     Do While vIndex > 0 
      vSQL = "spInsert " 
      vSQL = vSQL & "@vExceptionID = " & RS("ExceptionID") & "," 
      vSQL = vSQL & "@vOffsetDetailCorrectionOperator = '" & Request.Form("cboOffsetGroupOperator" & vIndex) & "'," 
      vSQL = vSQL & "@vOffsetDetailNumberOfItems = '" & Request.Form("txtNumberOfItems" & vIndex) & "'," 
      vSQL = vSQL & "@vOffsetDetailComments = '" & Request.Form("txtComments" & vIndex) & "'" 

      CN.Execute (vSQL)  
      vIndex = vIndex-1  
     Loop  
    End If 
Else%> 

<body> 
<form name="frmInput" id="Input" method="post"> 
<table class="WebApps" id="tblOffsetDetail"> 
<tbody> 
    <tr> 
     <td colspan="3"> 
      <h3>Offset Item Detail</h3> 
      <p><input name="btnSubmit" type="submit" class="button" id="btnSubmit" value="Submit"></p> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3">  
     <input type="button" class="button" value= "Add New Item" id="btnNewItem" name="btnNewItem" onClick="javascript:addNewItem();"> 
     <input type="hidden" id="txtIndex" name="txtIndex" value="1"> 
     </td> 
    </tr> 
    <tr> 
     <td width="9%"><h4>Operator:</h4></td> 
     <td width="6%"><h4># of Items:</h4></td> 
     <td width="13%"><h4>Comments:</h4></td> 
    </tr> 
    <tr> 
     <td> 
      <p><select name="cboOffsetGroupOperator1" id="cboOffsetGroupOperator1"> 
       <option></option> 
       <option value="1">Name1</option> 
       <option value="2">Name2</option> 
       <option value="3">Name3</option> 
       <option value="4">Name4</option> 
      </select></p> 
     </td> 
     <td><p><input name="txtNumberofItems1" type="text" id="txtNumberofItems1" size="10" maxlength="10"></p></td> 
     <td><p><textarea name="txtComments1" cols="20" rows="3" id="txtComments1"></textarea></p></td> 
    </tr> 
</tbody> 
</table> 
</form> 

<% 
End If 

Set RS = Nothing 
CN.Close 
Set CN = Nothing 
%> 

<script language="javascript"> 

//Display additional rows, columns, and fields when Add New Item button is clicked. 
function addNewItem() 
{ 
    var iX = document.getElementById("txtIndex").value; 
    iX ++; 
    document.getElementById("txtIndex").value = iX; 

    var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0]; 
    var tr = document.createElement("TR"); 
    tbl.appendChild(tr); 

    //cboOffsetGroupOperator1 
    var tdOffsetGroupOperator = document.createElement("TD"); 
    tr.appendChild(tdOffsetGroupOperator); 

    var p = document.createElement("P"); 
    tdOffsetGroupOperator.appendChild(p); 

    var cboOffsetGroupOperator = document.createElement("select"); 
    p.appendChild(cboOffsetGroupOperator); 

    cboOffsetGroupOperator.id = "cboOffsetGroupOperator" + iX; 

    var cboOffsetGroupOperator1 = document.getElementById("cboOffsetGroupOperator1"); 
    var i = 0; 

    for (i = 0; i < cboOffsetGroupOperator1.children.length; i++) 
     { 
      var opt = document.createElement("option"); 
      opt.value = cboOffsetGroupOperator1 [i].value; 
      opt.innerText = cboOffsetGroupOperator1 [i].innerText; 
      cboOffsetGroupOperator.appendChild(opt); 
     } 

    //txtNumberofItems1 
    var tdNumberofItems = document.createElement("TD"); 
    tr.appendChild(tdNumberofItems); 

    var p = document.createElement("P"); 
    tdNumberofItems.appendChild(p); 

    var txtNumberofItems = document.createElement("input"); 
    p.appendChild(txtNumberofItems); 

    txtNumberofItems.id = "txtNumberofItems" + iX; 
    txtNumberofItems.setAttribute('size',10); 

    var txtNumberofItems1 = document.getElementById("txtNumberofItems1"); 

    //txtComments1 
    var tdComments = document.createElement("TD"); 
    tr.appendChild(tdComments); 

    var p = document.createElement("P"); 
    tdComments.appendChild(p); 

    var txtComments = document.createElement("textarea"); 
    p.appendChild(txtComments); 

    txtComments.id = "txtComments" + iX; 
    txtComments.setAttribute('cols',20); 
    txtComments.setAttribute('rows',3); 

    var txtComments1 = document.getElementById("txtComments1"); 
} 
</script> 

</body> 
</html> 

답변

0

DOM에 추가 할 양식 요소에는 이름이 없습니다. 이름을 양식 제출에 사용할 수 있으려면 그 이름을 지정해야합니다.

var cboOffsetGroupOperator = document.createElement("select"); 
cboOffsetGroupOperator.setAttribute('name', 'cboOffsetGroupOperator1'); // this is what you're missing 
p.appendChild(cboOffsetGroupOperator); 

그리고 SQLMenace 말했듯이, 당신이 시작하는 ... 거기에있는 SQL 주입 문제를 해결하시기 바랍니다는 상세 설명 필드에 다음 텍스트를 넣어 제출.

ABC '; 테이블 주방장을 생성 (A VARCHAR (30)); 삽입 주방장 값 ('모든 기지 '는 우리에게 속해있다); -

그러나 자바 스크립트가 교차 브라우저로 작동하지 않는다는 답변에주의해야합니다. 코드를 올바르게 작성하기 위해 약간 파고들 필요가있는 것처럼 보입니다.

+0

이해가 안됩니다. 나는이 모든 것에 정말로 새로운 것이다. 어떤 폼 요소에는 이름이 없습니까? SQL 인젝션에 대해 읽었는데, 그 점에 대한 귀하의 제안을 이해하고 있는지 확신 할 수 없습니다. – SeanFlynn

+0

내 게시물을 더 자세히 업데이트했습니다. – ErikE

+0

SQL injection에 대한 제 제안 : 위의 회색 배경 상자에 abc로 시작하는 전체 텍스트를보십시오. 이 모든 것을 복사하여 입력 페이지의 마지막 입력란에 넣으십시오. 양식을 제출 한 다음 작성된 새 테이블 "bork"에서 데이터베이스를보십시오. – ErikE

1

기본 DOM 및 데이터베이스 기반 웹 응용 프로그램 작동 방식을 배우려면이 종류의 JavaScript 코드가 좋지만이 앱을 사용하게하려면 모든 브라우저에서 작동하지 않을 것이므로이 JavaScript 코드를 모두 정리해야합니다. . 자신에게 호의를 베풀고 jQuery과 같은 간단하지만 강력한 라이브러리를 선택하십시오.

또한 MVC framework을보고 DB 코드를보기와 분리하고 양쪽에서 입력 내용의 유효성을 검사하십시오.

SQL 주입 문제에 대해서도 마찬가지입니다.

행운을 빈다.