Javascript file that powers the dom

admin_add.js

$(document).ready(function() {
	var $fs = $('#ServerAdminAddForm fieldset.global');
		
	var slotController = {
		slotCount: 0,
		addSelector: function() {
			var $template = '\
			<div class="input select">\
				<label for="ServerSlotCount">Number of Slot Types</label>\
				<select id="ServerSlotCount">\
					<option value="1" selected>1</option>\
					<option value="2">2</option>\
					<option value="3">3</option>\
					<option value="4">4</option>\
					<option value="5">5</option>\
				</select>\
			</div>\
			';
			$fs.append($template);
			
			slotController.bindAction();
		},
		bindAction: function() {
			$fs.find('#ServerSlotCount').change(function() {
				var val = $(this).val();
				if(val > slotController.slotCount) {
					while(slotController.slotCount < val) {
						slotController.addSlot(slotController.slotCount);
					}
				} else if(val < slotController.slotCount) {
					while(slotController.slotCount > val) {
						slotController.removeSlot(slotController.slotCount-1);
					}
				}
			});
		},
		removeSelector: function() {
			$fs.find('.input.select.slot').remove();
		},
		addSlot: function(index) {
			var $template = '\
			<fieldset>\
				<legend>Slot Type '+(index + 1)+'</legend>\
				<div class="input text">\
					<label for="SlotConfig'+index+'SlotSize">Slot Size (GB)</label>\
					<input type="text" maxlength="10" name="data[SlotConfig]['+index+'][slot_size]" id="SlotConfig'+index+'SlotSize" class="slot">\
				</div>\
				<div class="input text">\
					<label for="SlotConfig'+index+'MaxNum">Max Slots</label>\
					<input type="text" maxlength="10" name="data[SlotConfig]['+index+'][max_num]" id="SlotConfig'+index+'MaxNum" class="slot">\
				</div>\
			</fieldset>\
			';
			$fs.append($template);
			this.slotCount++;
		},
		removeSlot: function(index) {
			$fs.find('#ServerSlot-'+index).closest('fieldset').remove();
			this.slotCount--;
		},
		removeAllSlots: function() {
			$fs.find('.input.slot').closest('fieldset').remove();
			this.slotCount = 0;
		}
	}
	
	slotController.addSelector();
	slotController.addSlot(0);
});

admin_add.php

<?php echo $this->Html->script('servers/admin_add'); ?>
<div class="servers form">
<?php echo $this->Form->create('Server');?>
	<fieldset class="global">
 		<legend><?php __('Admin Add Server'); ?></legend>
	<?php
		echo $this->Form->input('hostname');
		echo $this->Form->input('main_ip', array('label' => 'Main IP'));
		echo $this->Form->input('renewal', array('label' => 'Renewal Date'));
	?>
	</fieldset>
<?php echo $this->Form->end(__('Submit', true));?>
</div>
<div class="actions">
	<h3><?php __('Actions'); ?></h3>
	<ul>

		<li><?php echo $this->Html->link(__('List Servers', true), array('action' => 'index'));?></li>
		<li><?php echo $this->Html->link(__('List Ips', true), array('controller' => 'ips', 'action' => 'index')); ?> </li>
		<li><?php echo $this->Html->link(__('New Ip', true), array('controller' => 'ips', 'action' => 'add')); ?> </li>
		<li><?php echo $this->Html->link(__('List Slots', true), array('controller' => 'slots', 'action' => 'index')); ?> </li>
		<li><?php echo $this->Html->link(__('New Slot', true), array('controller' => 'slots', 'action' => 'add')); ?> </li>
		<li><?php echo $this->Html->link(__('Wait Lists', true), array('controller' => 'wait_lists', 'action' => 'index')); ?> </li>
		<li><?php echo $this->Html->link(__('New Slot Request', true), array('controller' => 'wait_lists', 'action' => 'add')); ?> </li>
	</ul>
</div>