使用Ajax的動態表單PHP

Question

我正在第一次使用ajax。 我有一個動態表單，在點擊「添加按鈕」時添加了類似的表單，並且每個表單中都有一個「獲取數據」字段，用於從個人數據庫中檢索數據。問題是「獲取數據」不適用於所有領域。

<style> 
     td { 
      border: solid 1px lightGrey; 
      padding: 0 4px 0 4px; 
     } 
    </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 


    <script type="text/javascript"> 
var count = 0; 
$(document).ready(function(){ 

$.ajaxSetup ({ 
       cache: false 
      }); 
         var loadUrl = "ajaxfunc.php"; 
      $("#submit").click(function(){ 
count += 1; 
    $("#result").load(loadUrl,{name:document.getElementById('fields'+count).value},function(responseText){ 


       }); 


      }); 




$(function(){ 
    $('p#addField').click(function(){ 
     count += 1; 
     $('#fields1').append(
     '<div id="fields">' 
       +'<table border="0">' 
         +'<tr>' 
          +'<td width="100">' 
           +'ISBN NO :' 
          +'</td>' 
          +'<td>' 
          +' <input type="text" id="cIsbn1" name="cIsbn[]" />' 
          +'</td>' 
          +'<td>' 
           +'<button name="submitit" id="submit' + count + '" type="button" class="btn " style="float:left;">Get Data</button>' 
          +'</td>' 
         +'</tr>' 
         +'<tr>' 
          +'<td> Book Name:</td>' 
          +'<td> <input type="text" id="bookName' + count + '" name="bookName[]" style="width:200px;" /> </td>' 
          +'<td> Price : </td>' 
          +'<td> RM<input type="text" id="price' + count + '" name="price[]" style="width:50px;"/>' 
           +'&nbsp;$<input type="text" id="other_price' + count + '" name="other_price[]" style="width:50px;" readonly="readonly"/> </td>' 
         +'</tr>' 
         +'<tr>' 
          +'<td> Quantity :</td>' 
          +'<td><input type="text" id="quantity' + count + '" name="quantity[]" /></td>' 
          +'<td> Discount (in %): </td>' 
          +'<td> <input type="text" id="discount' + count + '" name="discount[]" /></td>'       
         +'</tr>' 
         +'<tr>' 
          +'<td>' 
           +'Net Price :' 
          +'</td>' 
          +'<td>' 
           +'<input type="text" id="netPrice' + count + '" name="netPrice[]" />' 
          +'</td>' 
         +'</tr>' 
         +'<tr>' 
          +'<td>' 
           +'Remarks :' 
          +'</td>' 
          +'<td style="height:45px;">' 
           +'<textarea id="ind_remarks' + count + '" name="ind_remarks[]" style="resize:none; position:absolute;"></textarea>' 
          +'</td>' 

         +'</tr>' 

            +'</div>' 

        +'</table><hr>' 
        +'</div>'); 





    }); 

});}); 
</script> 
     <div id="contentWrapper"> 
     <?php include('includes/sidebar_left.php');?> 

     <div class="content"> 

       <h2>Add New Customer & Issue Quotation</h2> 
       <hr /> 
       <form id="newBook" action="newBookProcess.php" method="post" enctype="multipart/form-data"> 

       <table border="0"> 
         <tr> 
         <td width="152">Customer Name *</td> 
         <td width="231">: 
           <input class="validate[required] text-input" type="text" name="cName" /></td> 
         <td width="272" rowspan="6"><p>Remarks:</p> 
           <p> 
           <textarea name="remarks" rows="7" cols="33" style="resize:none;"></textarea> 
          </p></td> 
        </tr> 
         <tr> 
         <td>Address</td> 
         <td> : 
           <input type="text" name="cAddress1" /><br /> 
           : <input type="text" name="cAddress2" /></td> 
        </tr> 
         <tr> 
         <td>Telephone </td> 
         <td>: 
           <input type="text" name="cTelephone" /></td> 
        </tr> 
         <tr> 
         <td>Fax</td> 
         <td>: 
           <input type="text" name="cFax" /></td> 
        </tr> 


        </table> 
       <hr /> 
       <p style="width:100%;"> 
       <h2 style="font-size:16px;">Add Book To Quotation </h2> 

       <p id="addField" style="border:none; background:none; width:100%;cursor:pointer; right:0; float:right;"><img src="images/addNew.png" width="100" style="border:none;"/> <p> 

       <hr /> 
       </p> 
       <div id="fields1"> 

        <table border="0"> 
         <tr> 
          <td width="100"> 
           ISBN NO : 
          </td> 
          <td> 
           <input type="text" name="cIsbn[]" id="cIsbn" /> 
          </td> 
          <td> 
           <button name="submitit" id="submit2" type="button" class="btn " style="float:left;">Get Data</button> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           Book Name: 
          </td> 
          <td> 
           <input type="text" name="bookName[]" style="width:200px;" /> 
          </td> 
          <td> 
           Price : 
          </td> 
          <td> 
           RM<input type="text" name="price[]" style="width:50px;"/> 
           &nbsp;$<input type="text" name="other_price[]" style="width:50px;" readonly/> 

          </td> 
         </tr> 
         <tr> 
          <td> 
           Quantity : 
          </td> 
          <td> 
           <input type="text" name="quantity[]" /> 
          </td> 
          <td> 
           Discount (in %): 
          </td> 
          <td> 
           <input type="text" name="discount[]" /> 
          </td> 

         </tr> 
         <tr> 
          <td> 
           Net Price : 
          </td> 
          <td> 
           <input type="text" name="netPrice[]" /> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           Remarks : 
          </td> 
          <td style="height:45px;"> 
           <textarea name="ind_remarks[]" style="resize:none; position:absolute;"></textarea> 
          </td> 
          <td> 
           <button id="addField">Add New </button> 
          </td> 
         </tr> 
        </table> 
       <hr /> 
       </div> 

       <p> 
         <input type="submit" value="Add Book" style="cursor:pointer;" /> 
         <input type="reset" style="cursor:pointer;" /> <span class="req">* required fileds</span> 
        </p> 
      </form> 
      <div id="result" style="overflow:hidden;" > 

            </div> 
      </div> 
    </div> 
    </div> 
