/DeleteFields

## DeleteFields
<html><head><title></title></head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var items=0;

function AddField(){

var d_name=$("#d_name").val();
var d_number=$("#d_number").val();
var field=$("#field").val();
var area=$("#area").val();
  var div=document.getElementById("populate");
  var results=document.getElementById("results");
  items++;
  $('#entries').attr('value',items);
  newentry="<div id='x"+items+"'>";
  newentry+="<input type='hidden' name='d_name"+items+"' value='"+d_name+"' />";
  newentry+="<input type='hidden' name='d_number"+items+"' value='"+d_number+"' />";
  newentry+="<input type='hidden' name='"+field+items+"' value='"+field+"' />";
  newentry+="<input type='hidden' name='"+area+items+"' value='"+area+"' />";
  newentry+=""+d_name+" "+d_number+" "+field+" "+area+"";
  newentry+="&nbsp;<a href=\"#\" onClick=\"\">(edit)</a>&nbsp;&nbsp;";
  newentry+="<a href=\"#\" onClick=\"javascript:DeleteField("+items+");\">(delete)</a>";
  newentry+="</div>";
  newnode=document.createElement("span");
  newnode.innerHTML=newentry;
  div.insertBefore(newnode,results);
}
</script>

<script>

function DeleteField(id){
var itemr=$('#entries').val();

if(id<itemr){
	for(i=id;i<itemr;i++){
		var x=i+1;
		$("#d_name"+x).attr('name','d_name'+i);
		$('#d_number'+x).attr('name','d_number'+i);
		$('#field'+x).attr('name','field'+i);
		$('#area'+x).attr('name',"area"+i);
	}
	$('#x'+id).remove();

	$('#entries').attr('value',itemr-1);

} else {
	$('#x'+id).remove();
	$('#entries').attr('value',itemr-1);
}
}


</script>

<div id="container">


<form action="" method="GET" name="register" />

<strong>Display Information</strong> <i> (This is what your customers see)</i><br /><br />

Display Name			Display Number			Category					Area<br />
<input type="text" id="d_name" name="d_name" /><input type="text" id="d_number"  name="d_number" />
<select id="field" name="field" >
	<option value="-1">Select Trade</option>
	<option value="accountants">Accountants</option>
	<option value="air conditioners">Air Conditioners</option>
	<option value="mechanics">Mechanics</option>
</select>

<select id="area" name="area"><option value="-1">Select area</option>
	<option value="P">P</option>
	<option value="B">B</option>
	<option value="K">K</option>
</select>

<input type="button" name="add" id="add" value="Add area" onClick="AddField();" />
<input type="submit" name="submit" value="submit">

<div id="populate" >
<input type="hidden" name="entries" id="entries" value="" />
<div id="results" >
</div>
</div>
</form>


</html>
	<html><head><title></title></head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	var items=0;

	function AddField(){

	var d_name=$("#d_name").val();
	var d_number=$("#d_number").val();
	var field=$("#field").val();
	var area=$("#area").val();
	var div=document.getElementById("populate");
	var results=document.getElementById("results");
	items++;
	$('#entries').attr('value',items);
	newentry="<div id='x"+items+"'>";
	newentry+="<input type='hidden' name='d_name"+items+"' value='"+d_name+"' />";
	newentry+="<input type='hidden' name='d_number"+items+"' value='"+d_number+"' />";
	newentry+="<input type='hidden' name='"+field+items+"' value='"+field+"' />";
	newentry+="<input type='hidden' name='"+area+items+"' value='"+area+"' />";
	newentry+=""+d_name+" "+d_number+" "+field+" "+area+"";
	newentry+=" <a href=\"#\" onClick=\"\">(edit)</a>  ";
	newentry+="<a href=\"#\" onClick=\"javascript:DeleteField("+items+");\">(delete)</a>";
	newentry+="</div>";
	newnode=document.createElement("span");
	newnode.innerHTML=newentry;
	div.insertBefore(newnode,results);
	}
	</script>

	<script>

	function DeleteField(id){
	var itemr=$('#entries').val();

	if(id<itemr){
	for(i=id;i<itemr;i++){
	var x=i+1;
	$("#d_name"+x).attr('name','d_name'+i);
	$('#d_number'+x).attr('name','d_number'+i);
	$('#field'+x).attr('name','field'+i);
	$('#area'+x).attr('name',"area"+i);
	}
	$('#x'+id).remove();

	$('#entries').attr('value',itemr-1);

	} else {
	$('#x'+id).remove();
	$('#entries').attr('value',itemr-1);
	}
	}


	</script>

	<div id="container">



	<form action="" method="GET" name="register" />

	<strong>Display Information</strong> <i> (This is what your customers see)</i><br /><br />

	Display Name Display Number Category Area<br />
	<input type="text" id="d_name" name="d_name" /><input type="text" id="d_number" name="d_number" />
	<select id="field" name="field" >
	<option value="-1">Select Trade</option>
	<option value="accountants">Accountants</option>
	<option value="air conditioners">Air Conditioners</option>
	<option value="mechanics">Mechanics</option>
	</select>

	<select id="area" name="area"><option value="-1">Select area</option>
	<option value="P">P</option>
	<option value="B">B</option>
	<option value="K">K</option>
	</select>

	<input type="button" name="add" id="add" value="Add area" onClick="AddField();" />
	<input type="submit" name="submit" value="submit">

	<div id="populate" >
	<input type="hidden" name="entries" id="entries" value="" />
	<div id="results" >
	</div>
	</div>
	</form>


	</html>