Вывести в форме адреса покупателя, placeholder для полей? Есть решение

Имеется стандартная контактная форма webasyst, в личном кабинете. В форме есть блок адреса покупателя:

<div class="wa-field wa-field-address">
    <div class="wa-name">Адрес</div>
    <div class="wa-value">
        <p>
            <span class="field wa-field-address-street">
                <span>Улица, дом, квартира</span>
                <input  title="Улица, дом, квартира"  type="text" name="profile[address][street]" value="">
            </span>
            <span class="field wa-field-address-city">
                <span>Город</span>
                <input  title="Город"  type="text" name="profile[address][city]" value="Москва">
            </span>
            ...
        </p>
    </div>
</div>
К большому сожалению эти поля input до сих пор не поддерживают placeholder. Подскажите пожалуйста, как на Jquery, взять текст, из span стоящим перед input, и вставить его в качестве placeholder в этот input?

4 ответа

  • 1

    Вот так можно взять значение для placeholder из title поля:

    $('.wa-field-address input').each(function(){
        var $input = $(this)
        var title = $input.attr('title')
        $input.attr('placeholder', title)
    })

    А вот так из span стоящего перед полем:

    $('.wa-field-password input').each(function(){
        var $input = $(this)
        var span = $input.prev();
        $input.attr('placeholder', span.text());
    })

  • 1
    Виктор 10 января 2019 09:38 #

    А как быть в форме регистрации? Там как я понял, нужно получить значение div.wa-mame в родительском элементе input?

    <div class="wa-field wa-field-password">
        <div class="wa-name">Пароль *</div>
        <div class="wa-value">             
            <input class="" type="password" name="data[password]" value="">
        </div>
    </div>
    
  • 1
    devellopah 31 июля 2019 20:10 #


    (function ($) {
        var address = $('.wa-field-address');
        // берём все .wa-field, кроме адреса(у него подпункты со своей структурой)
        var fields = $('.wa-field').not(address);
    
        if (fields.length) {
            fields.each(function (i, el) {
                var wa_field = $(el);
                var wa_name = wa_field.find('.wa-name');
    
                if (wa_name.length) {
                    wa_field.find('input').attr('placeholder', wa_name.text());
                }
            });
        }
    
        // работает с подпунктами адреса, не являющимися селектами
        if (address.length) {
            var address_fields = address.find('.field');
    
            if (address_fields.length) {
                address_fields.each(function (i, el) {
                    var field = $(el);
                    var name = field.find('span:first-child');
                    var input = field.find('input');
    
                    if (input.length) {
                        input.attr('placeholder', name.text());
                    }
                });
            }
        }
    })(jQuery);

    p.s. это универсальное решение, которое я написал по необходимости, его можно бросить прямо в default.shop.js

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите