Почему не отправляет форму по событию change?

Question

[Даша]

$("input[type=file]").on('change', function (e) {

        $($(this).siblings('input[type=submit]')).click( function( e ) {
           
            console.log(this);
            e.preventDefault();

        } );

    });

Почему не отрабатывает?
Если просто нажимаю на кнопку отправить то срабатывает, а надо бы что бы после загрузки картинки уже срабатывало.
В чем может быть проблема?

Answer 1

[Виталий Инчин ☢]

Форма может сработать и по нажатию Enter, к примеру. Так что, не верно ловить клик по сабмиту.

Можно сделать вот так:

$("form").on("submit", function(e){
  $("input[type=file]").val()||e.preventDefault();
});

Или вот так:

var acess = false;

$("input[type=file]").one("change", function(){
  acess = true;
});

$("form").on("submit", function(e){
  acess||e.preventDefault();
});

Или еще круче:

var form = $("form");

form.on("submit", function(){
  e.preventDefault();
}).siblings("input[type=file]")
 .one("change", function(){
   form.off("submit");
});

Почему ваш код не работает

//При выборе файла
$("input[type=file]").on('change', function (e) { 
  //Ставим обработчик
  $($(this).siblings('input[type=submit]')).click( function( e ) { 
      //Который запрещает отправку формы по нажатию на кнопку
     e.preventDefault();
  });
});

UPD: А вообще, есть замечательный атрибут required - и ни какого JS не нужно.

Answer 2

[Арам Арамян]

Так у вас же e.preventDefault(); который как раз отменяет сабмит формы.