Add Form Fields Positioning...

Question

bkimbriel 0 Newbie Poster

13 Years Ago

Hi,

I'm currently working on a website for my dad that has dynamic fields (hit a button and an html template gets displayed). You can see the template in use here...

http://hbndev.com/ipad/index.php?option=com_content&view=article&id=5&Itemid=6

As you can see it works, perfectly. EXCEPT for when you add a field it drops to below the form. I want it to drop right below the first field.

IE. If you hit the plus button on monday, another monday pops below the first monday field.

Here is the javascript:

<script type="text/javascript">
var ct = 1;
function monday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('mondayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function tuesday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('tuesdayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function wednesday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('wednesdayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function thursday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('thursdayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function friday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('fridayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function saturday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('saturdayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function sunday_field()
{
	ct++;
	var div1 = document.createElement('div');
	div1.id = ct;
	// link to delete extended form elements
	var delLink = '';
	div1.innerHTML = document.getElementById('sundayfield').innerHTML + delLink;
	document.getElementById('newlink').appendChild(div1);
}
function delIt(eleId)
{
	d = document;
	var ele = d.getElementById(eleId);
	var parentEle = d.getElementById('newlink');
	parentEle.removeChild(ele);
}
</script>

Here is the HTML:

<form action="timecards.php" method="post" name="timecard">
<div id="newlink">
<div class="form">

Employee: 
<br> 
<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=''">
<br><br> 

<!-- Monday Fields -->
Week Ending Sunday: 
<br> 
<input name="weekending" value="Month / Day / Year" onfocus="this.value=''" type="number">
<br><br> 

Monday: 
<select class="mondayjobnumber" name="mondayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="mondaycostcode" name="mondaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?>
</select>

<select class="mondayphase" name="mondayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="mondayhours" name="mondayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:monday_field()" mce_href="javascript:monday_field()">+</a> 

<br><br>

<!-- Tuesday Fields -->
Tuesday: 
<select class="tuesdayjobnumber" name="tuesdayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="tuesdaycostcode" name="tuesdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?>
</select>

<select class="tuesdayphase" name="tuesdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="tuesdayhours" name="tuesdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:tuesday_field()" mce_href="javascript:tuesday_field()">+</a> 

<br><br>

<!-- Wednesday Fields -->
Wednesday: 
<select class="wednesdayjobnumber" name="wednesdayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="wednesdaycostcode" name="wednesdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?> 
</select>

<select class="wednesdayphase" name="wednesdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="wednesdayhours" name="wednesdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:wednesday_field()" mce_href="javascript:wednesday_field()">+</a> 

<br><br>

<!-- Thursday Fields -->
Thursday: 
<select class="thursdayjobnumber" name="thursdayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="thursdaycostcode" name="thursdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?>
</select>

<select class="thursdayphase" name="thursdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="thursdayhours" name="thursdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:thursday_field()" mce_href="javascript:thursday_field()">+</a> 

<br><br>

<!-- Friday Fields -->
Friday: 
<select class="fridayjobnumber" name="fridayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="fridaycostcode" name="fridaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?>
</select>

<select class="fridayphase" name="fridayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="fridayhours" name="fridayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:friday_field()" mce_href="javascript:friday_field()">+</a> 

<br><br>

<!-- Saturday Fields -->
Saturday: 
<select class="saturdayjobnumber" name="saturdayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="saturdaycostcode" name="saturdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?>
</select>

<select class="saturdayphase" name="saturdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="saturdayhours" name="saturdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:saturday_field()" mce_href="javascript:saturday_field()">+</a> 

<br><br>

<!-- Sunday Fields -->
Sunday: 
<select class="sundayjobnumber" name="sundayjobnumber[]" size="1">
	<option selected="selected">Job #</option> 
	<?php include 'timecardfiles/timecardjobs.html'; ?>
</select>

<select class="sundaycostcode" name="sundaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardfiles/timecardcostcodes.html'; ?> 
</select>

<select class="sundayphase" name="sundayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardfiles/timecardphases.html'; ?>
</select>

<select class="sundayhours" name="sundayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardfiles/timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:tuesday_field()" mce_href="javascript:tuesday_field()">+</a> 

<br><br>

<?php include 'timecardfiles/timecardtemplates.html'; ?>

</div>
</div>

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

</form>

And here is the HTML for the form templates...

<!-- Monday Template -->
<div id="mondayfield" style="display: none;" mce_style="display:none">
Monday: 
<select class="mondayjobnumber" name="mondayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="mondaycostcode" name="mondaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="mondayphase" name="mondayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="mondayhours" name="mondayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:monday_field()" mce_href="javascript:monday_field()">+</a> 

<br><br>
</div>

<!-- Tuesday Template -->
<div id="tuesdayfield" style="display: none;" mce_style="display:none">
Tuesday: 
<select class="tuesdayjobnumber" name="tuesdayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="tuesdaycostcode" name="tuesdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="tuesdayphase" name="tuesdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="tuesdayhours" name="tuesdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:tuesday_field()" mce_href="javascript:tuesday_field()">+</a> 

<br><br>
</div>

<!-- Wednesday Template -->
<div id="wednesdayfield" style="display: none;" mce_style="display:none">
Wednesday: 
<select class="wednesdayjobnumber" name="wednesdayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="wednesdaycostcode" name="wednesdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="wednesdayphase" name="wednesdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="wednesdayhours" name="wednesdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:wednesday_field()" mce_href="javascript:wednesday_field()">+</a> 

<br><br>
</div>

<!-- Thursday Template -->
<div id="thursdayfield" style="display: none;" mce_style="display:none">
Thursday: 
<select class="thursdayjobnumber" name="thursdayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="thursdaycostcode" name="thursdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="thursdayphase" name="thursdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="thursdayhours" name="thursdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:thursday_field()" mce_href="javascript:thursday_field()">+</a> 

<br><br>
</div>

<!-- Friday Template -->
<div id="fridayfield" style="display: none;" mce_style="display:none">
<div class="form">
Friday: 
<select class="fridayjobnumber" name="fridayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="fridaycostcode" name="fridaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="fridayphase" name="fridayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="fridayhours" name="fridayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:friday_field()" mce_href="javascript:friday_field()">+</a> 

<br><br>
</div>

<!-- Saturday Template -->
<div id="saturdayfield" style="display: none;" mce_style="display:none">
Saturday: 
<select class="saturdayjobnumber" name="saturdayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="saturdaycostcode" name="saturdaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="saturdayphase" name="saturdayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="saturdayhours" name="saturdayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:saturday_field()" mce_href="javascript:saturday_field()">+</a> 

<br><br>
</div>

<!-- Sunday Template -->
<div id="sundayfield" style="display: none;" mce_style="display:none">
Sunday: 
<select class="sundayjobnumber" name="sundayjobnumber[]" size="1">
	<option selected="selected">Job #</option>
	<?php include 'timecardjobs.html'; ?>
</select>

<select class="sundaycostcode" name="sundaycostcode[]" size="1">
	<option selected="selected">Cost Code #</option> 
	<?php include 'timecardcostcodes.html'; ?>
</select>

<select class="sundayphase" name="sundayphase[]" size="1">
	<option selected="selected">Phase #</option>
	<?php include 'timecardphases.html'; ?>
</select>

<select class="sundayhours" name="sundayhours[]" size="1">
	<option selected="selected">Hours</option> 
	<?php include 'timecardhours.html'; ?>
</select>

<a class="addjob" href="javascript:sunday_field()" mce_href="javascript:sunday_field()">+</a> 

<br><br>
</div>

The includes are just options for the drop downs for easy editing so don't worry about that.

Thanks for any help :).

javascript

2 Contributors
4 Replies
209 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 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 · Answer 2 · 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 · Answer 3 · 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