Почему не происходит событие submit?

Question

[Владимир]

Коллеги, помогите, видимо у меня совсем глаз замылился...
В следующем коде почему-то не срабатывает событие submit у формы.
Предварительно скажу, что эта форма скопирована из другой, рабочей (!) формы этого же проекта - последовательность блоков, свойства тэгов, js-код. В форме-образце все работает идеально.
Полностью код приводить не буду, только не работающую часть.
HTML:

<form id="add-utility" enctype="multipart/form-data">
    <input id="utility_name" name="utility_name" type="text" class="form-control" placeholder="Введите наименование">
    <input id="utility_measure" name="utility_measure" type="text" class="form-control" placeholder="Введите единицу измерения">
</form>
<input id="save-utility" type="submit" form="add-utility" value="Сохранить изменения">

JS:

$('#add-utility').on('submit',(function(e) {
    console.log('We are in JS');
}));
В скрипте console.log не выполняется.
Уже все глаза сломал - ничего не понимаю )))

Answer 1

[kupurim]

Добавить кнопку в саму форму?

<input id="save-utility" type="submit" form="add-utility" value="Сохранить изменения">

Или же обработчик на клик

$('#save-utility').on('click',(function(e) {
    console.log('We are in JS');
}));

Answer 2

[Степан Родионов]

Возможно у вас код js идет после формы и ни на что не вешается. Попробуйте в firefox посмотреть в консоли - он прямо во вкладке elements показывает навешанные события. Если бы было что-то вроде
$('html').on('submit', '#form_id')
то событие бы отслеживало формы, появляющиеся после того, как JS код выполнился. По крайней мере, других реальных причин я не вижу, выглядит жизнеспособно.

Comments

[Ivan Yakushenko]

То есть, что человек в методе .on хочет обратиться к тегу intup через id тега form для вас выглядит жизнеспособно?
И да, нет разницы где находится JS - до формы, или после. Он так и так загружается.

[Владимир]

Ivan Yakushenko,

<img id="preview" class="img-fluid left-logo" src="../images/<?=$globals[0]['avatar'];?>" />
<form id="upload-image" enctype="multipart/form-data">
    <input type="file" name="image" id="image">
</form>
<button type="button" class="modal_subscribe_bitton" data-dismiss="modal" onclick="location.reload(true);">Закрыть</button>
<input id="save-image" name="save-image" class="modal_subscribe_bitton" type="submit" form="upload-image" value="Сохранить изменения" hidden="true">

$('#image').change(function(){
                readImage(this);
        });
        function readImage ( input ) {
                if (input.files && input.files[0]) {
                        if(!in_array( input.files[0].name.split(".").pop(), valid_ext )) {
                                alert('Недопустимый формат файла: '+'.'+input.files[0].name.split(".").pop()+'\n'+'Допустимые форматы: .png, .jpg, .jpeg, .gif'+'\n'+'Рекомендуемый формат - .png');
                                exit();
                        }
                        if (input.files[0].size > 1048576) {
                                var file_size = input.files[0].size/1024/1024;
                                alert ('Размер загружаемого файла '+file_size.toFixed(2)+'Мб - больше 1Мб'+'\n'+'Уменьшите размер файла или выберите другой файл');
                                exit();
                        }
                        myFile = input.files[0];
                        var reader = new FileReader();
                        reader.onload = function (e) {
                                $('#preview').attr('src', e.target.result);
                                $('#LogoType').text('Новый логотип');
                                $('#save-image').attr('hidden', false);
                        }
                        reader.readAsDataURL(input.files[0]);
                }
        }
        $('#upload-image').on('submit',(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                        type:'POST',
                        url: '../admin//modules/image-update-handler.php',
                        data: formData,
                        cache:false,
                        contentType: false,
                        processData: false,
                        success:function(data){
                                console.log('success'+'\n'+data);
                                $('#save-image').attr('hidden', true);
                        },
                        error:function(data){console.log('error');}
                });
        }));
        $('#greeting_text').focus(function(){
                $('#save-globals').attr('hidden', false);
        });
Вы не поверите - это работает. А приведенный в топике клон ЭТОГО почему-то нет.

[Степан Родионов]

Ivan Yakushenko,

<input id="save-utility" type="submit" form="add-utility" value="Сохранить изменения">

Вот этот инпут, а точнее нажатие на него, спровоцирует submit формы add-utility. Атрибут form для этого там указан.

$('#add-utility').on('submit',(function(e) {
    console.log('We are in JS');
}));

А этот подписывается на сабмит.
Либо я очень устал, либо вы :)

[Ivan Yakushenko]

Владимир, странно, почему-же тогда я просто скопировал ваш код и в методе .on обратился по ПРАВИЛЬНОМУ ID тега intup и у меня всё заработало?
Может вы хотя-бы базовый синтаксис HTML (теги и атрибуты) почитаете, перед тем, как пытаться что-то скопипастить и кому-то тыкать, что вот в оригинале-то работает.
Могу ответить почему работает в оригинальном коде: там обработчиком события submit метода .on выступает функция readImage которая и обращается к input по ЕГО ID.
Если вы считаете, что оригинальный код и приведенный вами в топике клоны - сочувствую.

[Владимир]

Ivan Yakushenko, все заработало? И даже formData оказался не пустым? И даже данные формы в php-обработчик передал? Почему-то полагаю, что нет.
Естеественно, если я напишу $('#save-utility').on('click'... все замечательно работает, но тогда этот скрипт попросту не видит формы и ее полей, поэтому тупо ругается на formData. Можно, конечно, поставить костыли и append'ом добить в formData значения полей. Но это костыли, теоретически кнопка с сабмитом и указанием идентификатора формы должна передавать управление скрипту с идентификатором формы, который обрабатывает submit.
Указанная Вами функция readImage читает изменение в input с id="image" и type="file'. В итоге, в массиве $_FILE оказывается считанный файл, который проверяется и картинка выводится на экран. Там же кнопке с id="save-image" дается атрибут hidden="false", т.е. кнопка становится видимой. У нее, кстати, атрибут form="upload-image", т.е. равен идентификатору формы, и атрибут type="submit". При нажатии на ЭТУ кнопку управление передается скрипту $('#upload-image').on('submit'... Там уже читаются данные из формы и передаются в обработчик image-update-handler.php. Там все просто: файл картинки перемещается из директории tmp локального сервера в папку image и обновляется соответствующее поле базы данных.
Вы простите, что я так подробно все расписываю, Вы наверняка это увидели и без моих объяснений. Я это делаю, скорее, для себя...