<?php include('includes/footer.php');?> 

上面的代碼是我的代碼。 請幫幫我。

Answer 1

首先，元素的id屬性的值必須是唯一的;它是一個標識符，如果您有多個具有相同id的元素，則它無法唯一標識特定元素。改爲使用班級。

現在，當您在您的jQuery代碼中執行$('#submit')時，只會選擇代碼執行時頁面上存在的元素。而且，因爲它是一個ID選擇器，它只會選擇至多一個元素。

如果你想的事件處理程序綁定到在頁面加載後添加的元素，你需要使用event delegation：

$('#fields1').on('click', '.submit-button', function(e) { 
    count += 1; 
    $("#result").load(loadUrl,{name:document.getElementById('fields'+count).value}); 
}); 

請注意，我已經刪除了空的回調函數;如果你不想在裏面做任何事情，那麼你不需要傳遞它 - 這是一個可選的參數。我也使用.submit-button作爲.on()調用的選擇器;我假設你將使用class="submit-button"而不是id="submit"。

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$.ajaxSetup ({ 
       cache: false 
      }); 
      var loadUrl = "ajaxfunc.php"; 
      var count=1 

      $("button").live('click', function(){ 
    $("#result").load(loadUrl,{name:document.getElementById('fname1').value, email:document.getElementById('mytext').value, id:document.getElementById('id'+count).value },function(responseText){ 

       count=count+1; 
       }); 


      }); 

}); 

$(document).ready(function(){ 


    var i = $('input').size() + 1; 
    var count=1 
    $('#add').click(function() { 
     $('<div><input type="text" id="fname'+count+'" /><input type="text" id="id'+count+'" /><button id="submit'+count+'" type="button" style="float:left;">Submit'+count+'</button><div id="result" style="font-size:0px;width:30px;overflow:hidden;" ></div></div>').fadeIn('slow').appendTo('#form'); 
     var bj = count; 
     count = count+1; 

     var test = bj; 
document.getElementById("mytext").value = test; 

    }); 

}); 
function printIt(){ 
    var sj = document.getElementById('mytext').value; 
    alert(sj); 

} 
</script> 

</script> 
<a href="#" id="add">Add </a> 
<form id="contact" action="" method="post" enctype="multipart/form-data" > 

<div id="form"></div> 



         <div id="printHere"></div> 
         <input type="hidden" name="countC" id="mytext" /> 
     <input type=button value="Get Value" onclick="printIt()" /> 

</form>