JezK

Edit File: page3.php

<?php
include("header.php");
$_SESSION['sliFormPage'] = 'page3.php';
if(!isset($_SESSION['userID']))
{
	echo "<script>location.replace('page1.php');</script>";
}
if(isset($_SESSION['saveSuccess']))
{
	echo "<script>alert('Data saved successfully.');</script>";
	unset($_SESSION['saveSuccess']);
}
if(isset($_SESSION['page3SaveFailed']))
{
	echo "<script>alert('Error!!! Unable to save user details. Internal server error.');</script>";
	unset($_SESSION['page3SaveFailed']);
}
if(isset($_SESSION['boardMeetingSaveFailed']))
{
	echo "<script>alert('Error!!! Unable to save board meeting details. Internal server error.');</script>";
	unset($_SESSION['boardMeetingSaveFailed']);
}
if(isset($_SESSION['boardMeetingUpdateFailed']))
{
	echo "<script>alert('Error!!! Unable to update board meeting details. Internal server error.');</script>";
	unset($_SESSION['boardMeetingUpdateFailed']);
}
if(isset($_SESSION['infrastructureSaveFailed']))
{
	echo "<script>alert('Error!!! Unable to save infrastructure details. Internal server error.');</script>";
	unset($_SESSION['infrastructureSaveFailed']);
}
if(isset($_SESSION['infrastructureUpdateFailed']))
{
	echo "<script>alert('Error!!! Unable to update infrastructure details. Internal server error.');</script>";
	unset($_SESSION['infrastructureUpdateFailed']);
}
if(isset($_SESSION['deleteSuccess']))
{
	echo "<script>alert('Data deleted succesfully.');</script>";
	unset($_SESSION['deleteSuccess']);
}
if(isset($_SESSION['deleteFailed']))
{
	echo "<script>alert('Error!!! Unable to delete registration details. Internal server error.');</script>";
	unset($_SESSION['deleteFailed']);
}
?>
	<div class="container main">
		<div class="row">
			<form action = "app/page3App.php" class="form-horizontal" method="post" onsubmit="return validatePage3()">
				<div class="col-md-12 col-md-offset-0 formContainer">
					<h3>Staffing Pattern <span class="star">*</span></h3>
					<div class="removePadding col-md-12">
						<h3 class="subHead">Please give details of organizational structure</h3>
						
					</div>

<div class="col-md-12">
							<input type="button" class="btn btn-default addBtn1 pull-right" value="Add New" >
						</div>
						<div class="col-md-12 removePadding">
							<div class="col-md-12 table-responsive removePadding">
								<table class="table table-bordered cs-table table-responsive">
									<thead>
										<tr>
										   <th>Year</th>
											<th>Office Staff (No.)</th>
											<th>Supervisory Staff (No.)</th>
											<th>Credit/loan officer</th>
											<th>Field Staff (No.)</th>
											<th>Total Staff (No.)</th>
											<th>Action</th>
											
										</tr>
									</thead>
									<tbody class="input_fields_wrap1 staffClass">
										<?php echo $boardMeeting2Details; ?>
									</tbody>
								</table>	
							</div>
						</div>
					
				  <div class="">
						<div class="col-md-12 removePadding">
							<h3 class="subHead col-md-11 removePadding">Details of Infrastructure available for the activity</h3>
							<input type="button" class="btn btn-default addBtn2 pull-right" value="Add New" >
							<div class="col-md-12 rowStyle">
								<label class="col-md-2">Type of infrastructure</label>
									<label class="col-md-2">Description</label>
								<label class="col-md-2">Approximate cost of Acquisition</label>
								<label class="col-md-2">Year of Acquisition</label>
							</div>
							<div class="addMoreFields2 addMoreFields">
								<?php echo $infrastructureDetails; ?>
							</div>
						</div>
					
					</div>
					<div class="text-center col-md-12">
						<a href="page2.php"><input type="button" value="Back" class="btn btn-cs"></a>
						<input type="submit" value="Next" class="btn btn-cs">
					</div>
					<div class="col-md-12 text-right">3 of 6</div>	
				</div>
			</form>
		</div>
	</div>

<?php include"footer.php"?>
     <script type="text/javascript">
           $(function(){
				$('.input-group.date').datepicker({
						calendarWeeks: true,
						todayHighlight: true,
						autoclose: true	
				}); 
			});
        </script>
