使用jQuery複製列特定的表單值

Question

我已經使用jQuery之前將帳單地址複製到送貨地址，但如果我動態生成具有PHP中各種值的表格行，如何設置表單以便複選標記，推薦商品數量將被自動複製只需至同一商品的數量？

下面是結算/運輸複製腳本的基本版本。

<script src="../Scripts/jquery-1.7.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("input#same").click(function() 
    { 
     if ($("input#same").is(':checked')) 
     { 
      // Checked, copy values 
      $("input#qty").val($("input#same").val()); 
     } 
     else 
     { 
      // Clear on uncheck 
      $("input#quantity").val(""); 

     } 
    }); 
}); 
</script> 

這裏是PHP代碼動態收集項目與他們的建議數量。

while($row = mysql_fetch_array($histresult)) 
{ 
    echo '<tr height = "50px">'; 


    echo '<td>'.$product_id.'</td>'; 
    echo '<td>'.$suggested_quantity.'<input id="same" name="same" type="checkbox" value ="'.$suggested_quantity.'"/> </td>'; 
    echo '<td><input name="qty" type="text"size="4" maxlength="4"></td>'; 
    ///Other form elements go here, as well as an Add to Cart Button 
} 

對於每個商品，從數據庫中檢索基於用戶喜歡商品的建議批發數量。還有一個文本字段，以便他們可以在將其發送到購物車之前輸入他們想要的任何數量。但是，如果他們選中複選框，我希望它將該值複製到文本字段。

不僅此代碼似乎沒有做到這一點，這與計費/運輸副本之間的差異是，現在我正在處理動態數量的字段。我如何讓每一行都能完成這項任務？

Answer 1

使用jQuery，您基本上想要從複選框中獲取建議值並將其放入其他表單元素中。比方說，這是你的HTML：

<table> 
    <tr> 
     <td> 
     100 <input id="check-1" name="same" type="checkbox" value ="100"/> 
      <input id="qty-1" name="qty" type="text"size="4" maxlength="4"> 
     </td> 
     <td> 
     100 <input id="check-2" name="same" type="checkbox" value ="100"/> 
     <input id="qty-2" name="qty" type="text"size="4" maxlength="4"> 
     </td> 
     <td> 
     100 <input id="check-3" name="same" type="checkbox" value ="100"/> 
     <input id="qty-3" name="qty" type="text"size="4" maxlength="4"> 
     </td> 
    </tr> 
</table> 

而且那麼這將是你的JavaScript/jQuery的：

// Bind click event to ALL checkboxes 
$("#same-*").live("click", function(e) { 

    // Only change it if box is checked 
    if($(this).is(":checked")) 
    { 
     // Get suggested value 
     suggested_val = $(this).val(); 

     // Place in next element (textbox) 
     $(this).next().val(suggested_val);  
    } 
)}; 

我沒有測試過這一點，但是這基本上它是如何工作的。

在你的PHP中，你會想動態地生成這些ID號碼，因此每一行都使用一個唯一的ID。這通常足夠簡單，以匹配您的數據庫行ID。

<td>'.$suggested_quantity.'<input id="same-' . $row->id . '" name="same" type="checkbox" value ="'.$suggested_quantity.'"/> </td> 

Answer 2

更改代碼這樣

<script> 
$(document).ready(function(){ 
    $("input.same").click(function() 
    { 
     if ($(this).is(':checked')) 
     { 
      // Checked, copy values 
      var temp = $(this).attr("title"); 
      $("input#qty"+temp).val($("input#same"+temp).val()); 
     } 
     else 
     { 
      // Clear on uncheck 
      $("input#qty"+temp).val(""); 

     } 
    }); 
}); 
</script> 



$i=0; 
while($row = mysql_fetch_array($histresult)) 
{ 
    echo '<tr height = "50px">'; 


    echo '<td>'.$product_id.'</td>'; 
    echo '<td>'.$suggested_quantity.'<input class="same" id="same'.$i.'" title="'.$i.'" name="same'.$i.'" type="checkbox" value ="'.$suggested_quantity.'"/> </td>'; 
    echo '<td><input class="qty" name="qty'.$i.'" id="qty'.$i.'" type="text"size="4" maxlength="4"></td>'; 
    ///Other form elements go here, as well as an Add to Cart Button 
    $i++; 
} 

希望這將有助於你

Answer 3

回收IDS /名稱之中的幾個HTML元素是一個壞主意，我覺得。

我認爲最好讓它們獨一無二。

但無論如何，這裏有一個建議，不會修改你的html結構很多。

變化形式標記，如下所示：

<form id="Order"> 
... 
</form> 

更改你的PHP代碼如下（添加了標籤標記，以便更好地隔離您建議的數量在DOM，擺脫一些不必要的結構，爲您的複選框）：

while($row=mysql_fetch_array($histresult)) 
     { 
      echo '<tr height = "50px">'; 


      echo '<td>'.$product_id.'</td>'; 
      echo '<td><label>'.$suggested_quantity.'<label><input type="checkbox" class="Same"/> </td>'; 
      echo '<td><input name="qty" id="qty_'.$product_id.'" type="text"size="4" maxlength="4"></td>'; 
          ///Other form elements go here, as well as an Add to Cart Button 
        } 

最後，這裏是jQuery代碼：

<script src="../Scripts/jquery-1.7.2.min.js"></script> 
<script> 
    jQuery(document).ready(function(){ 
    jQuery("form#Order").click(function(Event){ //One event handler for the form, more efficient that way and you need less html structure to keep track of things 
     var Target = jQuery(Event.target); //This is the html element that got clicked on 
     if(Target.is("input:checkbox.Same")) //Make sure it's a checkbox that suggests quantity 
     { 
      var Text = jQuery(Target.closest('tr').children().get(2)).children(); //Get the parent TR tag, get it's third child (td tag containing the text field), get it's child (the text field) 
      var Suggested_quantity = Target.prev().html(); //Get the previous sibling which is the label containing the quantity and get it's html content which is the quantity 
      if(Target.is(":checked")) 
      { 
       Text.val(Suggested_quantity); 
      } 
      else 
      { 
       Text.val(""); 
      } 
    }); 
}); 
</script> 

編輯：刪除了一些多餘的html代碼。增加了一個類來隔離正確的複選框。爲文本字段添加了標識（忘記）。