按字段ID而不是字段名称复制表单元素

时间:2013-10-01 03:21:32

标签: javascript

我找到了一个名为copyShipping.js的文件,它允许我通过单击复选框将表单元素从一个表单复制到另一个表单。但是,它按照每个字段的名称而不是ID进行复制。下面是代码。如何通过ID复制?我知道Javascript上有一个getElementByID,但我不知道如何实现它。理想情况下,我只想改变代码。感谢。

function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
    var theForm = cb.form;
    // The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
    var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
    var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');

    for(var i=0;i<billingFields.length;i++){
        var billingObj = theForm.elements[billingFields[i]];
        var shippingObj = theForm.elements[shippingFields[i]];
        if(billingObj && shippingObj){
            if(billingObj.tagName){ // non-radio groups
                var tagName = billingObj.tagName.toLowerCase();
                if(tagName == 'select'){
                    shippingObj.selectedIndex = billingObj.selectedIndex;
                }
                else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
                    shippingObj.checked = billingObj.checked;
                }
                else{ // textareas and other inputs
                    shippingObj.value = billingObj.value;
                }                   
            }
            else if(billingObj.length){ // radio group
                for(var r=0;r<billingObj.length;r++){
                    shippingObj[r].checked = billingObj[r].checked;
                }
            }
        }
    }
}
}

1 个答案:

答案 0 :(得分:0)

始终建议使用Id访问元素。另外,建议id和name相同。

试试这个。

function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
    var theForm = cb.form;
    // The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
    var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
    var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');

    for(var i=0;i<billingFields.length;i++){
        //assuming that now array contains id (not name)
        var billingObj = theForm.getElementById(billingFields[i]);
        var shippingObj = theForm.getElementById(shippingFields[i]);
        if(billingObj && shippingObj){
            if(billingObj.tagName){ // non-radio groups
                var tagName = billingObj.tagName.toLowerCase();
                if(tagName == 'select'){
                    shippingObj.selectedIndex = billingObj.selectedIndex;
                }
                else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
                    shippingObj.checked = billingObj.checked;
                }
                else{ // textareas and other inputs
                    shippingObj.value = billingObj.value;
                }                   
            }
            else if(billingObj.length){ // radio group
                for(var r=0;r<billingObj.length;r++){
                    shippingObj[r].checked = billingObj[r].checked;
                }
            }
        }
    }
}
}