Passing javascript variable to hidden field

JavaScript
1

Hello,

2 days of research and trying not working out… maybe come one can help…
working on a jquery calender script and passing the results to a hidden file but its not working ou…

2 input fields.
date input fields, works
hidden1 input field not working… not passing the variable.



<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery UI Datepicker </title>
		<script type="text/javascript" src="jquery.js"> </script>
		<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"> </script>
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery-ui.css" />
		
		<script type="text/javascript">		
		   $(document).ready(function(){
             $("#date").datepicker({
                showButtonPanel: true,
                minDate: '0M',
                maxDate: '+90D',
                dateFormat: "d-MM-yy",
                }).onBlur(function(){
                var dateString = $( "#date" ).datepicker( "getDate" );
                var timestamp = Date.parse(dateString).getTime()/1000;
                $('#hidden1').val( timestamp );
              });
       });
		</script>
	</head>
	<body>
	<div>
		<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" >
			<p> Enter expire date: <br />
			<input type="text" name="date" id="date"/></p>	
			<input type="hidden" name="hidden1" id="hidden1" value=""  />				
			<button type="submit" name="btn_test" >Test Button</button>
		</form>
	</div>
	</body>
</html>
2

  1. There is no jquery function named onBlur(). And the recommended way to set event handlers is with the on() method.

  2. Date.parse() returns an integer; integers do not have a getTime() method.

  3. The datepicker still doesn’t work correctly if I pick the earliest date: The method


$( "#date" ).datepicker( "getDate" )

returns null.

  1. Your writing ability is atrocious. I suggest you quit all programming until you can write a grammatically correct sentence.
3

The problem is more serious than that. The onblur event fires as soon as you click on a date in the datepicker–which apparently occurs before datepicker(“getDate”) can retrieve the selected date, and therefore it returns null.

4

You can use the onSelect option of the datepicker to get around the problems with the onblur event.

5

Ok…

It took me awhile, almost a week to find the answers to the script I was working on so having said that ill post what I have in the event someone else is searching for same script.

I had 3 objectives:

  1. display a readable date format, example, 22-june-2013. For the visiting user.
  2. convert the date to a timestamp format. For db use.
  3. save to db.

The challenge was with the second objective. All thou, for the most part the script works but for some reason the time seems to be stuck at 04:00:00. If anyone can point out why the difference in time, it would be greatly appreciated.

Example output at 11:21pm
2013-06-29 04:00:00 - date is correct. Time out of focus.

<?php
include(‘connectionv2.php’);

if(isset($_POST[‘btn_test’]))
{ $ts = $_POST[‘hidden1’];
$date = new DateTime(“@$ts”);
//echo $saveDate = $date->format(‘U = Y-m-d H:i:s’);
echo $saveDate = $date->format(‘Y-m-d H:i:s’);
echo ‘<br />’;

$db = Connection::getConnection();
try
{ $STH = $db->prepare(“INSERT INTO tbl_servicerequest (projectexpire ) VALUES (:expirydate )”);
$STH->bindParam(‘:expirydate’, $saveDate);
//$STH->execute();
}
catch(PDOException $e) { echo 'ERROR: ’ . $e->getMessage(); }
}
?>

<html>
<head>
<meta charset=“utf-8” />
<title>jQuery UI Datepicker </title>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript” src=“jquery-ui-1.10.3/ui/jquery-ui.js”> </script>
<link rel=“stylesheet” type=“text/css” href=“jquery-ui-1.10.3/themes/base/jquery-ui.css” />

	&lt;script type="text/javascript"&gt;
	   $(document).ready(function(){	
			$("#date").datepicker({
				showButtonPanel: true,
				minDate: '0M',
				maxDate: '+90D',	
				dateFormat: "d-MM-yy",
				onSelect : function(dateText, inst)
				{	var timeStamp = $.datepicker.formatDate('@', $(this).datepicker('getDate')) / 1000;
					$('#hidden1').val(timeStamp);
				}
		   });	
	   });	  			
	&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt; 
	&lt;form action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?&gt;" method="POST" &gt;
		&lt;p&gt; Enter expire date: &lt;br /&gt;
		&lt;input type="text" name="date" id="date"/&gt;&lt;/p&gt;	
		&lt;input type="hidden" name="hidden1" id="hidden1" value=""  /&gt;			
		&lt;button type="submit" name="btn_test" &gt;Test Button&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;

</html>