Событие reset у кнопки

@Gcom · Регистрация: 03.02.2016

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

Есть форма, на ней элементы + кнопки:

HTML5

<form>
 <input id="1"/>
 <input id="2" required/>
 <button id="none" type="reset">Очистить браузером</button>
 <button id="clear" type="button">Очистить jQuery</button>
</form>

Обработчик для второй кнопки:

Javascript

$(function () {
 $('#clear').click(
  function () {
   $('#1').val('');
   $('#2').val('');
  }
 );
}

Собственно такой вопрос если очищать первой кнопки, то элемент 2 не подсвечивается (при условии, что он required), а вот если очищать второй кнопкой, то он будет подсвечивать (т.е. событие на условие required будет срабатывать у браузера), суть вопроса, как очистить форму с помощью jQuery и что бы браузер "не ругался"?

Добавлено через 2 минуты
т.е. кнопку 1 превратить в:

HTML5

1	<button id="none" type="button">Очистить браузером</button>

и доработать обработчик что бы корректно очищал данные с формы.

@AmateR62 · 30.03.2016, 18:44

Сообщение от Gcom

то он будет подсвечивать

В какой момент оно будет подсвечиваться?

@Gcom · 31.03.2016, 05:14 **[ТС]**

Вот код:

Javascript

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#clear').click(
        function () {
            $('#1').val('');
            $('#2').val('');
        }
    );
});
</script>
<div>
    <form>
        1: <input id="1"/><br/>
        2: <input id="2" required /><br/><br/>
        <button id="none" type="reset">Очистить браузером</button><br/>
        <button id="clear" type="button">Очистить jQuery</button>
    </form>
</div>

Вводим данные, очищаем первой кнопкой, опять вводим и очищаем второй кнопкой, и видим красную рамку, вот и вопрос как очистить форму с помощью jQuery что бы этой рамки не было?

На ум приходит одно, "программно" нажать первую кнопку по физическому нажатию на вторую, как это сделать? (хотя мне кажется это не совсем правильный подход).

@WhiteMind · 31.03.2016, 07:09

Сообщение от Gcom

Вводим данные, очищаем первой кнопкой, опять вводим и очищаем второй кнопкой, и видим красную рамку, вот и вопрос как очистить форму с помощью jQuery что бы этой рамки не было?

странно. у меня все корректно работает.
но можно вот так

Javascript

$(function () {
    $('#clear').click(
        function () {
                        $('form').trigger( 'reset' );
        }
    );
});

HTML5

<div>
    <form>
        1: <input id="1"/><br/>
        2: <input id="2" required /><br/><br/>
        <button id="none" type="reset">Очистить браузером</button><br/>
        <button id="clear" type="button">Очистить jQuery</button>
    </form>
</div>

https://jsfiddle.net/8f4gy0hc/

@Gcom · 31.03.2016, 07:26 **[ТС]**

WhiteMind, То что доктор прописал.
Я тут немного доработал, может кому и пригодиться (скрыл кнопку с формы, но при верстке, нужно будет учитывать этот факт).

HTML5

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
....
</script>
<div>
    <form id="FormData">
        1: <input id="1"/><br/>
        2: <input id="2" required /><br/>
        <button id="none" type="reset"></button><br/>
        <button id="clear" type="button">Очистить jQuery</button>
    </form>
</div>

Javascript

$(document).ready (
    function () {
        ButtonResetHide();
    }
);
 
function ButtonResetHide() {
    $('#none').hide();
}
 
$(function () {
    $('#clear').click(
        function () {
            $('#FormData').trigger( 'reset' );
        }
    );
});

Добавлено через 2 минуты

Сообщение от WhiteMind

странно. у меня все корректно работает.

В Лисе так работает

@WhiteMind · 31.03.2016, 07:34

хм. а почему не просто

HTML5

    <form id="FormData">
        1: <input id="1"/><br/>
        2: <input id="2" required /><br/>           
        <button id="clear" type="button">Очистить jQuery</button>
    </form>

Javascript

$(function () {
    $('#clear').click( function () {
    $('#FormData').trigger( 'reset' );
  });
});

https://jsfiddle.net/y5qfoj6L/

@Gcom · 31.03.2016, 08:05 **[ТС]**

Сообщение от WhiteMind

хм. а почему не просто

Чет я об этом как то и не подумал

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	30.03.2016, 18:44	2
	Сообщение от Gcom то он будет подсвечивать В какой момент оно будет подсвечиваться? 0

@Gcom 82 / 82 / 18 Регистрация: 03.02.2016 Сообщений: 564 Записей в блоге: 1
	31.03.2016, 08:05 [ТС]	7
	Сообщение от WhiteMind хм. а почему не просто Чет я об этом как то и не подумал 0

Событие reset у кнопки

Решение