1

友人の自転車宅配便サービス用の php 連絡フォームを作成しています。基本的に、「配送先住所と請求先住所が同じ」ボックスがチェックされている場合、キーアップ イベントごとに 2 つのフィールド セットを同期させたいと考えています。

フォームは非常に単純です。

<!-- Get the shipping address inputs -->
<input type="text" name="company_address1" value="" id="company_address1">
<input type="text" name="company_city" value="" id="company_city">

<!-- Get the billing address inputs -->
<p>Same as above <input type="checkbox" name="dupe" id="dupe" value=""></p>
<input type="text" name="billing_address1" value="" id="billing_address1">
<input type="text" name="billing_city" value="" id="billing_city">


jQuery

$("input#dupe").click(function(){ 
if ($("input#dupe").is(':checked')) 
{ 
    // Checked, copy values 
    $("input#billing_address1").val($("input#company_address1").val()); 
    $("input#billing_city").val($("input#company_city").val()); 
} 
else 
{ 
    // Clear on uncheck 
    $("input#billing_address1").val(""); 
    $("input#billing_city").val(""); 
} 
});
$("input#company_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_address1").val(stt);
}
});
$("input#company_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_city").val(stt);                           
}
});
$("input#billing_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_address1").val(stt);
}
});
    $("input#billing_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_city").val(stt);                           
}
});



最適化は私の長所の 1 つではありません。イベントを連鎖させる方法はありますか?

4

3 に答える 3

3

  • 両方の方法をコピーしないでください。の場合#dupe:checked、フォームの 1 つを無効にし、一方向のみをコピーします。

  • 繰り返し：

次のようなことを試すことができます：

function copyCompanyToBilling($companyElement) {
  $companyElement.each(function() {
    var $companyElement = $(this);
    var billingId = $companyElement.attr('id').replace(/company/, 'billing');
    $('#' + billingId).val($companyElement.val());
  }
});
$("#company_address1, #company_city").keyup(function(evt) {
  copyCompanyToBilling($(this));
});
$("input#dupe").click(function(){ 
  if ($("input#dupe").is(':checked')) {
    copyCompanyToBilling($('#company_address1, #company_city'))
  } else {
    $('#biling_address1, #billing_city').val('');
  } 
});

編集: ええと、lxop とほとんど同じことを言っただけです。遅い ：（

于 2012-05-22T04:34:49.597 に答える
3

チェックボックスにチェックが入っているときにjQueryで2番目のフィールドセットを無効にし、フォームが送信されたときにサーバー側でチェックボックスの値を確認することができます。

現在のデザインを維持したい場合は、入力フォームのすべてのフィールドに対して単一の keyup() 関数を記述することを検討してください。関数をトリガーした要素の ID を抽出します。ID を少し編集し ('billing' を 'company' に置き換えるなど)、$("...").val () ビットを実行します。

于 2012-05-22T04:32:24.670 に答える
0

サーバー側のコードを変更して、ユーザーの「他のアドレスと同じ」オプションを保存し、可能であれば 2 番目のアドレス フィールドを非表示にすることをお勧めします。このようにして、編集のためにフォームを再度表示する場合、情報を複製するのではなく、フォーム フィールドを非表示にすることができます...

このメソッドを使用したフォームの例を次に示します (サーバー側の部分を除く): http://jsfiddle.net/hzAxU/

于 2012-05-22T04:56:19.860 に答える