Форма javascript не работает

Всем доброго дня.
Средствами php+html на страницу добавляю форму:

Данная форма отлично работает. (обращаю внимание кнопки submit нет). По нажатию, открывается окно, выбираю стопку файлов , нажимаю ок, и все отправляется на сервер.

Решил малость переделать страницу. Теперь добавляю форму кодом js:

Отображается форма нормально, но судя по всему просит кнопку submit. То есть показывает что файлы выбраны, и на этом все.
Как сделать, чтобы форма работала без сабмита?

Обработчик выглядит так

Сообщение от kupidon Как сделать, чтобы форма работала без сабмита?

form.submit(). Но в общем то зачем вообще нужна форма в таком случае, достаточно одного поля file, Ajax, FormData и обрабатывать прогресс загрузки вместо include/upload_photo/loader.gif.

Спасибо за внимание к моему вопросу. У меня скрипт обработки формы и скрипт вывода данной страницы находятся в одном файле. Структура его такая:

вот скрипт ajax-обработчик полностью:

var form_data = new FormData(); — должно объявляться один раз до цикла.

var file_dat000 = $(‘#photoimg’).prop(‘files’)[i];
form_data.append(‘ file ‘, file_dat000 );

Это не правильно, массив $_FILES будет содержать только последний файл из присланных. Ключ может быть один, но содержать массив. А $(‘#photoimg’).prop(‘files’)[i] — это вообще не то.

А это что такое:

var iditem = $(«#iditem»).val();
form_data.append(‘iditem’, iditem);

и тоже под одним ключом?

Сообщение от kupidon beforeSend:function() <
$(«#imagel oadstatus»).show();
$(«#imagel oadbutton»).hide();
>,
success: function(response) <
$(«#imagel oadstatus»).hide();
$(«#imagel oadbutton»).show();
//alert(response);
show_pictu re(response);
>,
error: function() <
$(«#imagel oadstatus»).hide();
$(«#imagel oadbutton»).show(); � �
>

Это можно заменить на (вне ajax):

Это будет срабатывать для всех асинхронных запросов!

Сообщение от laimas var form_data = new FormData(); — должно объявляться один раз до цикла.

var file_dat000 = $(‘#photoimg’).prop(‘files’)[i];
form_data.append(‘ file ‘, file_dat000 );

А это что такое:

var iditem = $(«#iditem»).val();
form_data.append(‘iditem’, iditem);

и тоже под одним ключом?

Для одного товара я загружаю несколько изображений за один раз.
В форме я выделяю несколько файлов. Далее циклом перебираю эти файлы. Например беру один файл добавляю в formdata, добавляю туда же переменную ид товара (чтобы обработчик понял куда загружать файл и как прописать его в БД). И так, в цикле, каждый файл вместе с переменной отправляю в обработчик.
Все это работает

Это все что требуется. И получите на сервере в $_FILES под ключом file массив загруженных файлов. Обходите его циклом, проверяя ключ error и если он равен 0, производите другие необходимые проверки и действия, загружая файлы в каталог.

Что такое $(«#iditem»).val(); и зачем?

Сообщение от laimas Что такое $(«#iditem»).val(); и зачем?

Это ид товара. Передаю в обработчик файлы и номер товара. Использую его для для добавления записи фото по ID товара.

Подскажите пожалуйста в какое место файла добавить это скрипт- обработчик формы, чтобы он также полноценно работал? Подозреваю, что дело в области видимости вновь добавленной формы.

Сообщение от kupidon Это ид товара. Передаю в обработчик файлы и номер товара. Использую его для для добавления записи фото по ID товара.

Уже ведь говорилось, что при редактировании товара, его ID просто связать с именем поля file — name=»file[id_товара]».

При этом товар уже может иметь ранее добавленные изображения, которые можно заменить на новые, только в этом случае полем file можно выбрать только один файл.

То есть сервер может получить для товара как новые файлы для замены имеющихся, так и новые добавляемые. И сделать это очень просто:

name=»file[id_товара][id_изображения]» — это обновляемые изображения

name=»file[id_товара][0][]» multyple — это новые, поле со множественным выбором

$_FILES будет содержать:

Что может быть проще. Если уж передавать id товара отдельно, то скрытым поле, а не через #id и целую кучу.

Источник

Что пошло не так? Устранение ошибок JavaScript

Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. Цель получить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.

Типы ошибок

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:

Синтаксические ошибки: Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!

Логические ошибки: Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.

Ладно, все не так просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.

Ошибочный пример

Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!

Примечание: Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.

На этом этапе давайте рассмотрим консоль разработчика, чтобы увидеть, можем ли мы видеть какие-либо синтаксические ошибки, а затем попытаемся их исправить. Вы узнаете, как это сделать, ниже.

Исправление синтаксических ошибок

Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в консоль разработчика JavaScript (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.

Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
- Красный «x» означает, что это ошибка.
- Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
- Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
- Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
- Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:

Примечание: См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.

Синтаксические ошибки: второй раунд

Примечание: console.log() это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение lowOrHi в консоли, как только мы попытаемся установить его в строке 48.

Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
Теперь, если вы попробуете ввести значение и нажать кнопку «Submit guess», вы увидите . другую ошибку!
На этот раз сообщается об ошибке: «TypeError: lowOrHi is null», в строке 78.

, который мы хотим. Уф! Ещё одна ошибка исправлена! Вы можете удалить строку с console.log() сейчас, или оставить для дальнейшего применения — выбирайте сами.

Примечание: Загляните на справочную страницу TypeError: «x» is (not) «y», чтобы узнать больше об этой ошибке.

Синтаксические ошибки: третий раунд

Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — «TypeError: resetButton.addeventListener is not a function»! Однако, теперь она происходит из-за строки 94.
Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить addeventListener на addEventListener .

Логическая ошибка

На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!

Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

Работаем через логику

Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random() , который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

Дальше, мы передаём результат вызова Math.random() через Math.floor() , который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:

Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:

поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

Другие распространённые ошибки

Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.

SyntaxError: отсутствует ; перед постановкой

Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции checkGuess() :

Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания ( = ), который присваивает значение переменной — с оператором сравнения ( === ), который строго сравнивает операнды, и возвращает true / false .

Примечание: Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

Причиной этому является все то же перепутывание оператора присваивания ( = ) со строгим сравнением ( === ). Например, если мы изменим внутри checkGuess() эту строку кода:

мы всегда будем получать true , заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

SyntaxError: отсутствует ) после списка аргументов

Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

Примечание: Загляните на справочную страницу SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

SyntaxError: missing : after property id

Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив

Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!

SyntaxError: missing > after function body

Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции checkGuess() .

SyntaxError: expected expression, got ‘string‘ or SyntaxError: unterminated string literal

Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше, строка будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.

При всех этих ошибках действуйте так, как в наших примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!

Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.

Резюме

Итак, мы научились основам выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.

Источник