Add Form Fields Positioning...

Airshow 416 WiFi Lounge Lizard Team Colleague · 2011-03-13T19:57:53+00:00

bkimbriel,

Why seven functions and seven templates? You could do everything you want with one function and one template, each flexible enough to handle any day.

You do need seven containers (divs), one per day, each identifyable by id, to which the newly created elements can be appended. Currently everything gets appended to "newlink" hence they all end up in the same (wrong) place.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · 2011-03-13T20:20:39+00:00

Also ...

... take the time to learn jQuery and you will find that the coding for this sort of application is MUCH simpler.

Airshow

bkimbriel 0 Newbie Poster · 2011-03-14T00:45:11+00:00

Hi, thanks for the reply.

I plan on learning JQuery but for right now I'm just trying to finish this site. The reason for the 7 templates is because I need it to say monday, tuesday, etc and don't know how to set it to do that with only one function. I'm horrible with javascript (as you can probably tell lol). Could you forward me to a place that has a similar script? Or possibly show me what I have to change to have this work correctly?

Thanks again.

Airshow 416 WiFi Lounge Lizard Team Colleague · 2011-03-14T06:59:08+00:00

Bkimbriel,

I should really try to talk you through the changes but it's much easier to gove you a whole working page.

This may not be exactly what you want in terms of layout but it should give you some strong clues :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.page_section {
}
.page_section h2 {
	margin: 6px 0;
	font-size: 12pt;
}
#jobTemplate {
	display: none;
}
#weekWrapper p.dayTitle {
	width: 90px;
	font-size: 12pt;
	margin: 6px 0 0 0;
}
#weekWrapper p.dayTitle span {
	font-weight: bold; 
}
#weekWrapper .addjob {
}
#weekWrapper a {
	color: #999;
	font-size: 10pt;
	text-decoration: none;
	font-weight: bold; 
}
#weekWrapper a:hover {
	color: #666;
}
#weekWrapper .jobs a:active {
	color: #F00;
}
#weekWrapper .jobs {
	margin: 5px 0;
	padding: 6px;
	border: 1px solid #999;
}
</style>

<script>
var ct = 0;
onload = function(){
	function add_job(day) {
		var container = document.getElementById(day + 'Jobs');
		var template = document.getElementById('jobTemplate');
		var d = template.cloneNode(true);
		d.id = '';//remove id to cause cloned div not to be hidden
		container.appendChild(d);
		var spans = d.getElementsByTagName('span');
		var selects = d.getElementsByTagName('select');
		for(var i=0; i<selects.length; i++) {//for each select menu, set its name
			selects[i].name = day + selects[i].name;
		}
		var links = d.getElementsByTagName('a');
		for(var i=0; i<links.length; i++) {
			switch(links[i].className) {
				case 'removejob':
					links[i].onclick = function() {
						if(confirm('Remove job?')) { container.removeChild(d); }
						return false;
					}
				break;
			}
		}
		ct++;
	}
	var weekWrapper = document.getElementById('weekWrapper');
	var links = weekWrapper.getElementsByTagName('a');
	for(var i=0; i<links.length; i++) {
		if(links[i].className == 'addjob') {
			links[i].onclick = function() {
				var day = this.parentNode.firstChild.innerHTML.toLowerCase();
				add_job(day);
				return false;
			};
		}
	}
};
</script>
</head>

<body>

<!-- Job Template -->
<div id="jobTemplate" class="job">
	<select class="jobnumber" name="jobnumber[]" size="1">
		<option selected="selected">Job #</option>
		<?php include 'timecardjobs.html'; ?>
	</select>
	<select class="costcode" name="costcode[]" size="1">
		<option selected="selected">Cost Code #</option>
		<?php include 'timecardcostcodes.html'; ?>
	</select>
	<select class="phase" name="phase[]" size="1">
		<option selected="selected">Phase #</option>
		<?php include 'timecardphases.html'; ?>
	</select>
	<select class="hours" name="hours[]" size="1">
		<option selected="selected">Hours</option>
		<?php include 'timecardhours.html'; ?>
	</select>
	<a class="removejob" href="#" title="Remove Job">[ Remove ]</a>
</div>


<form action="timecards.php" method="post" name="timecard">
	<div class="page_section">
		<h2>Employee:</h2>
		<select class="employee" name="employeetype" size="1" onChange="redirect(this.options.selectedIndex)">
			<option>Lath Employees</option>
			<option>Plaster Employees</option>
			<option>Scaffold Employees</option>
		</select>
		<select name="employee" size="1">
			<option>Employee #</option>
		</select>
		<?php include 'timecardfiles/timecardemployees.html'; ?>
		<input type="text" name="employeetype" value="Employee (If Missing)" onfocus="this.value=''">
	</div>

	<div class="page_section">
		<h2>Week Ending Sunday:</h2>
		<input name="weekending" value="Month / Day / Year" onfocus="this.value=''" type="number">
	</div>

	<div id="weekWrapper">
		<!-- Headings and containers for 7 days Monday to Sunday -->
		<p class="dayTitle"><span>Monday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="mondayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Tuesday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="tuesdayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Wednesday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="wednesdayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Thursday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="thursdayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Friday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="fridayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Saturday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="saturdayJobs" class="jobs"></div>
		<p class="dayTitle"><span>Sunday</span>&nbsp;<a class="addjob" href="#" title="Add Job">[ Add ]</a></p>
		<div id="sundayJobs" class="jobs"></div>
	</div>
	<?php include 'timecardfiles/timecardtemplates.html'; ?>

	<!-- Submit / Reset Form -->
	<input class="button" name="submit1" value="Email" type="submit">
	<input class="button" name="reset1" value="Reset" type="reset">
</form>

</body>
</html>

If you wish to use jQuery, then the javascript will reduce down to :

var ct = 0;
$(document).ready(function() {
	$("#jobTemplate").find(".removejob").click(function() {
		if(confirm('Remove job?')) { $(this).closest('div').remove(); }
		return false;
	});
	$("#weekWrapper a.addjob").click(function() {
		var day = $(this).closest('p').find('span').html().toLowerCase();
		var $container = $(this).closest('p').next('div.jobs');
		var $d = $('#jobTemplate').clone(true).attr('id','').appendTo($container);
		$d.find("select").each(function() { this.name = day + this.name; });
		ct++;
		return false;
	});
});

Airshow