2

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

Improve this question
2
  • 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
    Commented Mar 17, 2013 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
    Commented Mar 17, 2013 at 17:08

1 Answer 1

Reset to default
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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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