Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вложенная форма не дает срабатывать AJAX скрипту

Автор: =Женек= 12.10.2014, 14:03

Господа, есть у меня сложная форма для отправки регистрационных данных, пытаюсь встроить в нее загрузку фотографий на лету с использованием технологии 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

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

Как выяснилось, вложенные тэги FORM не работают. Для чего и придуман параметр form http://htmlbook.ru/html/input/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

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

Автор: BaNru 19.10.2014, 15:47

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