Очистка формы jquery

209

02 мая 2018, 03:29

Есть две формы на сайте. Там же и кнопка очистить. При нажатии очищает содержимое инпутов.

$document.on('click', '.js-clearApplication', function (e) {
    e.preventDefault();
    var form = $('.js-form');
    form.find('input, textarea').val('');
});

Одна из форм в модалке, которая по умолчанию имеет display: none

Тут то очистка и не работает. Я так понимаю, из-за того что при загрузке страницы это формы нету в DOM

Как решить проблему?

Пример разметки

<form class="header__application-form js-applicationForm js-form" action="">
                        <div>
                            <p>Ваше имя</p>
                            <input type="text" placeholder="Ваше имя">
                            <p>Телефон</p>
                            <input type="tel" placeholder="+7 ____ ____ __ __">
                        </div>
                        <div>
                            <p>Комментарий</p>
                            <textarea rows="5" placeholder="Пожалуйста, опишите подробнее
о своём празднике."></textarea>
                        </div>
                        <div>
                            <p>Почта</p>
                            <input type="email" placeholder="@inbox.ru">
                        </div>
                        <div>
                            <button class="Btn_black">Отправить</button>
                            <!--<button class="reset" type="reset">Стереть</button>-->
                            <a class="js-clearApplication" href="#">Стереть</a>
                        </div>
                    </form>

Попробовал добавить button[type=reset] Что то оно не чистит форму( Основная проблема в том, что клик по кнопке не обрабатывается.

Т.е оно не доходит до того, что бы чистить форму

Answer 1

Можно просто использовать стандартную кнопку очистки формы <input type="reset" />

<form> 
<h2>Форма №1</h2> 
<input type="text" /> 
<input type="reset" /> 
</form> 
 
<form> 
<h2>Форма №2</h2> 
<input type="text" /> 
<input type="reset" /> 
</form>

Слой со стилем display: none присутствует в разметке при загрузке страницы просто он не отображается. Если нужно именно очистить форму с помощью скрипта то попробуйте:

$(function() { 
	$('.js-clearApplication').click(function(){ 
		$('.js_input').val(''); 
	}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
    <h2>Форма №1</h2> 
    <input type="text" class="js_input" /> 
    <input type="button" value="Очистить" class="js-clearApplication" /> 
    </form> 
 
    <form> 
    <h2>Форма №2</h2> 
    <input type="text" class="js_input" /> 
    <input type="button"  value="Очистить" class="js-clearApplication" /> 
    </form>