Как правильно отправить форму, если подгружаются блоки jQuery?

Question

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

Добрый день, друзья.
У меня есть страница по добавлению объявления, в зависимости от выбранного радио-баттона подгружается определенный блок с инпутами с помощью jQuery, путем добавления класса (display: block). Эти инпуты (их имена) могут пересекаться между блоками. Выглядит примерно так:

<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="divAddOnjectInputs">
                    <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="divAddOnjectInputs">
				    <label for="area">Площадь: </label>    
					<input id="area" type="text" class="inputfilter shadow-inset-2" name="area" placeholder="м2">
				</div>
				
				<div class="divAddOnjectInputs">
                    <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="divAddOnjectInputs">
				    <label for="ceiling">Высота потолков: </label>    
					<input id="ceiling" type="text" class="inputfilter shadow-inset-2" name="ceiling" placeholder="м">
				</div>
				
                <input type="submit" value="Отправить">

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

    <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>
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5 type-object-text">Введите данные объекта</span>

                <div class="divAddOnjectInputs">
                    <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="divAddOnjectInputs">
				    <label for="area">Площадь: </label>    
					<input id="area" type="text" class="inputfilter shadow-inset-2" name="area" placeholder="м2">
				</div>
				
				<div class="divAddOnjectInputs">
                    <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="divAddOnjectInputs">
				    <label for="legal">Юридический адрес: </label>    
					<input id="legal" type="text" class="inputfilter shadow-inset-2" name="legal" placeholder="Предоставляется">
				</div>
				
				<input type="submit" value="Отправить">

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

В зависимости от радио баттона показывается step4psn или step4office, как видите, имена инпутов есть схожие.
Подскажите, как правильно и где поставить теги <form>, чтобы форма отправляла только те значения из блока, который в итоге был выбран инпутами.

Заранее большое спасибо!

Answer 1

[Алексей Чернявский]

Думаю проще данные отправить примерно так:

$.ajax({
            method: "POST",
            data: $(".divAddObject:visible form").serialize(),
            url: "/Api/PostForm/",
            success: function (data){}
});

То есть сами формы (2 шт) разместить в диве с классом divAddObject.