Кнопка сброса формы запускает событие select elements onChange? - PullRequest
Новая
       10

Кнопка сброса формы запускает событие select elements onChange?

8 голосов
/ 13 февраля 2009

У меня есть форма с некоторыми элементами select, к которым прикреплены события onChange. Я хотел бы, чтобы событие сработало, даже если кто-то нажмет кнопку сброса формы.

У меня такой вопрос: вызывает ли сброс формы событие события selectChange?

Вот простой пример в jQuery 

<script type="text/javascript">
    $('.myselect').change(function() {
        // do something on change
    });
</script>

<form action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

Спасибо!

Ответы [ 2 ]

3 голосов
/ 26 февраля 2009

Существует тег onReset для форм, поэтому вы можете сделать что-то вроде: 

<script type="text/javascript">
    var changeFunc = function() {
        // do something on change.
    };
    $('.myselect').change(changeFunc);
</script>

<form onReset="changeFunc()" action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

Этот метод вызывается до сброса, хотя он может быть сложным. Я думаю, чтобы вы могли сделать "Вы уверены?" коробка. Бросок setTimeout в функции сброса, кажется, делает свое дело.

2 голосов
/ 29 августа 2012

Ответ Джека М. работает хорошо. Вот другой подход для того же. Надеюсь, это кому-нибудь поможет.

Напишите код / ​​события, которые вы хотели вызвать, в середине этой функции. Я проверил это. Работает хорошо. 

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form

        // call your functions to be executed after the reset      

         return false;                         // prevent reset button from resetting again
    });
});
...