Javascript/Prototype Situation

CMellor · 12-09-2007, 01:13 AM

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?

bdm · 12-09-2007, 01:18 AM

Add a counter?

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

Wildhoney · 12-09-2007, 01:55 AM

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++;
}

bdm · 12-09-2007, 02:01 AM

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.

Salathe · 12-09-2007, 03:04 AM

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>');
}

bdm · 12-09-2007, 03:34 AM

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

And good call on the clone method.

CMellor · 12-09-2007, 05:41 PM

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