Почему отправляется только данные одной формы (PHP+AJAX)?

Question

[Александр Андропов]

Доброго времени суток друзья. У меня есть задача - сделать страницу добавления объявления. Первый блок <b>div</b> содержит два радио-баттона, второй блок из 4-х радио-баттонов состоит.

Во втором блоке: в зависимости от выбора радио-баттона появляется div (3-ий блок div), в котором инпуты и отправка файлов на сервер через форму.

Если я выбираю первый радио баттон в 3ьем блоке (

<div id="step4psn" class="divAddObject alert-primary displayNone">

), то данные отсылаются нормально, вместе с изображениями, но если я выбираю второй радио-баттон и следующие, массивы $_POST и $_FILES пустые :-(

Подскажите, как реализовать это правильно, чтобы отправлялись полные данные из форм.
В итоге: первый и второй блок обязательно отправить (собрать данные), а третий уже в зависимости от нажатого радио-баттона показываться будет, и оттуда данные тоже нужно отправить на PHP обработчик.

Вот что у меня получилось:

<div>

    <div id="step1" class="divAddObject alert-primary">
        <div class="d-flex flex-start w-100">
        </div>
    </div>

    <div id="step2" class="divAddObject alert-primary">
        <div class="d-flex flex-start w-100">
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5">Тип Сделки</span>

    <div id="buttons-tip-sdelki">  

<form action="handlers/add_object.php" method="POST" enctype="multipart/form-data">

         <input type="radio" id="type-build" class="btn btn-primary btn-sm" name="tip-sdelki" value="rent"><i class="fal fa-sync mr-1"></i> Аренда
         <input type="radio" id="type-build" class="btn btn-primary btn-sm" name="tip-sdelki" value="buy"><i class="fal fa-sync mr-1"></i> Продажа</span> 

    </div>

        </div>
    </div>
        </div>
    </div>    

    <div id="step3" class="divAddObject alert-primary displayNone">
        <div class="d-flex flex-start w-100">
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5">Тип Объекта</span>

    <div id="radio-buttons-type-build">
     <div>
        <div class="custom-control custom-radio">
            <input type="radio" id="psn" name="type-object" class="custom-control-input" value="psn">
            <label class="custom-control-label" for="psn">Помещение свободного назначения</label>
        </div>

        <div class="custom-control custom-radio">
            <input type="radio" id="office" name="type-object" class="custom-control-input" value="office">
            <label class="custom-control-label" for="office">Офис</label>
        </div>

        <div class="custom-control custom-radio">
            <input type="radio" id="zdanie" name="type-object" class="custom-control-input" value="zdanie">
            <label class="custom-control-label" for="zdanie">Здание</label>
        </div>

        <div class="custom-control custom-radio">
            <input type="radio" id="tp" name="type-object" class="custom-control-input" value="tp">
            <label class="custom-control-label" for="tp">Торговая площадь</label>
        </div>        
      </div>
     </div>

        </div>
    </div>
        </div>
    </div>  

    <div id="step4psn" class="divAddObject alert-primary displayNone">
        <div class="d-flex flex-start w-100">
            <div class="mr-2 hidden-md-down">
                <span class="icon-stack icon-stack-lg">
                    <i class="base base-2 icon-stack-3x opacity-100 color-primary-500"></i>
                    <i class="base base-2 icon-stack-2x opacity-100 color-primary-300"></i>
                    <i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
                </span>
            </div>
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5 type-object-text">Введите данные объекта</span>

                <div class="divAddObjectInputs">
                    <label for="address">Адрес: </label>    
                    <input id="address" type="text" class="inputfilter shadow-inset-2" name="address" placeholder="Адрес">
                    <label for="metro">Метро: </label>
                    <input id="metro" type="text" class="inputfilter shadow-inset-2" name="metro" placeholder="Ближайшая станция метро">
                </div>

                <div class="divAddObjectInputs">
                    <label for="area">Площадь: </label>    
                    <input id="area" type="text" class="inputfilter shadow-inset-2" name="area" placeholder="м2">
                </div>

                <div class="divAddObjectInputs">
                    <label for="floor">Этаж: </label>    
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorFrom" id="floorFrom" name="floorFrom">
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorTo" id="floorTo" name="floorTo">
                </div>

                <div class="divAddObjectInputs">
                    <label for="ceiling">Высота потолков: </label>    
                    <input id="ceiling" type="text" class="inputfilter shadow-inset-2" name="ceiling" placeholder="м">
                </div>

                <div class="divAddObjectInputs">
                    <label for="ceiling">Загрузить фото: </label>    
                    <input type="file" name="photos[]" multiple> <br>  <br>
                </div>              

                <input type="button" value="Отправить" />

        </div>
    </div>
        </div>
    </div>
</form>

    <div id="step4office" class="divAddObject alert-primary displayNone">
        <div class="d-flex flex-start w-100">
            <div class="mr-2 hidden-md-down">
                <span class="icon-stack icon-stack-lg">
                    <i class="base base-2 icon-stack-3x opacity-100 color-primary-500"></i>
                    <i class="base base-2 icon-stack-2x opacity-100 color-primary-300"></i>
                    <i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
                </span>
            </div>
<form action="handlers/add_object.php" method="POST" enctype="multipart/form-data">            
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5 type-object-text">Введите данные объекта</span>

                <div class="divAddObjectInputs">
                    <label for="address">Адрес: </label>    
                    <input id="address" type="text" class="inputfilter shadow-inset-2" name="address" placeholder="Адрес">
                    <label for="metro">Метро: </label>
                    <input id="metro" type="text" class="inputfilter shadow-inset-2" name="metro" placeholder="Ближайшая станция метро">
                </div>

                <div class="divAddObjectInputs">
                    <label for="area">Площадь: </label>    
                    <input id="area" type="text" class="inputfilter shadow-inset-2" name="area" placeholder="м2">
                </div>

                <div class="divAddObjectInputs">
                    <label for="floor">Этаж: </label>    
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorFrom" id="floorFrom" name="floorFrom">
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorTo" id="floorTo" name="floorTo">
                </div>

                <div class="divAddObjectInputs">
                    <label for="legal">>Юридический адрес: </label>    
                    <input id="legal" type="text" class="inputfilter shadow-inset-2" name="legal" placeholder="Предоставляется">
                </div>

                <div class="divAddObjectInputs">
                    <label for="ceiling">Загрузить фото: </label>    
                    <input type="file" name="photos[]" multiple> <br>  <br>
                </div>              

                <input type="button" value="Отправить" />
</form>
        </div>
    </div>
        </div>
    </div>  

</div>

И JavaScript jQuery

$(document).ready( function(){

  var firstClick = false; 
  var dataIDold;

  $('#buttons-tip-sdelki .btn-primary').on('click', function(){
      $('#step3').removeClass('displayNone').addClass('displayActive');
  });

  $('#step3 .custom-control-input').on('click', function(){
     // -- ДОБАВЛЯЕМ БЛОКИ, В ЗАВИСИМОСТИ ОТ ВЫБРАННОГО РАИДО БАТТОНА 
     var dataValue = $(this).attr('value'); 
     var dataID = "step4" + dataValue; 

     if (firstClick === true) {
         $('#' + dataIDold).removeClass('displayActive');
         $('#' + dataID).addClass('displayActive');
         dataIDold = dataID;
     }
     else {
        $('#' + dataID).addClass('displayActive');
        dataIDold = dataID;
        firstClick = true;
     }

  });  

  $("[type='button'][value='Отправить']").on('click', function(){
     // ОТПРАВЛЯЕМ ФОРМУ
        $.ajax({
                method: "POST",
                contentType: false, 
                processData: false,           
                data: new FormData($(".divAddObject:visible form")[0]), 
                url: "handlers/add_object.php",
                success: function (data){}
        });
  });

});

Comments

[Евгений Мусонов]

Для начала предлагаю вам разобраться со своим html кодом, у вас много ошибок в закрывающих тегах.

Answer 1

[fallus]

Я бы заменил это:

$.ajax({
  method: "POST",
  contentType: false, 
  processData: false,           
  data: new FormData($(".divAddObject:visible form")[0]), 
  url: "handlers/add_object.php",
  success: function (data){}
});

На это:

var formData = $(this).closest('form').serialize();

$.ajax({
  method: "POST",
  contentType: false, 
  processData: false,           
  data: formData, 
  url: "handlers/add_object.php",
  success: function (data){}
});

Типо кликаешь по кнопке. Потом ищется её родитель-форма. Именно форма этой кнопки.
Потом сериализуется и все сразу идут гулять с друзьями своими лучшими шестьюдесятью.

Comments

[Александр Андропов]

вообще ничего не происходит по нажатию на кнопке :(