1

我正在为朋友的自行车快递服务创建一个 php 联系表。基本上，当检查“运输和计费地址是相同”的框时，我希望在每个次要事件之后，我希望两组字段在同步。

表格非常简单：

<!-- 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);                           
}
});



优化不是我的强项之一，有没有办法可以将事件链接在一起？

4

3 回答 3

3

您可以让 jQuery 在选中复选框时简单地禁用第二组字段，然后在提交表单时查看服务器端复选框的值。

如果您想保留现有设计，可能会考虑为输入表单中的所有字段编写一个 keyup() 函数；提取触发函数的元素的id；稍微编辑 id（将 'billing' 替换为 'company' 等），然后执行 $("...").val () 位。

于 2012-05-22T04:32:24.670 回答
3

  • 不要双向复制。如果#dupe:checked，禁用其中一种形式，并仅复制一个方向。

  • 重复：

你可以尝试这样的事情：

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 回答
0

我建议修改服务器端代码以存储用户的“与其他地址相同”选项，并尽可能隐藏第二个地​​址字段。这样，如果您再次显示表单进行编辑，您可以再次隐藏表单字段而不是复制信息......

这是使用此方法的表单示例（没有服务器端部分）：http: //jsfiddle.net/hzAxU/

于 2012-05-22T04:56:19.860 回答