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>
Related
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">
How do I make it where the only allowed ages are between 15 and 80 at the time of filling the form.
You will need Javascript to achieve what you want:
HTML:
<html>
<head>
<script src="./<your-external-js-file>"></script>
</head>
<body>
<form>
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
<input type="submit" />
</form>
</body>
</html>
Add this to your external JS file:
window.onload = function() {
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
//Add a zero if one Digit (eg: 05,09)
if (dd < 10) {
dd = "0" + dd;
}
//Add a zero if one Digit (eg: 05,09)
if (mm < 10) {
mm = "0" + mm;
}
minYear = yyyy - 80; //Calculate Minimun Age (<80)
maxYear = yyyy - 18; //Calculate Maximum Age (>18)
var min = minYear + "-" + mm + "-" + dd;
var max = maxYear + "-" + mm + "-" + dd;
document.getElementById("start").setAttribute("min", min);
document.getElementById("start").setAttribute("max", max);
};
By doing this, whenever your document will get loaded, this function will be executed, which will calculate the minimum (age<80) and maximum dates (age>18) from the current date, according to the formula applied and set the 'min' and 'max' attributes to our input field.
$("#start").change(function(){
var userboddate = $(this).val();
var useryear= userboddate.split('-')[0] ;
var currentyear ='2021';
var diff=currentyear-useryear;
if(diff>=15 && diff<=80){
alert(`correct age ${diff}`);
}
else{
alert(`wrong age ${diff}`);
$("#start").val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="age">
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">
<input type="submit" value="submit">
</form>
<!- i hope this code help you ->
Am new to jQuery and JavaScript. So please help me solve my problem.
Am able to add days with two datepicker. But what i want is take days from 3 datepickers and display it on a 4th datepicker. I would like to know the solution for this!.
My code is :)
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>
<script>
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
});
function getdate() {
var tt = document.getElementById('txtDate').value;
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
var rr = document.getElementById('follow_Date').value;
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
ar dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
}
</script>
</form>
What am doing here is, I take the Date from the First Datepicker and when I click on the button Fill Follow Date, 30 will be added to the current day and displayed in the second Datepicker, this i am able to do it.
Now i want to take the second Datepicker day and add 3 to it and display it on the third Datepicker, when i click the button Fill Follow DateOne. Am not able to do the second part. Please help me with your logic.
Sorry, if my logic is completely wrong:>
In your code on both button click you are calling the same function,add two separate functions for these button clicks.It will work fine.
Try this code
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
$('input[id="follow_Date_btn"]').on('click',function(){
var tt = document.getElementById('txtDate').value;
if(!tt==""){
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
} else {
alert("enter date");
}
});
$('input[id="follow_Date_One_btn"]').on('click',function(){
var rr = document.getElementById('follow_Date').value;
if(!rr==""){
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
var dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
} else {
alert("enter date");
}
});
});
.Highlighted a {
background-color: Red !important;
background-image: none !important;
color: White !important;
}
.block{
width:calc(100%/4 - 10px);
float:left;
margin-right:10px;
}
.block>input {
float: left;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" id="follow_Date_btn" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" id="follow_Date_One_btn" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>
I am creating something that would generally enter the date and time in the textbox. How can I format the date and time that will only display MM/DD/YYYY ##:##:## inside the textbox. I would like it simple and can be run to IE of any version.
Here is my code:
<form>
<input name="StartDate" size="50">
<input onclick="this.form.StartDate.value = new Date();" type="button" value="Start date">
<input name="StopDate" size="50">
<input onclick="this.form.StopDate.value = new Date();" type="button" value="Stop date">
</form>
You can use getMonth, getYear methods etc. on a date object - this should be supported in older versions of IE.
var myDate = new Date();
this.form.StopDate.value = (myDate.getMonth() + 1) + "/" + myDate.getDate() + "/" + myDate.getFullYear()+ ' ' + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
See Docs
It may makes sense to define this as a function:
function getDateString(){
var myDate = new Date();
return (myDate.getMonth() + 1) +
"/" + myDate.getDate() +
"/" + myDate.getFullYear() +
' ' + myDate.getHours() +
":" + myDate.getMinutes() +
":" + myDate.getSeconds();
}
And then use in your button:
<input onclick="this.form.StartDate.value = getDateString();" type="button" value="Start date">
You may also need to handle adding leading 0's to your date, this snippet takes care of this:
function getDateString(){
var myDate = new Date();
return padDatePart(myDate.getMonth() + 1) +
"/" + padDatePart(myDate.getDate()) +
"/" + myDate.getFullYear()+
' ' + padDatePart(myDate.getHours()) +
":" + padDatePart(myDate.getMinutes()) +
":" + padDatePart(myDate.getSeconds());
}
function padDatePart(part){
return ('0'+part).slice(-2);
}
<form>
<input name="StartDate" size="50">
<input onclick="this.form.StartDate.value = getDateString();" type="button" value="Start date">
<input name="StopDate" size="50">
<input onclick="this.form.StopDate.value =getDateString();" type="button" value="Stop date">
</form>
I have a onload function:
function fnload(){
if(document.getElementById("a").value!=null){
document.getElementById("txtDepName").value=document.getElementById("a").value;
document.getElementById("txtempNum").value=document.getElementById("c").value;
document.getElementById("txtempNames").value=document.getElementById("b").value;
}
document.getElementById("leavename").value ="--Select--";
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth()+1;
var year = currentDate.getFullYear();
var appleddate=day + "/" + month + "/" + year ;
document.getElementById("txApplieddate").value =appleddate;
document.getElementById("noofdays").value =1;
}
in my body I am giving:
<input type="hidden" id="a" value="<%=session.getAttribute("Emp_Name")%>"/>
<input type="hidden" id="b" value="<%=session.getAttribute("Department")%>"/>
<input type="hidden" id="c" value="<%=session.getAttribute("Emp_no")%>"/>
but even if I am checking null every time its getting previous value.
Try this, hope it will work.
session.removeAttribute("paramName");
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);