Не работает параметр form тэга input

[Eвгений]

Господа, есть задача, для реализации которой, на первый взгляд, необходимо создать вложенную форму

<FORM id=form1>
<FORM id=form2>
...........

</FORM>
</FORM>

Для чего? Ну есть основная форма, внутри которой форма для загрузки фотографий. Как известно, вложенные тэги FORM не работают. Для чего и придуман параметр form ознакомиться можно здесь

Я попытался реализовать это на практике - не работает.

Вот, посмотрите - так работает:

print "<form enctype=\"multipart/form-data\" action=\"upload_recipe_images.php\" method=\"POST\" id=\"mainForm\">

<input id=\"uploadImage\" type=\"file\" accept=\"image/*\" name=\"image\" form=\"mainForm\" />
<input id=\"button\" type=\"submit\" value=\"Upload\" form=\"mainForm\" >


<div id=\"results\"></div>
<img style=\"display:none\" id=\"loader\" src=\"loader.gif\" alt=\"Loading....\" title=\"Loading....\" />
</form>
<script>
$(\"#mainForm\").submit(function (event) {
event.preventDefault();
var data = new FormData($('#mainForm')[0]);
$.ajax({
type: \"POST\",
url: \"upload_recipe_images.php\",
data: data,
contentType: false,
processData: false,
beforeSend: function() {
$('#loader').show();
}
}).done(function (html) {
$(\"#results\").append(html);
$('#loader').hide();
$('#mainForm')[0].reset();
});
});
</script>";

А вот так не работает

print "<form enctype=\"multipart/form-data\" action=\"upload_recipe_images.php\" method=\"POST\" id=\"mainForm\">
</form>
<input id=\"uploadImage\" type=\"file\" accept=\"image/*\" name=\"image\" form=\"mainForm\" />
<input id=\"button\" type=\"submit\" value=\"Upload\" form=\"mainForm\" >


<div id=\"results\"></div>
<img style=\"display:none\" id=\"loader\" src=\"loader.gif\" alt=\"Loading....\" title=\"Loading....\" />

<script>
$(\"#mainForm\").submit(function (event) {
event.preventDefault();
var data = new FormData($('#mainForm')[0]);
$.ajax({
type: \"POST\",
url: \"upload_recipe_images.php\",
data: data,
contentType: false,
processData: false,
beforeSend: function() {
$('#loader').show();
}
}).done(function (html) {
$(\"#results\").append(html);
$('#loader').hide();
$('#mainForm')[0].reset();
});
});
</script>";

В чем причина?

[anadonam]

Eвгений, думал думал , не смог придумать задачи где необходима форма в форме

[Eвгений]

anadonam,
А думать не надо, надо читать топикстартера

Для чего? Ну есть основная форма, внутри которой форма для загрузки фотографий.

К примеру на сайте есть статьи с пошаговыми фотографиями. И есть страничка, которая позволяет пользователю добавить статью и фотографии. Вписываешь информацию в текстовые поля, а дальше грузишь одну или несколько фотографий.

[anadonam]

вот и подумал , зачем загрузку фотографий делать отдельной формой ?
ведь тут всего лишь заполняется данными элемент формы



а вариант не работать может так как у тебя браузер не попадает в перечень работающих с этим вариантом - ну к примеру
Internet Explorer 10 Chrome 9 Opera 10 Safari 5 Firefox 4 Android iOS

[Eвгений]

вообще да... как выяснилось в IE это не работает в принципе. У меня 11 версия.

ведь тут всего лишь заполняется данными элемент формы

Я хочу сделать по модному - заполняешь текстовые поля. Дальше пиктограмка примерно 100x100 px, изображающая рамку для будущей картинки. Кликаешь на эту пиктограмку, открывается окно выбора файла с диска, выбираешь файл, картинка грузится, на сервере создается ее мелкая копия (100x100) и возвращается в то поле, на которое кликали.
Это гибрид ЭТОГО и ЭТОГО, то есть как реализовать это я не спрашиваю.

Проблема в том, что когда комбинируешь загрузку картинок с текстовыми полями, отправка которых на сервер осуществляется другой, "окончательной" кнопкой, тэги FORM нельзя сделать невложенными. Если кто знает как - подскажите.

Или может я чего подзабыл - я 7 лет уже не занимаюсь вэбом.

[silly]

Сообщение от Eвгений

В чем причина?

$('#mainForm')[0] ничего не возвращает во втором случае.

P.S. Очень, очень развесистый print.

[Eвгений]

