JQuery.AddToList

Basic Example

A basic demo of the AddToList Plugin

Code Used

Javascript & Styling

<script type="text/javascript" src="/js/jquery.1.2.6.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.addtolist.1.0.0.js"></script>
<script type="text/javascript">
<!--
$(function() {
	$('select.basic').addToList({
		form: '#sampleForm',
		dataHandler: function(data) {
			return {
				value: data.value,
				label: data.label
			};
		}
	});
});
-->
</script>
<style type="text/css">
select.basic {
width: 300px;
}
#sampleForm {
position: absolute;
background: #FFF;
border: 1px outset;
padding: 5px;
}
</style>

HTML Code

<div>
	<select class="basic">
		<option value=""></option>
		<option value="-1">New Item</option>
		<?php
		foreach($list as $item) {
			echo '<option value="'.$item->value.'">'.$item->label.'</option>';
		}
		?>
	</select>
</div>

<div id="sampleForm">
	<form method="get" action="process.php">
	<div>
	<input type="hidden" name="save_to" value="basic.data" />
	<table>
		<tr>
			<td>Value</td>
			<td><input type="text" name="value" /></td>
		</tr>
		<tr>
			<td>Label</td>
			<td><input type="text" name="label" /></td>
		</tr>
	</table>
	<input type="submit" value="Save!" />
	</div>
	</form>
</div>

Back to AddToList