Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   submit в iframe по событию change (https://javascript.ru/forum/jquery/9499-submit-v-iframe-po-sobytiyu-change.html)

vovasvv 21.05.2010 02:33

submit в iframe по событию change
 
Всем доброго времени суток!

Введение:
сейчас создаю форму, которая будет содержать в т.ч. 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, что к чему? Что я понимаю не правильно, а что правильно в данной ситуации, помогите советом или кодом!

Спасибо!!!

Skipp 21.05.2010 09:37

Отформатируй код, а то читать не охото:)


Часовой пояс GMT +3, время: 05:08.