0

我以前使用 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
}

对于每个项目，从数据库中检索基于用户最喜欢项目的建议批发数量。还有一个文本字段，以便他们可以在将其发送到购物车之前输入他们想要的任何金额。但如果他们选中复选框，我希望它将该值复制到文本字段。

不仅这段代码似乎不起作用，这与计费/运输副本之间的区别在于，现在我正在处理动态数量的字段。如何让每一行都完成这项任务？

4

3 回答 3

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>
于 2012-08-01T16:51:10.183 回答
1

以这种方式更改您的代码

<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++;
}

希望这对你有帮助

于 2012-08-01T16:51:39.040 回答
1

我发现在几个 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（忘记了）。

于 2012-08-01T16:52:37.620 回答