calculate and display difference between 2 dates before submitting form - javascript

I would like to find find a way to calculate the difference between 2 dates, and display the result before I submit the form. This will be similar to the check in - check out drop downs in the yellow/ orange box in http://www.booking.com/ where on selecting the dates the number of nights is immediately displayed.
HTML version of code as displayed in JS Fiddle: http://jsfiddle.net/chri_chri/xy2gpa02/2/
Code used to generate the drop down date selectors
<?php
// displays days with leading 0s
$options = array();
for ($i=1; $i<32; $i++) {
$theday = date('d', mktime(0,0,0,0,$i,2000));
$sel = ($i == date('d') ? 'selected="selected"' : '');
$options[] = "<option value= \"{$theday}\" {$sel}>{$theday}
</option>";
}
$options_list = join("\r\n", $options);
echo "<div class='select' id='date'><select class=\"short-input\" name=\"day_from\">{$options_list}</select></div>";
?>
<?php
$options = array();
for ($i = 1; $i<13; $i++) {
$themonth = date('F', mktime(0,0,0,$i,2, 2000));
$month = date('m', mktime(0,0,0,$i,2,2000));
$sel =($i == date('n') ? ' selected="selected"' : '');
$options[] = "<option value=\"{$month}\" {$sel}>{$themonth}
</option>";
}
$options_list = join("\r\n", $options);
echo "<div class='select' id='month'><select class=\"short-input\" name=\"month_from\" size=\"1\">{$options_list}</select></div>";
?>
<?php
/* build selection list for the year */
$today = time(); // stores today's date
$startYr = date("Y", $today); // get the year from $today
echo "<div class='select' id='year'>
<select class='short-input' name='year_from'>\n";
for ($year=$startYr;$year<=$startYr+10;$year++)
{
echo " <option value= $year";
if ($startYr == $year)
{
echo "";
}
echo " > $year</option>\n";
}
echo "</select>\n</div>\n";
?>

you have two options, use java-script or submit form to php file and process the form.
jsfiddle working example http://jsfiddle.net/mdamia/3b5fyzjL/32/
// the script
function stayCost() {
var dayFrom = $('.day-from').val();
var monthFrom = $('.month-from').val();
var yearFrom = $('.year-from').val();
var dateFrom = Date.parse(monthFrom + ' ' + dayFrom + ' ' + yearFrom);
var dayTo = $('.day-to').val();
var monthTo = $('.month-to').val();
var yearTo = $('.year-to').val();
var dateTo = Date.parse(monthTo + ' ' + dayTo + ' ' + yearTo);
var dateDifference = dateTo - dateFrom;
var diffInDays = Math.ceil(dateDifference / (1000 * 3600 * 24));
$('.days').text(diffInDays);
$('.cost').text(diffInDays * 40);
}
stayCost();
$('.day-to').change(function () {
stayCost();
});

Related

cannot get id of li on click event

I have this code to show tabs.
$start = strtotime($_GET['date']);
$dates = array();
for ($i = 0; $i <= 7; $i++) {
$date = date('Y-m-d', strtotime("+$i day", $start));
$date1 = $date;
$day = date('D', strtotime($date1));
$date = explode('-', $date);
$dateinput = date('Y-m-d', strtotime("+$i day", $start));
$date = $date[2];
echo '<li class="lia" id="'.$dateinput.'"><input type="hidden" class="getdate" value="'.$dateinput.'">' . $date . ' ' . $day . '</li>';
}
I have a date-picker and i want to get the id of li by on change function of datepicker. I am using this code at moment.
$("#calendar-<?php echo $post->ID?>").on("change",function(){
var date = $(this).val();
console.log(date);
var libtn= $("li.lia").find("li").attr("id");
console.log(libtn);
alert(libtn);
});
It is showing undefined in alert box. Where i am doing wrong?
Replace
var libtn= $("li.lia").find("li").attr("id");
With
var libtn = $("li.lia").attr("id");
And check.
You can not find element itself inside same element.
EDIT
I am expecting you will have lia class everywhere means on every li.
Then,
Here is the code,
$("li.lia").each(function(i,j){
console.log($(this).attr("id")); // use as per your requirement
});

