Динамические элементы формы
Привет. Подскажите кто то причину такой вот проблемы.
Добавляю в форму динамические элементы: Код:
Код:
?delivery-post=Justin&click=3 |
Цитата:
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. Отправлены будут только те поля формы, которые имеют имя, чего у вас не видно в добавлении. |
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>
|
Цитата:
?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;
|
Цитата:
Из обработчика можно удалить return false, запрет отправки можно выполнить иначе:
$(document).on('submit', '#feedback-form', function(e) {
e.preventDefault(); //запрет отправления формы
$.ajax({
....
data: $(this).serialize(),
....
})
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 09:02. |