Question

我们需要在此表单上启用自动完成功能。每当选中该复选框时，代码应自动将值从Shipping Name和Shipping Zip复制到Billing Name和Billing Zip。如果未选中该复选框，则“结算名称”和“结算邮编”应为空白。

HTML代码

<pre>
  <form>
    <fieldset>
        <legend>Shipping Information</legend>
        <label for ="shippingName">Name:</label>
        <input type = "text" name = "shipName" id = "shippingName"         required><br/>
        <label for = "shippingZip">Zip code:</label>
        <input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
    </fieldset>
    <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
    <label for = "same">Is the Billing Information the Same?</label>

    <fieldset> 
        <legend>Billing Information</legend>
        <label for ="billingName">Name:</label>
        <input type = "text" name = "billName" id = "billingName" required><br/>
        <label for = "billingZip">Zip code:</label>
        <input type = "text" name = "billZip" id = "billingZip" pattern =       "[0-9]{5}" required><br/>
    </fieldset>
        <input type = "submit" value = "Verify"/>
   </form>
 </pre>

JS代码

<pre>
function billingFunction(){
 var bn, bz, sn, sz;
 if (document.getElementById('same').checked){
   bn = document.getElementById('billingName').text;
   sn = document.getElementById('shippingName').text;
   bz = document.getElementById('billingZip').text;
   sz = document.getElementById('shippingZip').text;
   bn = sn;
   bz = sz;
   }
 }
 </pre>

Answer 1

这应该有效：

function billingFunction(){
 var bn, bz, sn, sz;
 bn = document.getElementById('billingName');
 bz = document.getElementById('billingZip');
 if (document.getElementById('same').checked){
   sn = document.getElementById('shippingName').value;
   sz = document.getElementById('shippingZip').value;
   bn.value = sn;
   bz.value = sz;
 } else {
   bn.value = '';
   bz.value = '';
 }
}

Answer 2

如果你可以使用jquery，你可以简化这样的功能。

$('#same').change(function(){
 var name, zip;
 if ($('#same').prop('checked')){
   name = $('#shippingName').val();
   zip = $('#shippingZip').val();
 }
 $('#billingName').val(name);
 $('#billingZip').val(zip);     
});

选中框时自动完成的JS代码

2 个答案: