VPF::Вложенная форма не дает срабатывать AJAX скрипту

=Женек=

Дата 12.10.2014, 14:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 548
Регистрация: 20.2.2005

Репутация: нет
Всего: 1

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

Код


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

                                            <img style=\"display:none\" id=\"loader\" src=\"loader.gif\" alt=\"Loading....\" title=\"Loading....\" />
                                                <script>
                                                    $(\"#mainForm\").submit(function (event) {
                                                      alert('ОСУЩЕСТВЛЕН ВЫЗОВ AJAX');
                                                      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>
                                  </td></tr>
                            </table>

В этом фрагменте есть теги <form></form> и фрагмент сам по себе работает прекрасно.
Но главная форма тоже содержит теги <form></form> и когда этот фрагмент в нее вставляешь, получается что-то вроде

Код


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

....................
                                    </form> 
</FORM>

AJAX перестает вызываться.

Как решить проблему?

=Женек=

Дата 16.10.2014, 18:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 548
Регистрация: 20.2.2005

Репутация: нет
Всего: 1

Ну я облегчу задачу, так как сам немного разобрался.

Как выяснилось, вложенные тэги 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>";

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

=Женек=

Дата 18.10.2014, 09:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 548
Регистрация: 20.2.2005

Репутация: нет
Всего: 1

Мегазадача, да?

BaNru

Дата 19.10.2014, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 20.9.2014

Репутация: 1
Всего: 1

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »