За последние 24 часа нас посетили 18618 программистов и 1689 роботов. Сейчас ищут 1608 программистов ...

AJAX отправка формы

Тема в разделе "JavaScript и AJAX", создана пользователем acho, 28 мар 2017.

  1. acho

    acho Активный пользователь

    С нами с:
    28 дек 2016
    Сообщения:
    854
    Симпатии:
    210
    Адрес:
    Санкт-Петербург
    Други мои, голова кипит, хочется домой, а уйти не могу :D
    Честно говоря, я где-то туплю. А точнее туплю в самой отправке данных.
    в общем есть у меня форма:
    HTML:
    1. <form id="updN" name="updN" onsubmit="updateREdit('{{ path('adminNewsUpdate') }}', 'updN', 'updN');return false;">
    2.                                 <div class="col-md-6 col-sm-6">
    3.                                     <div class="panel-body">
    4.                                         <ul class="nav nav-pills">
    5.                                             <li class="active"><a href="#ruEd" data-toggle="tab">RU</a>
    6.                                             </li>
    7.                                             <li class=""><a href="#enEd" data-toggle="tab">EN</a>
    8.                                             </li>
    9.                                             <li class=""><a href="#deEd" data-toggle="tab">DE</a>
    10.                                             </li>
    11.                                         </ul>
    12.                                         <div class="tab-content">
    13.                                             <div class="tab-pane fade active in" id="ruEd">
    14.                                                 <div class="form-group">
    15.                                                     <label>Название</label>
    16.                                                     <input name="name_ru" class="form-control" value="{{ data.name_ru }}">
    17.                                                     <label>Текст новости</label>
    18.                                                     <textarea name="info_ru" class="form-control" rows="3">{{ data.info_ru }}</textarea>
    19.                                                     <label>META title</label>
    20.                                                     <input name="title_ru" class="form-control" value="{{ data.title_ru }}">
    21.                                                     <label>META description</label>
    22.                                                     <textarea name="description_ru" class="form-control" rows="3">{{ data.description_ru }}</textarea>
    23.                                                 </div>
    24.                                             </div>
    25.                                             <div class="tab-pane fade" id="enEd">
    26.                                                 <div class="form-group">
    27.                                                     <label>Название</label>
    28.                                                     <input name="name_en" class="form-control" value="{{ data.name_en }}">
    29.                                                     <label>Текст новости</label>
    30.                                                     <textarea name="info_en" class="form-control" rows="3">{{ data.info_en }}</textarea>
    31.                                                     <label>META title</label>
    32.                                                     <input name="title_en" class="form-control" value="{{ data.title_en }}">
    33.                                                     <label>META description</label>
    34.                                                     <textarea name="description_en" class="form-control" rows="3">{{ data.description_en }}</textarea>
    35.                                                 </div>
    36.                                             </div>
    37.                                             <div class="tab-pane fade" id="deEd">
    38.                                                 <div class="form-group">
    39.                                                     <label>Название</label>
    40.                                                     <input name="name_de" class="form-control" value="{{ data.name_de }}">
    41.                                                     <label>Текст новости</label>
    42.                                                     <textarea name="info_de" class="form-control" rows="3">{{ data.info_de }}</textarea>
    43.                                                     <label>META title</label>
    44.                                                     <input name="title_de" class="form-control" value="{{ data.title_de }}">
    45.                                                     <label>META description</label>
    46.                                                     <textarea name="description_de" class="form-control" rows="3">{{ data.description_de }}</textarea>
    47.                                                 </div>
    48.                                             </div>
    49.                                         </div>
    50.                                     </div>
    51.                                 </div>
    52.                                 <div class="col-md-6 col-sm-6">
    53.                                     <label>Категория</label>
    54.                                     <select name="cat" class="form-control">
    55.                                         {% for arr in newsCat %}
    56.                                             <option value="{{ arr.id }}" {% if arr.id == data.cat %}selected{% endif %}>{{ arr.name_ru }}</option>
    57.                                         {% endfor %}
    58.                                     </select>
    59.                                     <div class="checkbox">
    60.                                         <label>
    61.                                             <input name="public" type="checkbox" value="1" {% if data.public ==1 %}checked{% endif %}>Опубликовано
    62.                                         </label>
    63.                                     </div>
    64.                                      <input name="metaId" type="hidden" value="{{ data.meta }}">
    65.                                      <input name="id" type="hidden" value="{{ data.id }}">
    66.                                    
    67.                                      <div class="form-group fileDiv" {% if data.imgurl is empty %}
    68.                                         data-img="none"
    69.                                         {% else %}
    70.                                             style="background:url('{{ data.imgurl }}');background-size: cover;"
    71.                                             {% endif %} >
    72.                                                  <div title="Нажмите на меня, для обзора файла">
    73.                                                      <input name="uploaded_file" class="inf" type="file" size="1">
    74.                                                      <input name="nonUpload" type="hidden" value="{{ data.imgurl }}">
    75.                                                  </div>
    76.                                              </div>
    77.                                     <a onclick="updateREdit('{{ path('adminNewsUpdate') }}');return false;"  class="btn btn-default">Обновить</a>
    78.                                 </div>
    79.                             </form>
    и js-функция
    Код (Javascript):
    1. function updateREdit(path) {
    2.    
    3.     var data = new FormData(document.forms.updN);
    4.     jQuery.ajax({
    5.       url:      path,
    6.       type:     "POST",
    7.       dataType: "html",
    8.       data: data,
    9.       success: function() {
    10.          $("#editModalBox").modal('hide');
    11.          return false;
    12.       },
    13.       error: function() {
    14.          console.log("no");
    15.       }
    16.    });
    17. }
    собственно, надо мне отправить данные с формы ajax'ом, но сыпется ошибка:
    Как-то не так собираются данные? Объект вроде создаётся. Кстати есть какой-нибудь var_dump в js? посмотреть, что хоть в объекте реально находится
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.799
    Симпатии:
    1.331
    Адрес:
    Лень
    Код (Javascript):
    1. $( function ()
    2. {
    3.     $( 'body' ).on( 'submit', 'form#updN', function ( e )
    4.     {
    5.         e.preventDefault();
    6.      
    7.         var form = $( this );
    8.         var formData = new FormData( form.get(0) );
    9.      
    10.         $.ajax(
    11.         {
    12.             url: form.attr( 'action' ),
    13.             type: form.attr( 'method' ),
    14.             contentType: false, // важно - убираем форматирование данных по умолчанию
    15.             processData: false, // важно - убираем преобразование строк по умолчанию
    16.             data: formData,
    17.             dataType: 'HTML',
    18.             success: function()
    19.             {
    20.                 $("#editModalBox").modal('hide');
    21.             }
    22.         });
    23.     });
    24. });
    в теге форм допиши атрибуты action и method
    --- Добавлено ---
    + сделай обычную форму с submit кликом, убери лишнее
     
    acho нравится это.
  3. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    console.log()
     
    acho нравится это.
  4. acho

    acho Активный пользователь

    С нами с:
    28 дек 2016
    Сообщения:
    854
    Симпатии:
    210
    Адрес:
    Санкт-Петербург
    Спасибо, да, забыл отписать. Задачу выполнил. Чуть позже выложу решение