silly,
неправда ваша.
Не вызывается $(\"#mainForm\").submit(function (event)
Я добавил в начало функции аlert, во втором случае он просто не срабатывает.

[silly]

Сообщение от Eвгений

неправда ваша.

Я не утверждал, что это единственная ошибка…

Сообщение от Eвгений

Не вызывается $(\"#mainForm\").submit(function (event)
Я добавил в начало функции аlert, во втором случае он просто не срабатывает.

В $(function({ … })) попробуй обернуть.

[Eвгений]

Практически решил проблему, нашел как создать динамическую форму.

Только вот не могу запрос AJAX под новое решение адаптировать.
Данные (картинка для загрузки) в AJAX передаются так:

var data = new FormData($('#mainForm')[0]);
$.ajax({
type: \"POST\",
url: \"upload_recipe_images.php\",
data: data,
......

А к элементу INPUT динамической формы можно добраться так: e.childNodes[1]
По крайней мере alert(e.childNodes[1].id) выдает правильное имя.

Простая замена $('#mainForm')[0] на e.childNodes[1] результата не дает. Как правильно сделать?

[Eвгений]

Проблема решена ( почти))) ).

[Serezhka]

Автор, а что если тебе в качестве события использовать не отправку формы, а клик по кнопке

$(\"#button\").click(function (event) {
вместо
$(\"#mainForm\").submit(function (event) {

и в обращении к серверу использовать не данные формы, а данные конкретного инпута:

var data = new FormData($('#uploadImage'));
вместо
var data = new FormData($('#mainForm')[0]);

Что получится?

[Eвгений]

Serezhka,
не работает так как ты указал.
Вот это

var data = new FormData($('#uploadImage'));

не работает
То есть скрипт вызывается и выполняется, но скрипту обработчику AJAX запроса попадает лажа.

Пока что у меня работает следующее - сделал основную форму динамической, а ту, где AJAX загрузка картинки, обычную, тэгом <form>.

[Eвгений]

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

<td id=\"wrapper2\">

<form enctype=\"multipart/form-data\" action=\"upload_recipe_images.php\" method=\"POST\" id=\"mainForm\">
<input id=\"button\" style=\"display:none\" type=\"submit\" value=\"Upload\">
<input style=\"display:none\" type=\"file\" accept=\"image/*\" name=\"image\" id=\"uploadImage\" onchange=\"button.click()\" />
<div id=\"results\"><img src=images/folder.jpg border=4 width=150 height=200 onclick=\"uploadImage.click()\"/></div>
</form>


<script>
$(\"#mainForm\").submit(function (event) {
event.preventDefault();
var data = new FormData($('#mainForm')[0]);
$.ajax({
type: \"POST\",
url: \"upload_recipe_images.php\",
data: data,
contentType: false,
processData: false,
beforeSend: function() {
$('#loader').show();
}
}).done(function (html) {
$(\"#results\").empty();
$(\"#results\").append(html);
$('#loader').hide();
$('#mainForm')[0].reset();
});
});
</script>
</td>

Вопрос - а нельзя ли как-нить вообще выкинуть тэг FORM ?
Ну или как вариант, сделать так чтобы по выбору файла не жалась невидимая кнопка, а сразу отправлялась форма? onclick="mainForm.submit()" - работает неправильно, скрипт не ловит событие submit и upload_recipe_images.php вызывается самостоятельно

[Eвгений]

Продолжаю мучить вопросами (предыдущий решен)

<input onclick="alert('click')" style="display:none" type="file" accept="image/*" name="image" id="uploadImage" onchange="this.parentNode.parentNode.childNodes[1].childNodes[1].click()" />
<div class="results" onclick="this.parentNode.parentNode.childNodes[1].childNodes[3].click()"><img class="grow pic" src=images/folder.jpg border=4 width=150 height=200 /></div>

Когда я нажимаю на картинку, помещенную в тэг DIV, должен открываться диалог выбора файла (id инпута - uploadImage). Открывается она программным кликом -

onclick="this.parentNode.parentNode.childNodes[1].childNodes[3].click()"

в IE все работает. В Google Chrome ничего не открывается, но клик клик инпутом отслеживается (я для диагностики вставил onclick="alert('click')" )
Немаловажная деталь - этот инпут скрыт : style="display:none"
Если я убираю style="display:none", то диалог выбора файла при нажатии на картинку открывается.
Что делать?

[Serezhka]

Eвгений, ты очень мощно намутил.
Тебе проще через CSS сделать скрытый инпут поверх этой картинки, размером с эту картинку.
Чтобы чел тыкая в картинку попадал просто по инпуту. Тогда тебе этой жесточайшей конструкции из parentNode и прочего не понадобится.

[Eвгений]

Serezhka,

Чтобы чел тыкая в картинку попадал просто по инпуту. Тогда тебе этой жесточайшей конструкции из parentNode и прочего не понадобится.

Жесточайшая конструкция оправдана и от нее никуда не денешься.
У меня динамическое создание элементов для ввода картинок. То есть нажал кнопку - появились еще инпуты, нажал другую кнопку, инпуты удалились.
Вначале у меня вновь добавленные инпуты и формы получали id с номерами. Пришлось вносить в AJAX запрос изменения, чтобы он понимал, какая форма его вызвала и результат отправлял в соответствующую форму. Но когда я стал делать кнопки для удаления элементов ввода картинки, пришлось предусматривать пересчет номеров идентификаторов для соранения непрерывной нумерации. Поняв, какая каша получится, я решил уйти от id (если их в приведенном коде удалить, элементы останутся работоспособными) и оперировать исключительно с элементами дерева, возложив задачу по получению ссылок на элементы на javascript. Код стал проще в разы.

Спасибо за внимание к проблеме и альтернативное предложение, но оно не подойдет.

В настоящее время суть проблемы сводится к вопросу - почему style="display:none" в google chrome делает неработоспособной input ? Я кстати упрощал код донельзя в отдельном файле для чистоты эксперимента - результат тот же.

[sape]

Сообщение от Eвгений

В настоящее время суть проблемы сводится к вопросу - почему style="display:none" в google chrome делает неработоспособной input ? Я кстати упрощал код донельзя в отдельном файле для чистоты эксперимента - результат тот же.

Можно посмотреть исходники хрома, а вообще вместо display: none можно вот так
position: absolute;
top: -100500px
А чё б не воспользоваться чем-то подобным https://github.com/blueimp/jQuery-File-Upload

[1000w]

Сообщение от Eвгений

В настоящее время суть проблемы сводится к вопросу - почему style="display:none" в google chrome делает неработоспособной input ? Я кстати упрощал код донельзя в отдельном файле для чистоты эксперимента - результат тот же.

что значит "неработоспособный"? http://jsfiddle.net/jkgmbq4c/1/ работает

[Eвгений]

А чё б не воспользоваться чем-то подобным

Слишком уникально (не в хвастливом смысле, а в обычном) то, что я хочу получить. Просто что-то взять и переделать не получится.

top: -100500px

А нет риска, что поисковики воспримут это как попытку мухлежа и забанят? Ходили в сети байки, что если в display none очень много текста, то это настораживает google.

[Eвгений]

Сообщение от 1000w

что значит "неработоспособный"? http://jsfiddle.net/jkgmbq4c/1/ работает

Глаза открой, посты перечитай мои и мозг включи.
Ты проверил "отзывчивость" инпута на клик.
Я об этом уже писал:

но клик клик инпутом отслеживается (я для диагностики вставил onclick="alert('click')" )

Но ты постишь такой же пример, где проверяешь работоспособность алертом.
А я под работоспособностью понимаю еще и открытие диалога для выбора файла при нажатии на инпут. И в IE и в Chrome это работает, но если добавить display:none, Google Chrome не открывает диалог.

Так что переделай свой пример и мы посмотрим.

[1000w]

Сообщение от Eвгений

Глаза открой, посты перечитай мои и мозг включи.

я честно сделал попытку разобраться в твоей писанине, ты стал дерзить, поэтому ты мне в хyй не вперся читать твои ебaнутые посты.

Подрочи себе сам.

[sape]

Дерзкий однако, ну пусть своим временем расплачивается, возможно потом получится сделать и нечереззад.

[Eвгений]

1000w,

я честно сделал попытку разобраться в твоей писанине,

Ты называешь это честной попыткой? Не удосужившись даже почитать, ЧТО Я УЖЕ СДЕЛАЛ на пути к решению проблемы, ты мне пихаешь код явно не по теме, со словами из серии "а кули тут разбираться?"
Я не дерзкий, я всегда так общаюсь с теми, кто НЕ ЧИТАЕТ. Что ты не прочитал, я уже тебе показал.

поэтому ты мне в хyй не вперся читать твои ебaнутые посты.

Рассказывай. Ты просто понял, где твой косяк, правильное решение выдать не можешь, а признаться в этом ссышь, проще изобразить из себя важную птицу.

ты мне в хyй не вперся

У тебя ***ми пёздами и херами не только голова пропитана, но и код, который ты сочиняешь, в чем я убедился, пройдя по твоей ссылке.

нечереззад.

Ведь спроси тебя, что тут через зад - ты ведь за свои слова не ответишь? Или ляпнешь что не по делу.

возможно потом получится сделать

А я ведь сделаю, и выложу здесь результат. И почему-то кажется, что решение очень простое, просто я подзабыл или вообще не знал. Но я любитель. А тебе не стыдно будет потом?