TalkPHP - Javascript/Prototype Situation

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Javascript/Prototype Situation (http://www.talkphp.com/javascript-ajax-e4x/1678-javascript-prototype-situation.html)

Javascript/Prototype Situation

Hey,

I've made a form, theirs a link that when clicked on, it adds another input box below the other.

javascript Code:

function addChoice() {
    new Insertion.After('choice', '<span style="display: block; padding-bottom: 5px"><label for="poll_choice">Option</label><input name="poll_choice[]" type="text" size="25" /></span>');
  }

I want it so that after ten inputs have been added, you can't add any more. Anyone any ideas on how this could be achieved?

Add a counter?

So each time they click the link, the counter increments.

As bdm said.

javascript Code:

var iCount = 0; // Set to 1 if there is already a span by default.

function addChoice()
{
    if(iCount >= 10)
    {
        return;
    }

    new Insertion.After('choice', '<span style="display: block; padding-bottom: 5px"><label for="poll_choice">Option</label><input name="poll_choice[]" type="text" size="25" /></span>');
    iCount++;
}

I was going to code it out but I was in the middle of playing CoD4. :-)

I guess also if you want an alternative. You could find everything with the name of 'poll_choice', and count how many their are. Although the first method is much simpler.

I wrote a slightly fuller example, more to keep me occupied than anything else, which might be of use. Instead of hard-coding the HTML to be repeated, I told prototype to use what's already in the HTML -- that might be super useful, or superfluous, for you.

The essential function makes use of some of Prototypes great features:

JavaScript Code:

function addChoice()
{
    var choice = $('choice');
    
    // Prevent more than x copies
    if (choice.select('input[name="poll_choice[]"]').size() >= 10)
    {
        return;
    }
    
    // Make a copy of the pre-existing HTML that we want to repeat
    var clone = choice.select('span').first().cloneNode(true);
    
    // Clear any text boxes
    clone.select('input[type=text]').invoke('clear');
    
    // Insert the copy into the page
    choice.insert({'bottom': clone});
}

A full test page

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Cloning elements with Prototype</title>

        <script type="text/javascript" src="prototype.js"></script>

        <script type="text/javascript">

                function addChoice()

                {

                        var choice = $('choice');

                        

                        // Prevent more than x copies

                        if (choice.select('input[name="poll_choice[]"]').size() >= 10)

                        {

                                return;

                        }

                        

                        // Make a copy of the pre-existing HTML that we want to repeat

                        var clone = choice.select('span').first().cloneNode(true);

                        

                        // Clear any text boxes

                        clone.select('input[type=text]').invoke('clear');

                        

                        // Insert the copy into the page

                        choice.insert({'bottom': clone});

                }

        </script>

</head>

<body>

        <p id="choice">

                <span style="display: block; padding-bottom: 5px">

                        <label for="poll_choice">Option</label>

                        <input name="poll_choice[]" type="text" size="25" />

                </span>

        </p>

        <p>

                <button onclick="addChoice()">Add Choice</button>

        </p>

</body>

</html>

If you really want to keep the HTML hard-coded then a viable option would be:

JavaScript Code:

function addChoice()
{
    var choice = $('choice');
    
    if (choice.select('input[name="poll_choice[]"]').size() >= 10)
    {
        return;
    }
    
    choice.insert('<span style="display: block; padding-bottom: 5px"><label for="poll_choice">Option</label><input name="poll_choice[]" type="text" size="25" /></span>');
}

Ah, so I guess my suggested alternative wasn't such a bad idea.

And good call on the clone method. ;-)

Thanks to all who responded :) and thanks for the help, I appreciate it a lot! :D