Динамическое добавление элементов к форме при помощи jQuery

Однажды, возможно, вам понадобится функциональность, которая позволит вашим пользователям динамически добавлять поля в форму веб приложения. Благодаря нашему любимому 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;

    });

});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fAyWSVC3R_U/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Динамическое добавление элементов к форме при помощи jQuery | | 2012-06-19 12:08:51 | | Статьи Web-мастеру | | Однажды, возможно, вам понадобится функциональность, которая позволит вашим пользователям динамически добавлять поля в форму веб приложения. Благодаря нашему любимому jQuery эта задача выполняется в | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: