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 タグを次のように変更します。

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

PHP コードを次のように変更します (DOM で提案された数量をより適切に分離するために label タグを追加し、チェックボックスの不要な構造を取り除きました)。

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 に答える