<script type='text/javascript'>
	
	$(document).ready(function() {

//var max_fields      = ; //maximum input boxes allowed
    var wrapper1         = $(".input_fields_wrap1"); //Fields wrapper
    var add_button1      = $(".addBtn1"); //Add button ID
    
    var x = '<?php echo $boardMeeting2Count; ?>'; //initlal text box count
    $(add_button1).click(function(e)
    { 
		yearLength = document.getElementsByName('year[]').length;
		for(i=0;i<yearLength;i++)
		{
			year = document.getElementsByName('year[]');
			officeStaff = document.getElementsByName('officeStaff[]');
			supervisoryStaff = document.getElementsByName('supervisoryStaff[]');
			fieldStaff = document.getElementsByName('fieldStaff[]');
			totalStaff = document.getElementsByName('totalStaff[]');
			loanOfficerStaff = document.getElementsByName('loanOfficerStaff[]');
			if(year[i].value.trim() != "" && officeStaff[i].value.trim() != 0 && supervisoryStaff[i].value.trim() != 0  && fieldStaff[i].value.trim() != ""  && totalStaff[i].value.trim() != ""  && loanOfficerStaff[i].value.trim() != "")
			{
				flag = 1;
			}
			else
			{
				flag = 0;
				break;
			}
		}
		
		
		/*year = document.getElementById('year'+x);
		officeStaff = document.getElementById('officeStaff'+x);
		supervisoryStaff = document.getElementById('supervisoryStaff'+x);
		fieldStaff = document.getElementById('fieldStaff'+x);
		totalStaff = document.getElementById('totalStaff'+x);
		loanOfficerStaff = document.getElementById('loanOfficerStaff'+x);
		
		if(year.value.trim() != "" && officeStaff.value.trim() != "" && supervisoryStaff.value.trim() != "" && fieldStaff.value.trim() != "" && totalStaff.value.trim() != "")*/
		if(flag == 1)
		{
			//on add input button click
			e.preventDefault();
			//  if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper1).append('<tr>\
            <td><input type="hidden" name="boardMeeting2ID[]" id="boardMeeting2ID'+x+'" value=""><input type="text" name="year[]" id="year'+x+'" placeholder="Year" maxlength="4" onkeypress="return number(event)"></td>\
            <td><input type="text" name="officeStaff[]" id="officeStaff'+x+'" placeholder="Office Staff" class="staffCount"  onblur="TotalCount('+x+')" onkeypress="return number(event)" /></td>\
            <td><input type="text" name="supervisoryStaff[]" id="supervisoryStaff'+x+'" class="staffCount" placeholder="Supervisory Staff" onkeypress="return number(event)" onblur="TotalCount('+x+')"></td>\
            <td><input type="text" name="loanOfficerStaff[]" id="loanOfficerStaff'+x+'" class="staffCount" onblur="TotalCount('+x+')" placeholder="Credit/loan officer"></td>\
            <td><input type="text" name="fieldStaff[]" id="fieldStaff'+x+'" placeholder="Field Staff" onkeypress="return number(event)" class="staffCount" onblur="TotalCount('+x+')"></td>\
            <td><input type="text" name="totalStaff[]" id="totalStaff'+x+'" placeholder="Total Staff" onkeypress="return number(event)" readonly></td><td><a class="action2"><i class="fa fa-trash remove_field1" aria-hidden="true" ></i></a></td></tr>'); //add input box
		}
		else
		{
			alert("Please fill all fields first.");
		} 
    });
    
    $(wrapper1).on("click",".remove_field1", function(e){ //user click on remove text
        e.preventDefault(); $(this).closest('tr').remove(); x--;
    });
    
     //var max_fields      = ; //maximum input boxes allowed
    var wrapper2        = $(".addMoreFields2"); //Fields wrapper
    var add_button2      = $(".addBtn2"); //Add button ID
    
    var x1 = '<?php echo $infrastructureCount; ?>'; //initlal text box count
    $(add_button2).click(function(e)
    { 
		infrastructureTypeLength = document.getElementsByName('infrastructureType[]').length;
		for(i=0;i<infrastructureTypeLength;i++)
		{
			infrastructureType = document.getElementsByName('infrastructureType[]');
			description = document.getElementsByName('description[]');
			acquisitionCost = document.getElementsByName('acquisitionCost[]');
			acquisitionYear = document.getElementsByName('acquisitionYear[]');
		
			if(infrastructureType[i].value.trim() != "" && description[i].value.trim() != "" && acquisitionCost[i].value.trim() != "" && acquisitionYear[i].value.trim() != "")
			{
				flag = 1;
			}
			else
			{
				flag = 0;
				break;
			}
		}
		if(flag==1)
		{
			//on add input button click
			e.preventDefault();
			//  if(x < max_fields){ //max input box allowed
            x1++; //text box increment
            $(wrapper2).append('<div class="tr"> \
									<div class="col-md-12 textBlock" style="margin:10px 0px;">\
										<input type="hidden" name="infrastuctureID[]" value="">\
										<input  type="text" id="infrastructureType'+x1+'" value="" class="col-md-2"name="infrastructureType[]"> \
										<input  type="text" class="col-md-2" value="" name="description[]" id="description'+x1+'"> \
										<input  type="text"  class="col-md-2" value="" name="acquisitionCost[]"id="acquisitionCost'+x1+'"> \
										<input  type="text" class="col-md-2" value="" name="acquisitionYear[]" id="acquisitionYear'+x1+'" maxlength="4" onkeypress="return number(event)"> \
										<a class="action2"><i class="fa fa-trash remove_field2" aria-hidden="true" ></i></a> \
									</div> \
									</div>'); //add input box
		}
		else
		{
			alert("Please fill all fields first.");
		} 
    });
    
    $(wrapper2).on("click",".remove_field2", function(e){ //user click on remove text
        e.preventDefault(); $(this).closest('.tr').remove(); 
    });
    
});

function number(e)
{
	var key = e.keyCode || e.charCode;
	if(key == 13 || key == 43 || (key >= 48 && key <= 57) || key == 8 || key == 46)
	{
		return true;
	}
	else
	{
		return false;
	}
}