#php #jquery #forms
#php #jquery #формы
Вопрос:
Я создал форму php, в которой я хотел бы отобразить загрузочный gif-файл, если будут выполнены определенные условия. Вот читаемый псевдокод / пример логики, которую мне нужно использовать в jquery.
if (file_input_is_set amp;amp; submit_button_is_clicked) {
<div class="progress-bar">tada...loading_gif</div>
}
У меня есть эти два кода, которые хорошо работают по отдельности. Первый код показывает загружаемый gif-файл, когда задан ввод файла.
jQuery().on('change', 'input[type="file"]', function(e) {
Второй код показывает загружаемый gif-файл при нажатии кнопки отправки формы.
jQuery("input[name='profile_submit']").click(function (e) {
Поскольку я почти ничего не знаю о jQuery, мне нужна помощь, чтобы объединить эти события. Простите меня, если моя терминология неверна. Вот что я пробовал, что не работает, он показывает загрузочный gif еще до того, как я нажму кнопку отправки. Итак, мне нужна функция, которая работает как оператор php amp;amp; , и я не знаю, как вы это делаете в jquery.
jQuery().on('change', 'input[type="file"]', function(e) {
jQuery("input[name='profile_submit']").click(function (e) {
//jQuery('#submit-button').hide();
jQuery('.progress-bar').fadeIn(1000);
});
});
Примечание: причина, по которой вы видите много jQuery в коде, связана с WordPress (в котором используется форма), поскольку ему нужно, чтобы он находился в режиме отсутствия конфликтов.
Перефразированный вопрос (с подсказкой от @webkit): Как мне также проверить, является ли file_input_is_set / действительным при запуске события отправки?
Комментарии:
1. Есть разница между проверкой условий и проверкой событий (изменить, щелкнуть ..) вы можете либо делегировать события одному обработчику, либо, когда триггеры события отправки также проверяют, действительны ли входные данные
Ответ №1:
Начните с последнего действия, формы отправки. затем проверьте наличие файла при вводе файла:
jQuery("input[name='profile_submit']").click(function (e) {
if( jQuery('input[type="file"]').val() != '' ){
jQuery('.progress-bar').fadeIn(1000);
}
});
Демонстрация JSFiddle: http://jsfiddle.net/nDNP5 /
Комментарии:
1. Это работает, ДА. Мне пришлось очистить кеш, чтобы увидеть изменения. Извините, я не понял этого раньше.
Ответ №2:
вы можете сделать это:
jQuery("input[name='profile_submit']").click(function (e) {
// check to see if file is valid
if (jQuery('input[type="file"]').val() != "") {
// load
jQuery('.progress-bar').fadeIn(1000);
}
});
Или это: (только когда файл выбран, вы активируете отправку btn)
jQuery('input[type="file"]').on('change', function (e) {
// check to see if file is valid
if (jQuery('input[type="file"]').val() != "") {
jQuery("input[name='profile_submit']").off().on('click', function () {
jQuery('.progress-bar').fadeIn(1000);
});
} else {
jQuery("input[name='profile_submit']").off()
}
});