将地址字段复制到帐单地址字段

Question

我想根据复选框的值将用户的地址复制到帐单邮寄地址字段中。但是每次选中此复选框时，只有输入字段的最后一个值会被复制到帐单邮寄地址部分。而且重要的是不要使用id，因为它们是动态设置的。

Javascript：

$(function () {
    var checkbox = $('#veranstaltungsanmeldung_billing_address'); 

    checkbox.on('click', function(){
        if(checkbox.prop('checked')) {
            var srcValues = [];

            $(".address").each(function(){
                var srcValue = $(this).find('input[data-src]').val();
                srcValues.push(srcValue);
            });

            $.each(srcValues, function(index){
                $('.billing-address').find('input[data-dst]').val(srcValues[index]);
            });
        }
    });
});

HTML：

<form action="{{ path('veranstaltungsanmeldungsubmit') }}/{{ danksagungsid }}" method="post"  id="veranstaltungsanmeldung" class="form-horizontal" role="form"  enctype="multipart/form-data">
{% if validationErrors is defined %}
    <div class="form-error">
        {{ validationErrors }}
    </div>
{% endif %}
<div class="form-group">
    <label for="{{ form.anrede.vars.id }}" class="col-sm-2 control-label">{{ "form.anrede"|trans }}:{% if form.vorname.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.anrede, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.titel.vars.id }}" class="col-sm-2 control-label">{{ "form.titel"|trans }}:{% if form.titel.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.titel, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.vorname.vars.id }}" class="col-sm-2 control-label">{{ "form.vorname"|trans }}:{% if form.vorname.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.vorname, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.nachname.vars.id }}" class="col-sm-2 control-label">{{ "form.nachname"|trans }}:{% if form.nachname.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.nachname, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group address">
    <label for="{{ form.unternehmen.vars.id }}" class="col-sm-2 control-label">{{ "form.unternehmen"|trans }}:{% if form.unternehmen.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.unternehmen, {
            'attr': { 'class': 'form-control', 'data-src': 'company' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.funktion.vars.id }}" class="col-sm-2 control-label">{{ "form.funktion"|trans }}:{% if form.funktion.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.funktion, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group address">
    <label for="{{ form.strasse.vars.id }}" class="col-sm-2 control-label">{{ "form.strasse"|trans }}:{% if form.strasse.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.strasse, {
            'attr': { 'class': 'form-control', 'data-src': 'street' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.postleitzahl.vars.id }}" class="col-sm-2 control-label">{{ "form.plz"|trans }}:{% if form.postleitzahl.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-3">
        {{ form_widget(form.postleitzahl, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
    <label for="{{ form.ort.vars.id }}" class="col-sm-2 col-lg-1 control-label">{{ "form.ort"|trans }}:{% if form.ort.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-5 col-lg-6">
        {{ form_widget(form.ort, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.land.vars.id }}" class="col-sm-2 control-label">{{ "form.land"|trans }}:{% if form.land.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.land, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.telefon.vars.id }}" class="col-sm-2 control-label">{{ "form.telefon"|trans }}:{% if form.telefon.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.telefon, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>
<div class="form-group">
    <label for="{{ form.e_mail.vars.id }}" class="col-sm-2 control-label">{{ "form.e_mail"|trans }}:{% if form.e_mail.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.e_mail, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>

{% if location.id != 3481794 %}
    <div class="form-group">
        <label for="{{ form.anmerkungen.vars.id }}" class="col-sm-2 control-label">{{ "form.anmerkungen"|trans }}:{% if form.anmerkungen.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-10">
            {{ form_widget(form.anmerkungen, {
                'attr': { 'class': 'form-control' }
            })}}
        </div>
    </div>
{% endif %}

<div class="form-group"{% if not ez_field_value(content, 'show_billing_fields').bool or (location.id != 3486083 and location.id != 3486084) %} style="display: none;"{% endif %}>
    <label for="{{ form.billing_occupation.vars.id }}" class="col-sm-2 control-label">{{ "form.careercenter.billing_occupation.label"|trans }}:{% if form.billing_occupation.vars.required == true %} *{% endif %}</label>
    <div class="col-sm-10">
        {{ form_widget(form.billing_occupation, {
            'attr': { 'class': 'form-control' }
        })}}
    </div>
</div>

<div class="form-group hide-legend">
    <label for="{{ form.freies_attribut.vars.id }}" class="col-sm-2 control-label">
        {{ form.freies_attribut.vars.label }}
    </label>
    <div class="col-sm-10 select-list">
        <fieldset>
            <legend>{{ form.freies_attribut.vars.label }}</legend>
            {{ form_widget(form.freies_attribut) }}
        </fieldset>
    </div>
</div>

<div class="checkbox billing-address-checkbox"{% if not ez_field_value(content, 'show_billing_fields').bool %} style="display: none;"{% endif %}>
    <label>
        {{ form_widget(form.billing_address) }} {{ "form.billing_address"|trans }}{% if form.billing_address.vars.required == true %} *{% endif %}
    </label>
</div>

{% if location.id == 3481794 %}
    <div class="form-group">
        <label for="{{ form.anmerkungen.vars.id }}" class="col-sm-12 control-label">{{ "form.fbd_question"|trans }}:{% if form.anmerkungen.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-12">
            {{ form_widget(form.anmerkungen, {
                'attr': { 'class': 'form-control' }
            })}}
        </div>
    </div>
{% endif %}

<div class="event-billing-block"{% if not ez_field_value(content, 'show_billing_fields').bool %} style="display: none;"{% endif %}>
    <h4 class="mt20">Rechnungsadresse</h4>
    <div class="form-group billing-address">
        <label for="{{ form.billing_company.vars.id }}" class="col-sm-2 control-label">{{ "form.unternehmen"|trans }}:{% if form.billing_company.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-10">
            {{ form_widget(form.billing_company, {
                'attr': { 'class': 'form-control', 'data-dst': 'company' }
            })}}
        </div>
    </div>
    <div class="form-group billing-address">
        <label for="{{ form.billing_street.vars.id }}" class="col-sm-2 control-label">{{ "form.street"|trans }}:{% if form.billing_street.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-10">
            {{ form_widget(form.billing_street, {
                'attr': { 'class': 'form-control', 'data-dst': 'street' }
            })}}
        </div>
    </div>
    <div class="form-group">
        <label for="{{ form.billing_zip.vars.id }}" class="col-sm-2 control-label">{{ "form.zip"|trans }}:{% if form.billing_zip.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-3">
            {{ form_widget(form.billing_zip, {
                'attr': { 'class': 'form-control' }
            })}}
        </div>
        <label for="{{ form.billing_place.vars.id }}" class="col-sm-2 col-lg-1 control-label">{{ "form.place"|trans }}:{% if form.billing_place.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-5 col-lg-6">
            {{ form_widget(form.billing_place, {
                'attr': { 'class': 'form-control' }
            })}}
        </div>
    </div>
    <div class="form-group">
        <label for="{{ form.billing_country.vars.id }}" class="col-sm-2 control-label">{{ "form.country"|trans }}:{% if form.billing_country.vars.required == true %} *{% endif %}</label>
        <div class="col-sm-10">
            {{ form_widget(form.billing_country, {
                'attr': { 'class': 'form-control' }
            })}}
        </div>
    </div>
</div>

如果有人可以帮助我解决这个问题，那就太好了。

Answer 1

您正在遍历srcValues数组，将input[data-dst]的值设置为数组循环。

我的意思是，您正在这样做：

var thisIsInputValue;
var array = [1, 2, 3, 4];
array.forEach(function(value) {
    thisIsInputValue = value;
});

如果要遍历数组并将thisIsInputValue设置为数组值，则将为其分配最后一个值，如下所示：

var thisIsInputValue;

thisIsInputValue = 1;
thisIsInputValue = 2;
thisIsInputValue = 3;
thisIsInputValue = 4;

// At this point, thisIsInputValue will be 4.

我不知道您的实际期望。

编辑：请注意，thisIsInputValue是您的$('.billing-address').find('input[data-dst]').val(srcValues[index]);。您只是在重置input[data-dst]的值。没有串联。

EDIT2：试试这个：

$(".address").each(function(){
    // Get the initial input
    var input = $(this).find('input[data-src]');
    // get the data-src value (as will be the thing that identifies the other input)
    var inputDataSrc = input.data("src");
    // get the input value
    var inputValue = input.val();

    // Get the billing input with the same data-src value
    var billingInput = $('.billing-address').find('input[data-dst="+inputDataSrc+"]');
    // Set the value
    billingInput.val(inputValue);
});

这是一种即时编写的伪代码。也许一开始不起作用，但是您明白了。这是方法，因为唯一可以识别输入的是data-src值。