Динамические элементы формы

[rustleofstars]

Привет. Подскажите кто то причину такой вот проблемы.
Добавляю в форму динамические элементы:

var user_surname = document.createElement("input");
user_surname.setAttribute('type', "text");
user_surname.setAttribute('class', "form-control user-surname");
user_surname.setAttribute('placeholder', "Фамилия");
user_surname.setAttribute('required', "");

var city = document.createElement("input");
city.setAttribute('type', "text");
city.setAttribute('class', "form-control city");
city.setAttribute('placeholder', "Город");
city.setAttribute('required', "");

var branch_number = document.createElement("input");
branch_number.setAttribute('type', "text");
branch_number.setAttribute('class', "form-control branch_number");
branch_number.setAttribute('placeholder', "Номер отделения");
branch_number.setAttribute('required', "");

var type_post = document.createElement('select');
type_post.setAttribute('class', "form-control");
type_post.setAttribute('required', "");
var type_post_option1 = document.createElement("option");
type_post_option1.value = '';
type_post_option1.selected = false;
type_post_option1.text = 'Тип доставки:';
type_post.appendChild(type_post_option1);
var type_post_option2 = document.createElement("option");
type_post_option2.value = 'До отделения';
type_post_option2.selected = true;
type_post_option2.text = 'До отделения';
type_post.appendChild(type_post_option2);

var payment_justin = document.createElement('select');
payment_justin.setAttribute('class', "form-control");
payment_justin.setAttribute('required', "");
payment_justin.setAttribute('id', "payment-justin");

var payment_justin_option1 = document.createElement("option");
payment_justin_option1.value = '';
payment_justin_option1.selected = false;
payment_justin_option1.text = 'Тип оплаты:';
payment_justin.appendChild(payment_justin_option1);
var payment_justin_option2 = document.createElement("option");
payment_justin_option2.value = 'Наложенный платёж';
payment_justin_option2.selected = false;
payment_justin_option2.text = 'Наложенный платёж';
payment_justin.appendChild(payment_justin_option2);
var payment_justin_option3 = document.createElement("option");
payment_justin_option3.value = 'Оплата на карту';
payment_justin_option3.selected = false;
payment_justin_option3.text = 'Оплата на карту';
payment_justin.appendChild(payment_justin_option3);

var Justin_check = createRadioElement("delivery-post", false);
Justin_check.setAttribute('class', "form-check-input user-post");
Justin_check.setAttribute('id', "Justin-check");
Justin_check.setAttribute('value', "Justin");

var justin_block = '<div class="bd-example" id="justin_deliv" style="display: none;"><div class="form-group form-row"><div class="col-12 mb-2" id="jdfdec1"></div></div><div class="form-group form-row"><div class="col-6 mb-2" id="jdfdec2"></div><div class="col-6 mb-2" id="jdfdec3"></div></div><div class="form-group form-row"><div class="col-6 mb-2" id="jdfdec4"></div><div class="col-6 mb-2" id="jdfdec5"></div></div></div>';
var justin_radio = '<div class="form-check form-check-inline" id="jdfdec6"><label class="form-check-label" for="Justin-check">Justin</label></div>';
var jdrc = $('.delivery .form-row:first .col-6:last');
$("body").append("<style>.form-check label:before{content:'';position:absolute;top:0;left:0;width:14px;height:15px;border-radius:4px;border:1px solid #393939;transition:.2s} #jdfdec6 label, #jdfdec6 { margin-left: 20px;} .form-check.active label:after {display: block;} .form-check label:after{content:'';position:absolute;top:0;left:0;width:14px;height:15px;border-radius:4px;border:none;transition:.2s;background:#793896 url(/img/check.svg) no-repeat center center;background-size:contain;display:none}</style>");

if (!jdrc.find("#Justin-check").length > 0) {
    jdrc.append(justin_radio);
    $('.delivery').append(justin_block);
    setTimeout(function() {
        document.getElementById("jdfdec6").appendChild(Justin_check);
        document.getElementById("jdfdec1").appendChild(user_surname);
        document.getElementById("jdfdec2").appendChild(city);
        document.getElementById("jdfdec3").appendChild(branch_number);
        document.getElementById("jdfdec4").appendChild(type_post);
        document.getElementById("jdfdec5").appendChild(payment_justin);
    }, 500);
}

Обработка отправки формы происходит такой функцией:

$(document).on('submit','#feedback-form',function(){

В этой функции обработки отправки формы return false и обработка данных на аяксе. После добавления вышеобозначенных динамически элементов формы вместо обработки формы на аяксе страница перезагружается и вот что в адресной строке:
?delivery-post=Justin&click=3

[laimas]

var user_surname = document.createElement("input");
user_surname.setAttribute('type', "text");
user_surname.setAttribute('class', "form-control user-surname");
user_surname.setAttribute('placeholder', "Фамилия");
user_surname.setAttribute('required', "");

var user_surname = document.createElement("input");
user_surname.type = "text";
user_surname.className = "form-control user-surname";
user_surname.placeholder = "Фамилия";
user_surname.required = true;

и т.д., это для начала.

Justin_check.setAttribute('value', "Justin"); - value, это свойство вообще-то, тем более его как Justin_check.value = "Justin".

PS. Отправлены будут только те поля формы, которые имеют имя, чего у вас не видно в добавлении.

[laimas]

createRadioElement - даже если это пользовательская функция, то непонятно что означает Justin_check.setAttribute и т.п., что одна радио кнопка, тогда какой в этом смысл? А если группа, то она должна иметь имя, и если нужны id, то они не могут быть одинаковы, как и значения кнопок.

Список 'Тип доставки' тоже не понятен. Если выбор его обязателен, тогда зачем в нем опция с пустым значением? Получается, что должен быть флажок, который можно отметить или нет.

Если оперировать атрибутами и свойствами, то удобнее описать параметры полей формы, а также их родителей (div) в объекте, который обходя в цикле позволит построить форму. Объект это дерево вложений и если вложения не определены жестко, то обойти его можно рекурсивно. В примере же жестко определено: в родителе "form-group" (в примере group) помещаются элементы "col-12 mb-2" (в примере wrap, описаны массивом свойства child), в которые размещаются элементы формы, то есть рекурсия не нужна.

Свойство elem всегда массив, даже если описывается одно поле формы, это чтобы "автомат" работал по единому жесткому алгоритму, так как для таких элементов как флажок и радио кнопка желательна метка упрощающая их выбор.

На jQuery описание вывода простое (на нативном впрочем не сложнее, строк немного больше будет):

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var field = [
    {group: '<div>', attr: {'class': 'group'}, child: [
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<input>', attr: {type: 'text', name: 'a', 'class': "form-control user-surname", placeholder: "Фамилия", required: ''}}
        ]}
    ]},
    {group: '<div>', attr: {'class': 'group'}, child: [
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<input>', attr: {type: 'text', name: 'b', 'class': "form-control city", placeholder: "Город", required: ''}}
        ]},
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<input>', attr: {type: 'text', name: 'c', 'class': "form-control branch_number", placeholder: "Номер отделения", pattern: '\\d{6}', required: ''}}
        ]}
    ]},
    {group: '<div>', attr: {'class': 'group'}, child: [
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<input>', attr: {type: 'checkbox', name: 'd', 'class': "form-control", id: 'a'}},
            {node: '<label>', attr: {'class': "form-control", 'for': 'a', text: 'доставка до отделения'}}
        ]}
    ]},
    {group: '<div>', attr: {'class': 'group'}, child: [
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<select>', attr: {name: 'e', 'class': "form-control", required: ''}, options: [
                {value: '', text: 'Тип оплаты'},
                {value: 'Наложенный платёж', text: 'Наложенный платёж'},
                {value: 'Оплата на карту', text: 'Оплата на карту'}
            ]}
        ]}
    ]},
    {group: '<div>', attr: {'class': 'group'}, child: [
        {wrap: '<div>', attr: {'class': 'wrap'}, elem: [
            {node: '<input>', attr: {type: 'submit', 'class': "form-control", value: 'Отправить'}}
        ]}
    ]}
], 
f = $('#f').submit(function(e) {
    e.preventDefault();
    alert($(this).serialize()) //это поля формы для отправления
});

$.each(field, function() {
     var a = $(this.group, this.attr).appendTo(f);
     $.each(this.child, function() {
        var b = $(this.wrap, this.attr).appendTo(a);
        $.each(this.elem, function() {
            var c = $(this.node, this.attr).appendTo(b);
            if(this.options) {
                $.each(this.options, function() {
                    $('<option>', this).appendTo(c); 
                })    
            }        
        })
     })
});
});
</script>
</head>
<body>
<form id="f"></form>
</body>
</html>

[rustleofstars]

var user_surname = document.createElement("input");
user_surname.type = "text";
user_surname.className = "form-control user-surname";
user_surname.placeholder = "Фамилия";
user_surname.required = true;

и т.д., это для начала.

Justin_check.setAttribute('value', "Justin"); - value, это свойство вообще-то, тем более его как Justin_check.value = "Justin".

PS. Отправлены будут только те поля формы, которые имеют имя, чего у вас не видно в добавлении.

Спасибо. Сделал доработки по вашим рекомендациям. Теперь проблема осталась, но в адресной строке уже полный набор полей добавленных в форму и их значений

?delivery-post=Justin&justin_user_surname=11&justin_city=11&justin_branch_number=11&justin_type_post=До+отделения&justin_payment_justin=Наложенный+платёж&click=3

Без добавления динамически полей в форму также видно на секунду передачу в адресную строку параметров, но сразу же выполняется аякс-запрос с переадресацией. А после динамического добавления полей такие как выше написаны параметры submit формы в ссылке и нет выполнения аякс-запроса с переадресацией. Может быть проблема в параметре &click=3 который в ссылке? Странно почему прописанный return false в обработчике отправки формы не блокирует ее submit и передачу параметров в ссылку.

$(document).on('submit','#feedback-form',function(){
...
return false;

[laimas]

Сделал доработки по вашим рекомендациям

Я бы рекомендовал делать так, как в посте #3, ибо проще добавить/редактировать параметр поля в объекте, чем переписывать кучу кода.

Из обработчика можно удалить return false, запрет отправки можно выполнить иначе:

$(document).on('submit', '#feedback-form', function(e) {
    e.preventDefault(); //запрет отправления формы
    $.ajax({
        ....
        data: $(this).serialize(),
        ....
    })
});

[rustleofstars]

$(document).on('submit', '#feedback-form', function(e) {
    e.preventDefault(); //запрет отправления формы
    $.ajax({
        ....
        data: $(this).serialize(),
        ....
    })
});

Спасибо, e.preventDefault(); заблокировал POST формы. Странно что без динамического добавления элементов в форму POST формы блокировал и return false. А после добавления элементов return false перестал блокировать POST.