Display a php cookie in html

I have set a cookie using php.
Here's my code:
<?php
include_once 'php/config.php';
session_start(); //starting the session for user profile page
if(!empty($_POST['username'])) //checking the 'user' name which is from Sign-In.html, is it empty or have some text
{
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$query = mysql_query("SELECT * FROM users where username = '$username' AND password = '$password'") or die(mysql_error());
$row = mysql_num_rows($query) or die(mysql_error());
if($row==1)
{
$_SESSION['username'] = $username;
setcookie('username', $username, time() + (86400 * 30), "/"); // 86400 = 1 day
echo $_SESSION['username'];
echo "SUCCESSFULLY LOGGEDIN...";
echo "<script>setTimeout(function(){window.location.href='index.html'},2000);</script>";
}
else
{
echo "SORRY... YOU ENTERD WRONG ID AND PASSWORD... PLEASE RETRY...";
echo "<script>setTimeout(function(){window.location.href='index.html'},2000);</script>";
}
}
?>
I want display the 'username' cookie in html like Hi ""
.
Please Help.
Tried this javascript:
<script type="text/javascript">
function getCookie(name)
{
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
</script>
Use echo $_COOKIE['username']; instead of echo $_SESSION['username'];. It will echo out of the second reload of the page. (Why?)
<span id="myId"><span>
<script>
document.getElementById('myId').innerHTML=listCookies()
function listCookies() {
var theCookies = document.cookie.split(';');
var aString = '';
for (var i = 1 ; i <= theCookies.length; i++) {
aString += i + ' ' + theCookies[i-1] + "\n";
}
return aString;
}
</script>

Getting NAN on safari when using a javascript date

I am working on something, in which I am required to subtract 2 dates from one another, the difference would then be multiplied by the price per night of the event.
The issue I am having is that, while this works perfectly when using Chrome or Firefox, I am getting "NAN if I am using safari.
Date to and from are obtained using the php code below:
<?php
// displays days with leading 0s
$options = array();
for ($i=1; $i<32; $i++) {
$theday = date('d', mktime(0,0,0,0,$i,2000));
$sel = ($i == date('d') ? 'selected="selected"' : '');
$options[] = "<option value= \"{$theday}\" {$sel}>{$theday}
</option>";
}
$options_list = join("\r\n", $options);
echo "<div class='select' id='date'><select class=\"short-input day-to\" name=\"day_to\">{$options_list}</select></div>";
?>
<?php
$options = array();
for ($i = 1; $i<13; $i++) {
$themonth = date('F', mktime(0,0,0,$i,2, 2000));
$month = date('m', mktime(0,0,0,$i,2,2000));
$sel =($i == date('n') ? ' selected="selected"' : '');
$options[] = "<option value=\"{$month}\" {$sel}>{$themonth}
</option>";
}
$options_list = join("\r\n", $options);
echo "<div class='select' id='month'><select class=\"short-input month-to\" name=\"month_to\" size=\"1\">{$options_list}</select></div>";
?>
<?php
/* build selection list for the year */
$today = time(); // stores today's date
$startYr = date("Y", $today); // get the year from $today
echo "<div class='select' id='year'>
<select class=\"short-input year-to\" name='year_to'>\n";
for ($year=$startYr;$year<=$startYr+10;$year++)
{
echo " <option value= $year";
if ($startYr == $year)
{
echo "";
}
echo " > $year</option>\n";
}
echo "</select>\n</div>\n";
?>
http://jsfiddle.net/ju097j4z/#
Are there any solutions to this.
instead of Date.parse(monthFrom + ' ' + dayFrom + ' ' + yearFrom); in your fiddle use new Date(yearFrom, monthFrom, dayFrom); *note that in js month starts with 0

javascript array returns [object Window] instead of array content

I have a problem. I wrote some PHP code that echoes "var pixelArray = [];". after that it echoes a few variables like this: "var canvas$id = 'can' + $id;". and also echoes "pixelArray.push(canvas$id);" for each variable.
Now for some reason when i run the script, the array doesn't contain anything.
Can anyone explain to me why?
If you need more information, please tell me.
EDIT:
Here's my full (but still simplyfied) code:
<?php
$blockCounter = 1;
$scriptCounter = 1;
$arrayCounter = 1;
$size = 32 * 32;
$yLine = 1;
while ($blockCounter <= $size)
{
if ($blockCounter == 32 * $yLine){
echo "<canvas id=\"can$blockCounter\" width=\"17\" height=\"17\" style='border:1px solid #777777;'>GET A NEW BROWSER</canvas>";
echo "<br>";
$blockCounter = $blockCounter + 1;
$yLine = $yLine + 1;
}
else{
echo "<canvas id=\"can$blockCounter\" width=\"17\" height=\"17\" style='border:1px solid #777777;'>GET A NEW BROWSER</canvas>";
$blockCounter = $blockCounter + 1;
}
}
echo "<script>";
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "</script>";
?>
<p id="arrayLoc"></p>
document.getElementById("arrayLoc") is returning null, not the pixelArray[0]. The problem is that the paragraph tag has not been loaded into the DOM at the time of the javascript load. You can put it above the script shown below.
echo '<p id="arrayLoc"></p>';
echo "<script>"
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "</script>";
?>
Or run the javascript after the DOM has loaded.
echo "<script>";
echo "window.onload = function () {";
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "}";
echo "</script>";
?>
<p id="arrayLoc"></p>

Send and set 3 selected values from Dropdown menu to JavaScript function PHP

I have three drop down menus:
<?php
if(isset($som)) {
=======first drop down=======
echo "<select id="."som-patch1"." class="."form-control".">";
echo "<option value="."select".">Please Select SOM patch...</option>";
for ($i=0; $i < count($som) ; $i++) {
echo '<option value="'.$som[$i]['som'].'">'.$som[$i]['som'].' </option>';
}
echo "</select>";
=======second drop down=======
echo "<select id="."som-patch1-month"." class="."form-control".">";
echo "<option value="."select".">Please Select Month ...</option>";
for ($i=0; $i < 12 ; $i++) {
$month = date('F', strtotime('-'.$i.' month', strtotime(date('Y-m-01'))));
echo '<option value="'.$month.'">'.$month.'</option>';
}
echo "</select>";
=======third drop down=======
echo "<select id="."som-patch1-year"." class="."form-control".">";
echo "<option value="."select".">Please Select Year ...</option>";
for ($i=0; $i < 12 ; $i++) {
$year = date('Y', strtotime('-'.$i.' year', strtotime(date('Y-m-01'))));
echo '<option value="'.$year.'">'.$year.'</option>';
}
echo "</select>";
}
?>
I can successfully send the selected values to the following JavaScript function:
$('[id^=som-patch1]').on('change', function() {
alert( this.value );
});
The problem I have is:
I am unable to set the relevant values in the variables so that I could call the add_som_donut_chart_org_data() method.
Also I need to make sure all THREE values have been selected before the function call.
I have tried the following:
$('[id^=som-patch1]').on('change', function() {
var som = null;
var month = null;
var year = null;
if (id=='som-patch1'){
som = this.value;
}
alert( som );
});
But this doesn't set the som value.
The desired outcome should be:
if (som !== null && month !== null && year !== null) {add_som_donut_chart_org_data(som,month,year)}
Thanks in advance.
UPDATE: The following code resolved the issue
$('[id^=som-patch1]').on('change', function() {
var id = $(this).attr("id");
if (id == 'som-patch1') {
som = this.value;
}
if (id == 'som-patch1-month') {
month = this.value;
}
if (id == 'som-patch1-year') {
year = this.value;
}
if (som !== null && month !== null && year !== null) {
add_som_donut_chart_org_data(som,month,year);
}
});
As per your current code condition if (id=='som-patch1') would never be true, because id is not defined yet. Hence it will not set som variable. The reason is very basic that you have not defined id variable in your code. Before your condition use following code:
var id = $(this).attr("id");

Categories