Изменение картинки в блоке после заполнения формы

@Setux · Регистрация: 23.09.2018

Author24 — интернет-сервис помощи студентам

И снова на связи недопрогер. Есть код, и мне нужно, чтобы при заполнении форм он менял картинку.

HTML5

<form action="#" class="complete-profile-form">
                            <div class="col s12">
                                <div class="col s6">
                                    <div class="col s1"></div>
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3 form-img"><img class="img-form" src="img/name.png"></div>
                                        <div class="col s9"><input class="form" type="text" placeholder="Ваше имя" required></div>
                                    </div>
                                </div>
                                <div class="col s6">
 
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3"><img class="img-form" src="img/building.png"></div>
                                        <div class="col s9"><input class="form" type="text" placeholder="Место установки фонтана" required></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s12">
                                <div class="col s6">
                                    <div class="col s1"></div>
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3"><img class="img-form" src="img/phone.png"></div>
                                        <div class="col s9"><input class="form" type="text" placeholder="Ваш телефон" required></div>
                                    </div>
                                </div>
                                <div class="col s6">
 
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3"><img class="img-form" src="img/fountain.png"></div>
                                        <div class="col s9"><input class="form" type="text" placeholder="Тип фонтана" required></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s12">
                                <div class="col s6">
                                    <div class="col s1"></div>
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3"><img class="img-form" src="img/mail.png"></div>
                                        <div class="col s9"><input class="form" type="text" placeholder="Ваша почта" required></div>
                                    </div>
                                </div>
                                <div class="col s6">
                                    <div class="col s11 formdiv complete-form-block">
                                        <div class="col s3 trythis"></div>
                                        <div class="col s8"><input class="form" type="text" placeholder="Размеры" required></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s12">
                                <input class="confirm-button" type="submit" value="" />
                            </div>
                        </form>

Javascript

$(document).ready(function() {
    var requiredForms = $("input:not([type=submit])");
    var index = requiredForms.length;
  
    $(".complete-profile-form").on("input blur", function(){
        var valid = 0;
      requiredForms.each(function(i,e){
        if( $(e).val() != "" ){
                    valid++;
        }
      });
      if(valid >= index){
        $('.confirm-button').styles('background', 'url(try2.img)')
      } else {
         $('.confirm-button').styles('background', 'url(try.img)')
      }
    });
    
});

При заполнении формы он ничего не меняет

@ShaRpN00B · 24.02.2020, 09:40

Setux, Так, если не ошибаюсь у jQuery нет метода styles(), поэтому для начала замените:

Javascript

1	$('.confirm-button').styles('background', 'url(try2.img)')

на

Javascript

1	$('.confirm-button').css('background', 'url(try2.img)')

А дальше давайте глянем будет работать или нет.(Замените в обеих строках)

@Setux · 24.02.2020, 17:54 **[ТС]**

Спасибо, помогло

@Setux 0 / 0 / 0 Регистрация: 23.09.2018 Сообщений: 24
	24.02.2020, 17:54 [ТС]	3
	Спасибо, помогло 0