Всем доброго времени суток!
Введение:
сейчас создаю форму, которая будет содержать в т.ч. inputы типа file и конечно text. Делаю валидацию через ajax по событию change. Дошел до валидации input типа file и то, что мне казалось ПРОСТО - оказалось для меня сложно:
Использую код (см. ниже), который ПО КЛИКУ! submit отправляет форму в iframe, а из него на сервер, где собственно происходит валидация (кстати файл - типа img, поэтому идет проверка типа: картинка ли это, со всеми вытекающими) и в формате json отдает обратный ответ.
Задача: поскольку опыта маловато , у меня не получается переделать код, так, чтобы он срабатывал не ПО КЛИКУ! (точнее говоря в моем примере - не тогда, когда нажимается кнопка submit), а по событию CHANGE
Далее код:
validImg.js -
$(
function(){
var jForm = $( "form:first" );
jForm.submit(
function( objEvent ){
var jThis = $( this );
var strName = ("uploader" + (new Date()).getTime());
var jFrame = $( "<iframe name=\"" + strName + "\" src=\"about:blank\" />" );
jFrame.css( "display", "none" );
jFrame.load(/* данную функцию опускаю, к ней вопросов не имею */);
$( "body:first" ).append( jFrame );
jThis
.attr( "action", "my_page.cfm" )
.attr( "method", "post" )
.attr( "enctype", "multipart/form-data" )
.attr( "encoding", "multipart/form-data" )
.attr( "target", strName )
;
}
);
});
Форма:
<form>
<input type="file" name="artisan_foto" id="foto" />
<input type="text" name="text1" id="text1" />
<input type="submit" name="submit" id="submit" value="Upload" />
</form>
Что я пробовал:
1) читал про .submit() на jquery.com
что понял
- в случае отсутствия (неуказания) оброботчика работает так - появляется событие submit , которое автоматически ведет
к действию submit браузером
- в случае указания обработчика работает так - при появлении события submit запускает обработчик, далее НЕ ПОНЯЛ:
по завершении обработчика действие submit браузером происходит или нет???
что пробовал
- добавлял в $(function(){}); кусок
$('#foto').change(function() {
jForm.submit();
});
результат - в iframе форма не сабмитится
мое понимание: получается, что событие submit есть, а самого действия submit нет
ИЛИ
$('#foto').change(function() {
$("#submit").trigger('click');
});
результат - происходит обыкновенный сабмит формы
мое понимание: нет события submit, поэтому код и не работает, вызывается сразу Метод!
2) в google на
http://stackoverflow.com/questions/2...ithout-plugins
нашел ответ, что для реализации данной задачи нужно использовать СПЕЦИАЛЬНЫЕ СОБЫТИЯ, но как это сделать?
В итоге у меня полная каша в голове по теме "Что происходит 'за кулисами ' в браузере с момента нажатия кнопки submit и до момента отправки формы"
Получается что мне нужно по Cобытию CHANGE вызвать Cобытие Submit, в котором уже есть объект "форма с файлом". При этом связка form.submit(handler) + form.submit() не работает.
В какой момент .submit(handler) имеет возможность получить объект "форма с файлом", как я понимаю это строка
var jThis = $( this );
ведь именно ему мы затем присваеваем атрибуты формы.
Сейчас мое представление процесса таково:
физическое нажатие кнопки сабмит -> что-то происходит в браузере чего я не понимаю -> появляется объект формы -> этот объект (кстати а ЧТО ЖЕ ЭТО ВСЕ ТАКИ за объект - var jThis = $( this )??? - это objEvent????? а objEvent это и есть EVENT?) доступен form.submit(handler) -> мы ему присваеваем атрибуты, в т.ч. action -> а дальше браузер должен отправить объект по вновь установленному адресу - почему этого не происходит в связке form.submit(handler) + form.submit(), ведь form.submit() это событие + действие
Народ объясните pls, что к чему? Что я понимаю не правильно, а что правильно в данной ситуации, помогите советом или кодом!
Спасибо!!!