배열 요소에 대한 스크립트로드

무언가를 주문할 수있는 동적 양식을 만들려고합니다.배열 요소에 대한 스크립트로드

기본 양식에는 하나의 행이 있지만, 페이지를 다시로드하지 않고도 더 많은 것을 주문하려면 새 행을 추가하십시오. 지금까지 모든 것이 제대로 작동하지만이 양식에는 2 개의 드롭 다운 ("입력 선택") 목록이 있습니다. 이 드롭 다운 목록은 서로 종속되어 있으며 선택 항목과 옵션 간의 관계를로드하는 방법을 알지 못합니다. 인터넷에서 많은 다른 예제를 시도했지만 항상 첫 번째 기본 행만 제대로 작동합니다. 동적으로 작성된 행은 더 이상 서로 종속되지 않습니다.

내가 뭔가 잘못하고 더 나은 방법을 알고 있다면,이 방법을 보여주십시오.

정말 도움이되기 때문에 도움을 요청합니다. 미리 감사드립니다. ;)

Screenshot of the form

업데이트

흠 ... 지금은 이해하지만 내 웹 페이지 코드에서 사용하는 방법을 많이 알고하지 않습니다. 당신에게 웹 페이지 코드가 표시됩니다 :

<?php 
$data = array(); 

$data['Groups'] = $_POST['group']; 
$data['Products'] = $_POST['product']; 
$data['Prices'] = $_POST['price']; 
$data['Quantity'] = $_POST['quantity']; 

$result = print_r($data,true); 
echo "<pre>$result</pre>"; 
?>

Here is link to all code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br> 
<html><br> 
    <head><br> 
     <title>Dynamic forms</title><br> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br> 
     <script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><br> 
     <script language="javascript" src="chainedselects.js"></script><br> 
     <script language="javascript" src="exampleconfig2.js"></script><br> 

    </head> 
    <body onload="initListGroup('vehicles', document.formm.elements['group[]'], document.formm.elements['product[]'], 'cs')"> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var i = 2; 
       var templateRow = jQuery.format($("#template").val()); 
       function addRow() { 
        var ii = i++; 
        $(templateRow(ii)).appendTo("#listProducts tbody"); 
        $("#removeProduct_" + ii).click(function(){ 
         $("#row_" + ii).remove(); 
        }); 
       } 
       $("#addProduct").click(addRow); 
      }); 
     </script> 

     <!-- Template row in the table --> 

     <textarea id="template" style="display:none;" cols="1" rows="1"> 
      <tr id="row_{0}" valign="top"> 
       <td>{0}.</td> 
       <td><select name="group[]" style="width: 100%;"></select></td> 
       <td><select name="product[]" style="width: 100%;"></select></td> 
       <td><input type="text" name="price[]" style="width: 100px;"></td> 
       <td><input type="text" name="quantity[]" style="width: 97%;"></td> 
       <td><img src="remove.png" id="removeProduct_{0}" alt="remove"></td> 
      </tr> 
     </textarea> 

     <!-- This summary table --> 

     <form name="formm" action="parser.php" method="post"> 
      <table id="listProducts" name="list"> 
       <thead> 
        <tr> 
         <th>Nr</th> 
         <th>Group</th> 
         <th>Product</th> 
         <th>Price</th> 
         <th>Quantity</th> 
         <th>+/-</th> 
        </tr> 
       </thead> 
       <tfoot> 
        <tr> 
         <th colspan="3" align="left"> 
          <input type="submit" name="send" value="Send" style="width: 100px;"> 
         </th> 
        </tr> 
       </tfoot> 
       <tbody> 
        <tr valign="top"> 
         <td>1.</td> 
         <td><select name="group[]" style="width: 100%;"></select></td> 
         <td><select name="product[]" style="width: 100%;"></select></td> 
         <td><input type="text" name="price[]" style="width: 100px;"></td> 
         <td><input type="text" name="quantity[]" style="width: 97%;"></td> 
         <td><img src="add.png" id="addProduct" alt="add"></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </body> 
</html>

이 것은 parser.php입니다.

출처

2011-11-17 Kyuubi

올바르게 이해할 수 있습니까? 사용자가 dropdown1에서 선택을 변경하면 dropdown2의 옵션이 변경되어야합니까? 도움이 될 샘플 코드가 필요합니다. – Beat

예, 알고 있습니다. 코드를 던지면 질문이 추가 된 후 8 시까 지 기다려야합니다. – Kyuubi

나는 당신을 위해 그것을 고쳤지 만, 편집기 도움말에서 코드 포맷 규칙을 읽으십시오. HTML 태그를 "탈출"하고 코드에 '
'을 모두 넣을 필요가 없습니다. 4 개의 공백으로 들여 쓰기하거나 전체 코드 블록을 선택하고 편집기의 툴바에있는'{}'코드 버튼을 누르십시오. – BalusC

클릭 이벤트는 새로 작성된 행에 첨부되지 않으므로 작성된 새 행에 클릭 이벤트가 첨부되어 있는지 확인해야합니다.

function dependantFunction() { 
    /* code */ 
} 

function addNewRow() { 
    var a=document.createElement("div"); 
    var b=document.createElement("img"); 
    b.src="images/add.png"; 
    b.addEventListener("click", dependantFunction, false); 
    a.appendChild(b); 
    document.getElementById("rowholder").append(a); 
}

그런 다음 모든 새 행에 모든 필요한 이벤트가 첨부되어야합니다.

출처

2011-11-17 11:23:03 Verifex

나를 이길. 나는 그것을 말할 것이다. –

그럼 나 도와 줄 수 있니? 내가 그것을 위해 내일 필요로하고, 아마도 내가 이미 알고있는 모든 것을 시도했을 것이기 때문에 그것과 함께 매우 기쁘게해라. – Kyuubi

배열 요소에 대한 스크립트로드

답변

관련 문제