1 Replies - 410 Views - Last Post: 22 April 2013 - 07:41 AM Rate Topic: -----

#1 jrooneo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 04-February 10

Populate html elements with PHP cookie values on load

Posted 21 April 2013 - 08:45 PM

I am trying to setup a website for a homework assignment. The speficic task I am trying to accomplish is once the forms on the site are partially filled you may hit save and it will run this PHP code to create cookies.
	
	if(isset($_POST["save"])){
		$expire = time() + (86400 * 7);
		echo $_SESSION["date"];
		if(isset($_POST["date"])) setcookie("date", $_POST["date"], $expire);
		if(isset($_POST["time"])) setcookie("time", $_POST["time"], $expire);
		if(isset($_POST["hours"])) setcookie("hours", $_POST["hours"], $expire);
		if(isset($_POST["activity"])) setcookie("active", $_POST["activity"], $expire);
		if(isset($_POST["happy"])) setcookie("happy", $_POST["happy"], $expire);
		setcookie("gender", $_POST["sex"], $expire);
	}


I can pull values from these cookies in PHP but I am unsure how to utilize them from within either JS or html. So far I have
<input type="text" id="date" name="date" onblur="checkDate(this.value)" value="<?php echo $_COOKIE['date'] ?>" >

or

document.getElementById("date") = "<?php echo $_COOKIE['date'] ?>";



But it simply assigns the string "<?php echo $_COOKIE['date'] ?>" to the value instead of executing code. I have attached my full coding at the bottom of this post.

Also, what is the best way to do an If-or variable assignment like if(isset($_COOKIE[i])) value = $_COOKIE[i] else value=""

HTML
<!DOCTYPE html>

<html>
<script src="233432.js"></script>
<body>

<h1>child care co-op reservation</h1>

<p>When: (mm/dd/yyyy or mm.dd.yyyy or mm-dd-yyyy or mmddyyyy)</p></br>
<form name="info" action="PHP FILE" method="POST">
Date: <input type="text" id="date" name="date" onblur="checkDate(this.value)" value="<?php echo $_COOKIE['date'] ?>" >
Time: <input type="text" id="time" name="time" onblur="checkTime(this.value)"><br></br>
How Long?: <input type="text" name="hours" onblur="checkDuration(this.value)"> 
hours @ $10 per hour $ <input type="text" id="total" disabled></br></br>
my child is: <input type="radio" name="sex" id="rb1" value="female" checked>Female 
<input type="radio" name="sex" value="male">Male</br>

<HR>

Select Exactly Two activities:</br></br>
<input type="checkbox" name="activity[]" value="soccer" id="cb1" onclick="checkboxes(this)"> soccer <input type="checkbox" name="activity[]" value="swimming" id="cb2" onclick="checkboxes(this)"> swimming 
<input type="checkbox" name="activity[]" value="gym" id="cb3" onclick="checkboxes(this)"> gym </br></br>
How good was your child's last visit?</br>
(Scale of 1 to 10, 0 = No previous visit)</br></br>
Satisfaction: <input type="textbox" id="happy" value="" name="happy" onblur="satisfaction(this.value)"></br>
<HR>
<input type="submit" name="submit" value="Make Reservation"> <input type="submit" name="save" value="Save Partial Reservation"><input type="button" name="clear" value="Clear Form" onclick = "reset()">
</form>

</body>
</html> 



