Однажды, возможно, вам понадобится функциональность, которая позволит вашим пользователям динамически добавлять поля в форму веб приложения. Благодаря нашему любимому jQuery эта задача выполняется в два счёта. Для того чтобы всё работало, мы будем использовать массив, который будет отправляться на обработку языком PHP. В этом уроке мы создадим форму с кнопками добавить, удалить и сбросить и сформируем данные, которые будут отправлены через AJAX.

Код
Для того чтобы построить данную систему вам не нужно быть экспертом в JavaScript. Первое, что нам нужно создать так это функцию, которая будет обрабатывать клик на кнопку и отслеживать количество полей на странице. Информация о каждом новом поле будет добавляться в массив ‘dynamic[]‘.

После того, как пользователь будет отправлять форму на обработку, значения массива будут вноситься в базу данных посредством PHP. Это вы можете реализовать сами.

$(document).ready(function(){
 
    var i = $('input').size() + 1;
 
    $('#add').click(function() {
        $('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });
 
    $('#remove').click(function() {
    if(i > 1) {
        $('.field:last').remove();
        i--;
    }
    });
 
    $('#reset').click(function() {
    while(i > 2) {
        $('.field:last').remove();
        i--;
    }
    });
 
    // here's our click function for when the forms submitted
 
    $('.submit').click(function(){
 
    var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });
 
    if(answers.length == 0) {
        answers = "none";
    }  
 
    alert(answers);
 
    return false;
 
    });
 
});

Добавлено: 08 Мая 2018 17:06:57 Добавил: Андрей Ковальчук Нравится 0

Добавить