Показать сообщение отдельно
  #1 (permalink)  
Старый 09.10.2019, 16:13
Интересующийся
Отправить личное сообщение для rustleofstars Посмотреть профиль Найти все сообщения от rustleofstars
 
Регистрация: 30.03.2012
Сообщений: 24

Динамические элементы формы
Привет. Подскажите кто то причину такой вот проблемы.
Добавляю в форму динамические элементы:
Код:
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
Ответить с цитированием