Я пытаюсь создать форму для создания резюме, и мне нужно, чтобы пользователи добавляли больше входных данных (автоматически).
Я создал входы, и они работают нормально, но мне нужно изменить атрибут имени для каждого автоматически добавляемого блока.
Например :
<input type = "text" id = "fname" name = "fname">
<input type = "text" id = "fname" name = "fname2">
<input type = "text" id = "fname" name = "fname3">
Я знаю, что могу использовать массив name = "value[]"
, но каждый новый блок помещается в другой столбец базы данных, поэтому мне нужно изменить атрибуты.
Мой код:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div id = "input-social" class = "input-container"><input type = "text" id = "social" class = "col-11 form-control" name = "fname" placeholder = "fname"> <span id = "deleteInput" class = "AutoInput" title = "Delete"><i class = "fas fa-trash-alt"></i></span></div>');
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://kit.fontawesome.com/e794a0f8b4.js" crossorigin = "anonymous"></script>
<div class = "form-group">
<div class = "row">
<label class = "col-3 inputFontSize" for = "social">Others</label>
<div id = "contant" class = "col-7">
<button id = "add_form_field" class = "btn add_form_field">Add more <i class = "fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->
Спасибо за помощь
@charlietfl, не могли бы вы привести пример, пожалуйста? Я не понимаю, что вы имеете в виду.
Когда вы используете []
имена.... они принимаются как массивы на стороне сервера. Таким образом, firstname[2]
будет использоваться в паре с lastname[2]
для обработки строки БД.
@charlietfl Я думаю, вы имели в виду это правильно? http://localhost/html/Array ( [0] => test text [1] => test text [2] => test text )
каждый вход получает уникальный идентификатор в массиве, поэтому я не знаю, какая фамилия принадлежит имени. но я знаю, что вы имеете в виду. Спасибо
Вы можете использовать свою переменную x
, которая увеличивается для каждого добавленного input
, и добавить ее к атрибуту name
. Мы будем использовать «строку шаблона». Корректировка name = "fname${x}"
заменит ${x}
значение x
.
$(wrapper).append(`
<div id = "input-social" class = "input-container">
<input type = "text" id = "social" class = "col-11 form-control" name = "fname${x}" placeholder = "fname">
<span id = "deleteInput" class = "AutoInput" title = "Delete">
<i class = "fas fa-trash-alt"></i>
</span>
</div>`
);
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(`<div id = "input-social" class = "input-container"><input type = "text" id = "social" class = "col-11 form-control" name = "fname${x}" placeholder = "fname"> <span id = "deleteInput" class = "AutoInput" title = "Delete"><i class = "fas fa-trash-alt"></i></span></div>`);
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://kit.fontawesome.com/e794a0f8b4.js" crossorigin = "anonymous"></script>
<div class = "form-group">
<div class = "row">
<label class = "col-3 inputFontSize" for = "social">Others</label>
<div id = "contant" class = "col-7">
<button id = "add_form_field" class = "btn add_form_field">Add more <i class = "fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->
Спасибо за быстрый ответ, я попробовал это до того, как это результат <input type = "text" id = "social" class = "col-11 form-control" name = "fname${x}" placeholder = "fname">
он не включает числа, этот счетчик считает добавленные входы.
Кажется, работает на меня. Я добавил фрагмент, запустите его и проверьте добавленные поля — у них есть уникальные атрибуты name
. Убедитесь, что вы меняете добавленный html с обычной строки на строку шаблона, иначе ${x}
не будет работать.
Нетрудно использовать один и тот же индекс каждого имени массива для создания всей базы данных.