Javascript
function checkDate(date){
	var regexPatt = /^((0?[1-9])|1[012])[\.\/-]?[0123][0-9][\.\/-]?20[1-9][0-9]$/;


	if(!(date.match(regexPatt))){
		alert("Date must be in mm/dd/yyyy, mm.dd.yyyy, mm-dd-yyyy or mmddyyyy form");
		document.getElementById("date").value="";
		document.getElementById("date").focus();
	}
	else{
		var monthPatt = /^((0?[1-9])|1[012])/;
		var dayPatt= /^((0?[1-9])|1[012])[\.\/-]?[0123][0-9]/;
		var yearPatt= /^((0?[1-9])|1[012])[\.\/-]?[0123][0-9][\.\/-]?20[1-9][0-9]$/;
		var subbedMonth= monthPatt.exec(date);
		var subbedDay = String(dayPatt.exec(date)).substr(-2);
		var subbedYear = String(date).substr(-4);
		var today = new Date();
		if(subbedYear < today.getFullYear()){
			alert("Please choose a date beyond today.");
			document.getElementById("date").value="";
			document.getElementById("date").focus();
		}
		if(subbedYear == today.getFullYear()){
			if(subbedMonth < today.getMonth()+1){
				alert("Please choose a date past today");
				document.getElementById("date").value="";
				document.getElementById("date").focus();
			}
			if(subbedMonth == today.getMonth()+1 && subbedDay <= today.getDate()){
				alert("Please choose a date past today");
				document.getElementById("date").value="";
				document.getElementById("date").focus();
			}
		}
				
	}
}
function checkTime(time){
	if(!(time.match(/^((0?[1-9])|1[012]):(/>/>/>[0-5][0-9][apAP][mM]?)$/))){
		alert("Time must be in 12 hour format[HH:MM(a-p)]");
		document.getElementById("time").value="";
		document.getElementById("time").focus();
	}

}
function checkDuration(dur){
	if(parseInt(dur) > 12 || parseInt(dur) <= 0){
		alert("Please enter a duration in whole hourse greater then 0 and less than 12");
		document.getElementById("hours").value="";
		document.getElementById("hours").focus();
	}
	else{
		var total = dur*10;
		document.getElementById("total").value = total;
	}
}

function satisfaction(happy){
	if(parseInt(happy) < 0 || parseInt(happy) > 10){
		alert("Please chose a satisfaction level between 1-10");
			document.getElementById("happy").value="";
			document.getElementById("happy").focus();
	}
}

function checkboxes(cb){
	var check =0;
	var activity= document.getElementsByName('activity[]');
	
	for (i=0; i<activity.length; i++){
		if (activity[i].checked)
			check++;
		if (check > 2){
			alert("Only select two activities");			
			document.getElementById(cb.id).checked = false;
		}
	}
	
}

function reset(){
	document.getElementById("date").value="";
	document.getElementbyId("time").value="";
	document.getElementbyId("hours").value="";
	document.getElementbyId("total").value="";
	document.getElementbyId("rb1").checked=true;
	document.getElementbyId("happy").value="";
	var activity= document.getElementsByName('activity[]');
	for (i=0; i<ctivity.length; i++){
		activity[i].checked=false;
	}
	document.getElementById("date").focus();
}



PHP
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
	if(isset($_POST["save"])){
		$expire = time() + (86400 * 7);
		echo $_SESSION["date"];
		if(isset($_POST["date"])) setcookie("date", $_POST["date"], $expire);
		if(isset($_POST["time"])) setcookie("time", $_POST["time"], $expire);
		if(isset($_POST["hours"])) setcookie("hours", $_POST["hours"], $expire);
		if(isset($_POST["activity"])) setcookie("active", $_POST["activity"], $expire);
		if(isset($_POST["happy"])) setcookie("happy", $_POST["happy"], $expire);
		setcookie("gender", $_POST["sex"], $expire);
	}
	elseif (!(isset($_POST["date"]) && isset($_POST["time"]) && isset($_POST["hours"]) &&
			isset($_POST["happy"]) && isset($_POST["activity"]))){{

		$fileName = "reservations.txt";
		$reservationFile = fopen($fileName, "a+");
		$pattern = "/swimming|gym|soccer/";
		$activity = preg_grep($pattern, $_POST["activity"], $activity);
		$data = 
			"Date: {$_POST["date"]}   Time: {$_POST["time"]}\n".
			"Duration: {$_POST["hours"]}   Gender: {$_POST["sex"]}\n".
			"Activities: {$activity[0]} {$activity[1]}\n".    
			"Satisfaction: {$_POST["happy"]}\n\n";
		if(fwrite($reservationFile, $data) == strlen($data)) 
			echo "Your reservation has been successfully submitted.";
		}	
	}
}



?>


This post has been edited by jrooneo: 21 April 2013 - 08:52 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Populate html elements with PHP cookie values on load

#2 Duckington  Icon User is offline

  • D.I.C Addict

Reputation: 170
  • View blog
  • Posts: 608
  • Joined: 12-October 09

Re: Populate html elements with PHP cookie values on load

Posted 22 April 2013 - 07:41 AM

If your first file is a .html file then you can't have PHP in it unless you specifcy that in a .htaccess file. it will just interpret it as text.

So you can either change the extnesion to .php, or create a .htaccess file in the directory that holds these files and add the following to it:

AddType application/x-httpd-php .html


The first one would be the better choice in this case.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1