Moving array elements in form

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
B3nny
Forum Newbie
Posts: 1
Joined: Mon Aug 02, 2010 7:57 am

Moving array elements in form

Post by B3nny »

I am having a following array:

Code: Select all

$MyArray = array(
'a'->array(18->array(name->'john',surname='smith'),35->(name->'melinda',surname='gates')...)),
'b'->...
'z'->...
Note: Yes, I need those keys to be [A-Z].

Then I use that data to fill out my form:

Code: Select all

<form action="doarray.php" method="post">
<table id="tabela">
	<tr>
		<th class="colhead">ID</th>
		<th class="colhead">Name</th>
		<th class="colhead">Surname</th>
		<th class="colhead"></th>
	</tr>

<?php
/**
 * Departments, of course, differ based on what I select from DB. But that's not important here.
**/
//$Departments = array('Sales','HR', ...);
$PrevCat = '';
foreach (range('a', 'z') as $C) {

	if ($C != $PrevCat) {?>

<tr>
	<td class="colhead" colspan="4">
		<span style="float:left"><?=$C?></span>
		<span style="float:right">
			<select name="anch[<?=$C?>]"><option value="">---</option>
			 <option value="Sales">Sales</option>
<option value="HR">HR</option>
			</select>
		</span>
	</td>
</tr>

<?
	$PrevCat = $C;
	}

	$ID=0;
	if (isset($Cats[$C])) { foreach($Cats[$C] as $CID => $Val) {
		?>
                         
<tr gid="<?=$C;?>" eid="<?=$ID?>">
	<td><input type="text" name="cats[<?=$C?>][<?=$ID?>][id]" value="<?=$ID?>" size="3"></td>
	<td><input type="text" name="cats[<?=$C?>][<?=$ID?>][name]" value="<?=$Val['name']?>" size="40"></td>
	<td><input type="text" name="cats[<?=$C?>][<?=$ID?>][surname]" value="<?=$Val['surname']?>" size="40"></td>
	<td class="actions"><button type="button" class="add">+^</button> <button type="button" class="rm">-</button></td>

</tr>

<?	$ID++;	
	}}?>	
	<tr gid="<?=$C;?>">
		<td></td>
		<td></td>
		<td></td>
		<td class="actions"><button type="button" class="add">+</button></td>
	</tr>	
<? }
?>	

	<tr>
		<td align="center" colspan="4"><button type="submit">Submit</button></td>
	</tr>
</table>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
	var eid = 255;
	function rmRow(ev) {
		var el = Event.element(ev);
		while(el.tagName.toLowerCase() != 'tr') el = el.parentNode;
		el.parentNode.removeChild(el);
	}
	                                                                   
	
	function addRow(ev) {
		var el = Event.element(ev);            
		while(el.tagName.toLowerCase() != 'tr') el = el.parentNode;		
		
		var _gid = el.getAttribute('gid');
		var tr = new Element('tr', {gid: _gid});
		eid++;
		
		
				
		var cols = ['<input  size="3" type="text" name="cats['+el.getAttribute('GID')+']['+eid+'][id]" value="'+eid+'"/>',
					'<input  size="40" type="text" name="cats['+el.getAttribute('GID')+']['+eid+'][name]" value=""/>',
					'<input  size="40" type="text" name="cats['+el.getAttribute('GID')+']['+eid+'][surname]" value=""/>'];
		for(i = 0; i < cols.length; i++) tr.appendChild(new Element('td').update(cols[i]));
		
		tr.appendChild(new Element('td', {'class': 'actions'}).update('<button type="button" class="add">+^</button> <button type="button" class="rm">-</button>'));
						
		Event.observe(tr.select('button.add').first(),'click',addRow);
		Event.observe(tr.select('button.rm').first(),'click',rmRow);      
		// window.console.log(tr.innerHTML);
		el.parentNode.insertBefore(tr, el);      
		// window.console.log(tr);		
	}   
	
	$('tabela').select('button.add').each(function(el) {
		Event.observe(el,'click',addRow);		
	})
	$('tabela').select('button.rm').each(function(el) {
		Event.observe(el,'click',rmRow);		
	})
// ]]>
</script>
</form>
Using the form I should be able to:
- select departement for each A-Z
(each array of A-Z has following elements: id, name, surname)
- being able to add/remove records
- while adding/removing a record it should have id +/- 1 of a record that user clicked next to

There's also js file added to the header:
http://prototypejs.org/assets/2009/8/31/prototype.js

I will greatly appreciate any help whatsoever.
Post Reply