Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Not sure what to call this one, but I am working on a form that asks for product information (name, description, color, features, etc.) but what I'd like to do is give users the option to add additional products by clicking on a link. They could add as many products as they need. After they finish entering information they could click a link that states "Add another product" or something similar and the form would give them a whole set of new fields that they could fill out. Through the same form, the page would grow as the items are added and it would be part of the same form (instead of having to submit the form over and over again on a per-product basis).

I hope I'm making sense, does anyone know what the term is for this or have any recommendations on a plugin that could do something like this? Magic fields can do this but on the back-end not the front-end.

enter image description here

share|improve this question
    
You can achieve this by coding in javascript, just make sure every new form field should have unique id or class and name to access its values. –  Vinod Dalvi Mar 17 '13 at 4:29
1  
This is clearly off topic. And there're many reasons to close it: It asks for a plugin recommendation (see faq), doesn't show any effort, etc. –  kaiser Mar 17 '13 at 17:08

1 Answer 1

Instead of looking for a plugin I found a piece of code that solves my problem, unfortunately because I am not using a plugin this post doesn't relate to WordPress and is off-topic. For those of you who are curious the code I am using is at: http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');

            if (newNum == 5)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length;

            $('#input' + num).remove();
            $('#btnAdd').attr('disabled','');

            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });
    </script>
</head>

    <body>
        <form id="myForm">
            <div id="input1" class="clonedInput">
                Name: <input type="text" name="name1" id="name1" />
            </div>

            <div>
                <input type="button" id="btnAdd" value="add another name" />
                <input type="button" id="btnDel" value="remove name" />
            </div>
        </form>
    </body>
</html>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.