I'm using modified code originally supplied by Google to make a transit trip planner form that uses Google Maps. I'd like the results to open in a new window/tab so the user doesn't have to leave the site (I realize this is a somewhat controversial usability issue, but this is at my client's behest, so...).
The code below uses target="_blank" in the tag - which seemed like the simplest solution - but that doesn't work in this instance - not sure why, but thought it may have something to do with the dynamically-built URL.
I tried several methods gleaned from previous similar questions on this site, the method below being one of them, as well as something along the lines of
myForm.setAttribute("target", "_blank");
but so far nothing has been successful.
Here's the code I'm using. Any suggestions would be greatly appreciated.
<script language="JavaScript" type="text/javascript">
// Edit the strings below this line
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
// End edit block
// Get and parse the user's current date/time
var date = new Date();
var isPM = false;
var currentTime = date.getHours();
var currentDate = "";
var amOption = '<option value="am">AM';
var pmOption = '<option value="pm">PM';
if(currentTime > 11)
isPM = true;
currentTime %= 12;
if(currentTime == 0)
currentTime = 12;
currentTime += ':';
if(date.getMinutes() < 10)
currentTime += '0';
currentTime += date.getMinutes();
if(isPM)
pmOption = '<option selected="true" value="pm">PM';
else
amOption = '<option selected="true" value="am">AM';
if(date.getMonth() < 9)
currentDate = '0';
currentDate += (date.getMonth() + 1) + '/';
if(date.getDate() < 10)
currentDate += '0';
currentDate += date.getDate() + '/' + date.getFullYear();
// Builds the destination URL
function buildURL() {
var loc = 'http://www.google.com/maps?ie=UTF8&f=d&';
for (var i = 0; (i < document.myForm.length - 1); i++) {
if(document.myForm[i].name == 'ampm')
continue;
if(document.myForm[i].name == 'time')
loc += document.myForm[i].name + '=' + document.myForm[i].value + document.myForm.ampm.value + '&';
else {
if(document.myForm[i].name == 'saddr')
loc += document.myForm[i].name + '=' + document.myForm[i].value + '+near+' + zip + '&';
else
loc += document.myForm[i].name + '=' + document.myForm[i].value + '&';
}
}
loc+='dirflg=r';
location.href=loc;
return true;
}
</script>
<form name="myForm" id="myForm" action="#" target="_blank">
<p>Powered by Google Maps</p>
<label for="saddr"><strong>Start</strong> e.g.
<script language="JavaScript" type="text/javascript">
document.write(startExample)
</script>
</label>
<input type="text" name="saddr" maxlength="2048" title="Enter the Origin Address" class="startend" />
<label for="daddr"><strong>End</strong> e.g.
<script language="JavaScript" type="text/javascript">document.write(endExample)</script></label>
<input type="text" name="daddr" maxlength="2048" title="Enter the Destination Address" class="startend" />
<div class="gadgetform-row">
<script language="JavaScript" type="text/javascript">
document.write('<div class="datewrapper">');
document.write('<label for="date"><strong>Date</strong></label><br />');
document.write('<input class="date" type="text" id="fdate" name="date" value="' + currentDate + '" maxlength="10" title="Enter the Date in MM/DD/YY format">');
document.write('</div>');
document.write('<div class="timewrapper">');
document.write('<label for="time"><strong>Time</strong></label><br />');
document.write('<input class="time" type="text" id="ftime" name="time" value="' + currentTime + '" maxlength="8" title="Enter the Time in HH:MM AM or PM format">');
document.write('</div>');
document.write('<div class="ampmwrapper">');
document.write(' <br />');
document.write('<select name="ampm" class="ampm">' + amOption + pmOption + '</select>');
document.write('</div>');
document.write('<div class="clear"></div>');
</script>
</div>
<div class="planby">
<label for="ttype"><strong>Plan by:</strong> </label
><select name="ttype">
<option value="dep">Departure Time </option>
<option value="arr">Arrival Time</option>
</select>
</div>
<a class="button" href="javascript:void();" onclick='return buildURL();'><span class="plan">Plan My Trip</span></a>
</form>
You can try using window.open instead. Here's a function that I created for opening child windows:
openChildWindowWithDimensions = function(url, width, height, showMenu, canResize, showScrollbars) {
var childWindow = window.open(url, "", "\"width=" + width + ",height=" + height + ",menubar=" + (showMenu ? "1" : "0") + ",scrollbars=" + (showScrollbars ? "1" : "0") + ",resizable=" + (canResize ? "1" : "0") + "\"");
if (childWindow){
childWindow.resizeTo(width, height); //IE9 dimensions bug
}
}
Add this function to your page, and at the end of your function that builds the URL, call it like this:
openChildWindowWithDimensions(loc, 800, 600, true, true, true);
Related
When I enter multiple notes on button click Jquery date and time auto fill up in the textbox. Like this,
But when I click After two-minute date and time not change its display same as first selected.
Below the Code :
Jquery Date and Time Code:
var nowDate = new Date();
var mm = nowDate.getMonth() + 1; mm = (mm < 10) ? '0' + mm : mm;
var dd = nowDate.getDate(); dd = (dd < 10) ? '0' + dd : dd;
var new_today = mm + '/' + dd + '/' + nowDate.getFullYear();
var mi = nowDate.getMinutes(); mi = (mi < 10) ? '0' + mi : mi;
var time = nowDate.getHours() + ":" + mi;
Dynamic HTML Code
function addCallImage() {
html = '<tr id="call-row' + call_row + '" style="background-color: cadetblue;">';
html += ' <td class="text-left col-md-6"><textarea rows="4" cols="50" name="case_intake_call_record[' + call_row + '][caller_name]" placeholder="Enter Call Record" class="form-control" value="" id="input-call' + call_row + '" ></textarea></td>';
html += ' <td class="text-right col-md-3"><div class="input-group" data-date-format="mm/dd/yyyy" data-date-end-date="0d"><input type="text" name="case_intake_call_record[' + call_row + '][caller_date]" placeholder="MM/DD/YYYY" class="form-control" value="'+new_today+'"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div></td>';
html += ' <td class="text-right col-md-3"><div class="input-icon"><i class="fa fa-clock-o"></i><input type="text" class="form-control" name="case_intake_call_record[' + call_row + '][caller_time]" value="'+time+'"></div></td>';
html += '</tr>';
$('#calls tbody').append(html);
call_row++;
clicks += 1;
document.getElementById("autoCall").innerHTML = clicks;
$("#autoCallhidden").val(clicks);
}
View File Code
<tr>
<td class="text-left" colspan="4"><button type="button" onclick="addCallImage();" data-toggle="tooltip" title="" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button>Click to Add Call Record</td>
</tr>
Each time the button click action occurs, you will want to make the function calls to nowDate. Try declaring the vars locally within the addCallImage() function so that they are reset every time the click occurs.
Use new Date inside your function.So when function called then new Date and time generated.
This answer from Mobile so answer maybe not in welll format. :)
var nowDate = new Date(); var mm = nowDate.getMonth() + 1; mm = (mm <
10) ? '0' + mm : mm; var dd = nowDate.getDate(); dd = (dd < 10) ? '0'
+ dd : dd; var new_today = mm + '/' + dd + '/' + nowDate.getFullYear(); var mi = nowDate.getMinutes(); mi = (mi < 10) ?
'0' + mi : mi; var time = nowDate.getHours() + ":" + mi;
<script>
$(document).ready(function(){
$('li').on('click',function(e){
$('li span').remove();
var date = new Date();
var date = date.toDateString();
console.log(date);
$(this).append( ' <span> ' + date + '</span>');
});
});
</script>
<body>
<div>
<h1>List</h1>
<h2>Buy Fruits</h2>
<ul>
<li id="one"><em>fresh</em> Apple</li>
<li id="two">Lemon</li>
<li id="three">Orange</li>
<li id="four">Grapes</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
</body>
Similarly you can use date.toTimeString() to get the time from Unix Timestamp.
To view this code in codepen visit:
https://codepen.io/saurav0083/pen/ZEbewVj
In a google-apps-script, I have an html form with two date inputs. I want to set the default values to be the prior week of the current day.
I cannot get the following scripts to work. Can anyone point out what I am doing wrong?
I am getting a "Object does not allow properties to be added or changed" error.
Code.gs:
function pickDates() {
var d = new Date();
var e = new Date();
d.setDate((d.getDate() - d.getDay() % 7) - 7);
e.setDate(e.getDate() - (e.getDay() + 1) % 7);
d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
e = e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate();
var htmlB = HtmlService.createHtmlOutputFromFile('Pick Dates').setWidth(200).setHeight(200);
htmlB.d = d;
htmlB.e = e;
SpreadsheetApp.getUi().showModalDialog(htmlB, 'Select Dates');
}
Pick Dates.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
Start Date<br>
<input id="start" type="date" name="startDay">
<br><br> End Date<br>
<input id="end" type="date" name="endDay">
<br><br>
<input type="button" value="Submit" onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.sendEmails(this.parentNode)" />
</form>
<script>
document.getElementById('start').value = d;
document.getElementById('end').value = e;
</script>
</body>
</html>
To evaluate() the dates in the template, you will need to use createTemplateFromFile(). The error is because the HtmlOutput object returned from createHtmlOutputFromFile() can not have properties added like htmlB.d = d;. You can use a html template with scriptlets instead
function pickDates() {
var d = new Date();
var e = new Date();
d.setDate((d.getDate() - d.getDay() % 7) - 7);
e.setDate(e.getDate() - (e.getDay() + 1) % 7);
d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
e = e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate();
// create a template
var htmlB = HtmlService.createTemplateFromFile('Pick Dates');
htmlB.d = d;
htmlB.e = e;
// evaluate() returns HtmlOuput object
var modal_html = htmlB.evaluate().setWidth(200).setHeight(200);
SpreadsheetApp.getUi().showModalDialog(modal_html, 'Select Dates');
}
Pick Dates.html - add the printing scriptlets
...
<script>
document.getElementById('start').value = <?= d ?>;
document.getElementById('end').value = <?= e ?>;
</script>
</body>
My code should work but i guess i made i mistake somewhere, i'm trying to change the sound of an alarm, it's actually working but :
If i'm trying to change the sound of the alarm x and an alarm x+1 has already been add, the sound of x won't change anymore.
It means my code only change the value of the last alarm but i don't know why.
Here is my HTML and my JS, i hope you'll have an answer.`
(function(){
setInterval(function(){
var temps = new Date();
var h = temps.getHours();
var m = temps.getMinutes();
var s = temps.getSeconds();
if(h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
document.getElementById("heure").textContent = h + ":" + m + ":" + s;
},1000);
var i = 1;
document.getElementById("plus").addEventListener('click', function() {
//Ajout
var cp = document.getElementById("ligne").cloneNode(true);
var div = document.createElement("div");
div.setAttribute("id", "num" + i);
var liste = document.getElementById("liste");
liste.appendChild(div);
liste.appendChild(cp);
document.querySelector("#liste #num" + i + " + #ligne").hidden = false;
//Suppression
var l_sup = document.querySelector("#liste #num" + i + " + #ligne");
var l2_sup = document.querySelector("#num" + i);
document.querySelector("#num" + i + " + #ligne #del").addEventListener('click', function() {
l_sup.parentNode.removeChild(l_sup);
l2_sup.parentNode.removeChild(l2_sup);
});
audio = document.querySelector("#num" + i + " + #ligne #audio");
select = document.querySelector("#num" + i + " + #ligne #son");
document.querySelector("#num" + i + " + #ligne #son").addEventListener("click", function(){
value = select.value;
audio.setAttribute("src", value);
});
i++;
});
})();
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
</head>
<body>
<p>Il est : <span id = "heure"></span></p>
<div id = "liste">
<div hidden id="ligne">
<input checked type="checkbox" id="cb"/>
<input type="number" placeholder="Heures" name="h" id="h"/>
<input type="number" placeholder="Minutes" name="m" id="m"/>
<input type="text" name="desc" placeholder="Nom de l'alarme" id="desc"/>
<select id="son"/>
<option value="Trance.mp3" id="son1">Trance</option>
<option value="Classic.mp3" id="son2">Classic</option>
<option value="Dubstep.mp3" id="son3">Dubstep</option>
</select>
<audio controls loop id="audio" src = "Trance.mp3"></audio>
<button id="del">Supprimer</button>
</div>
</div>
<div>
<button id="plus">Ajouter</button>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
`
The major problem is in this piece of code inside click listener of <select>.
value = select.value;
audio.setAttribute("src", value);
As select and audio variable will always have the value of last added element. So it will always make changes to last <audio> element. So we need to get the select and audio from the this object inside the <select> click listener. this.nextElementSibling will give us the <audio> placed next to <select> on which the click event is fired :
value = this.value; // for getting value of current select element
this.nextElementSibling.setAttribute("src", value); // for getting audio element next to current select element
Sample Working Code:
(function(){
setInterval(function(){
var temps = new Date();
var h = temps.getHours();
var m = temps.getMinutes();
var s = temps.getSeconds();
if(h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
document.getElementById("heure").textContent = h + ":" + m + ":" + s;
},1000);
var i = 1;
document.getElementById("plus").addEventListener('click', function() {
//Ajout
var cp = document.getElementById("num0").cloneNode(true);
cp.setAttribute("id", "num" + i);
var liste = document.getElementById("liste");
liste.appendChild(cp);
document.querySelector("#liste #num" + i).hidden = false;
//Suppression
var l_sup = document.querySelector("#liste #num" + i);
var l2_sup = document.querySelector("#num" + i);
document.querySelector("#num" + i + " button").addEventListener('click', function() {
l_sup.parentNode.removeChild(l_sup);
l2_sup.parentNode.removeChild(l2_sup);
});
audio = document.querySelector("#num" + i + " audio");
select = document.querySelector("#num" + i + " select");
document.querySelector("#num" + i + " select").addEventListener("click", function(){
value = this.value;
this.nextElementSibling.setAttribute("src", value);
});
i++;
});
})();
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
</head>
<body>
<p>Il est : <span id = "heure"></span></p>
<div id = "liste">
<div hidden id="num0">
<input checked type="checkbox" id="cb"/>
<input type="number" placeholder="Heures" name="h" id="h"/>
<input type="number" placeholder="Minutes" name="m" id="m"/>
<input type="text" name="desc" placeholder="Nom de l'alarme" id="desc"/>
<select/>
<option value="Trance.mp3">Trance</option>
<option value="Classic.mp3">Classic</option>
<option value="Dubstep.mp3">Dubstep</option>
</select>
<audio controls loop src = "Trance.mp3"></audio>
<button>Supprimer</button>
</div>
</div>
<div>
<button id="plus">Ajouter</button>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
P.S.: As Brahma Dev commented, id should always be unique
Instead of using click event to update audio src. Use change event. Then audio should change fluently.
document.querySelector("#num" + i + " + #ligne #son").addEventListener("change", function(){
value = select.value;
audio.setAttribute("src", value);
});
Here is a working JSbin https://jsbin.com/ficodot/edit?html,js,output
I want to have options of this year and next year, but I can't figure out how to integrate the JavaScript variable into the value = "" and the text inside the option tags. This code demonstrates what I mean (obviously it is not valid, but shows what I mean). so today the first option would be 2013 and the next, 2014. Thanks.
var date = new Date(),
y = date.getFullYear();
<html>
<select id = "year">
<option value = "y" >y</option>
<option value = "(y + 1)">(y + 1)</option>
</select>
</html>
With jQuery:
var sel = $("#year"),
date = new Date(),
y = date.getFullYear(),
newOptions = "";
newOptions += "<option value='" + y + "'>" + y + "</option>";
newOptions += "<option value='" + (y + 1) + "'>" + (y + 1) + "</option>";
sel.append(newOptions);
DEMO: http://jsfiddle.net/YxqcT/
Since you mentioned that you're using jQuery, you can use this:
var currentYear = (new Date).getFullYear();
var opts;
$('#year').append(function () {
for (var i = currentYear; i <= currentYear + 1; i++) {
opts += "<option value='" + i + "'>" + i + "</option>";
}
return opts;
})
jsFiddle example
No need for jQuery. Simple HTML DOM can do the work for you.
Sample >> http://jsfiddle.net/47dDu/
<!DOCTYPE html>
<html>
<body>
<select id="MySelectBox">
<option value="1" id="this_year"></option>
<option value="2" id="next_year"></option>
</select>
<script type="text/javascript">
var d = new Date();
var x = document.getElementById("this_year");
x.innerHTML=d.getFullYear(); //get this year
var y = document.getElementById("next_year");
y.innerHTML=d.getFullYear()+1; //get next year
</script>
</body>
</html>
I have a html form like this :
<form action="https://www.123.com/cgi-bin/action" method="post">
<input type="hidden" name="item_name" value="Product Name">
<input type="hidden" name="item_number" value="Product Name_2010_12_21_15_03">
<input type="hidden" name="amount" value="29.99">
</form>
How to use javascript to replace the above "Product Name_2010_12_21_15_03" with dynamically generated time string ?
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write("Product Name+" + year + "_" + month + "_" + day)
//-->
</script>
You can just set the value of the input:
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
document.getElementById('product_date_time').value = new Date().toString();
</script>
The script does not have to immediately follow the input field, of course. It simply has to run at some point after the input element has been added to the DOM.
If you need more control over the format, you might want to look into the venerable Date.js library.
Based on your comment for the format "2010_12_21_15_03":
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
function myDate () {
var d = new Date();
return d.getFullYear() + "_" + (d.getMonth() + 1) + "_" + d.getDate() + "_" + d.getHours() + "_" + d.getMinutes();
}
document.getElementById('product_date_time').value = myDate();
</script>
Ok, I got it :
<form action="https://www.123.com/cgi-bin/action" method="post" name="My_Form">
<input type="hidden" name="item_name" value="Product_Name">
<input type="hidden" name="item_number" value="Product_Name">
<input type="hidden" name="amount" value="9.99">
<script type="text/javascript">
<!--
function getCorrectedYear(year)
{
year=year-0;
if (year<70) return (2000+year);
if (year<1900) return (1900+year);
return year;
}
var today=new Date();
var minute=today.getMinutes();
if(minute<10) minute='0'+minute;
var hour=today.getHours();
if(hour<10) hour='0'+hour;
var day=today.getDate();
if(day<10) day='0'+day;
var month=today.getMonth()+1;
if(month<10) month='0'+month;
var year=getCorrectedYear(today.getYear());
var dateString=year+'_'+month+'_'+day+'_'+hour+'_'+minute;
document.My_Form.item_number.value=document.My_Form.item_name.value+'_'+dateString;
//-->
</script>
</form>