Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2019, 16:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от 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 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, 09.10.2019 в 16:53.
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2019, 21:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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>

Последний раз редактировалось laimas, 09.10.2019 в 23:03.
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2019, 19:51
Интересующийся
Отправить личное сообщение для rustleofstars Посмотреть профиль Найти все сообщения от rustleofstars
 
Регистрация: 30.03.2012
Сообщений: 24

Сообщение от laimas Посмотреть сообщение
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;
Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2019, 20:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

$(document).on('submit', '#feedback-form', function(e) {
    e.preventDefault(); //запрет отправления формы
    $.ajax({
        ....
        data: $(this).serialize(),
        ....
    })
});
Ответить с цитированием
  #6 (permalink)  
Старый 18.10.2019, 19:57
Интересующийся
Отправить личное сообщение для rustleofstars Посмотреть профиль Найти все сообщения от rustleofstars
 
Регистрация: 30.03.2012
Сообщений: 24

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

$(document).on('submit', '#feedback-form', function(e) {
    e.preventDefault(); //запрет отправления формы
    $.ajax({
        ....
        data: $(this).serialize(),
        ....
    })
});
Спасибо, e.preventDefault(); заблокировал POST формы. Странно что без динамического добавления элементов в форму POST формы блокировал и return false. А после добавления элементов return false перестал блокировать POST.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать элементы формы недоступными Compas Общие вопросы Javascript 4 06.10.2012 21:59
найти все элементы формы wcb-falcon Общие вопросы Javascript 6 17.07.2012 18:22
Динамические формы. ака Выпадающие списки :) sochinec Общие вопросы Javascript 5 18.04.2012 17:19
Добавить элементы формы Katik Элементы интерфейса 1 02.03.2012 11:09
Динамические html элементы sky Элементы интерфейса 2 07.03.2010 11:58