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

在几个html元素中回收ID /名称是我发现的一个坏主意。

我认为最好让它们与众不同。

但无论如何，这是一个不会修改你的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代码。添加了一个类来隔离正确的复选框。添加了文本字段的ID（忘了）。

使用jQuery复制列特定的表单值

3 个答案: