Develop Reference

HTML / Javascript display images from user input checkboxes

I am relatively familiar with HTML but am having a hard time with some of the Javascript side of things. Below is some code where the user inputs a year, month, day, and hour and an image is produced:
document.getElementById('btn').onclick = function() {
var yyyy = document.getElementById('YYYY').value
var mm = document.getElementById('MM').value
var dd = document.getElementById('DD').value
var hh = document.getElementById('HH').value
url_wpc_sfc = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/namussfc" + yyyy + mm + dd + hh + ".gif"
url_wpc_fronts = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/usfntsfc" + yyyy + mm + dd + hh + ".gif"
url_wpc_bw = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/print_us" + yyyy + mm + dd + hh + ".gif"
img = document.createElement('img')
img.src = url_wpc_sfc
document.body.appendChild(img)
img.src = url_wpc_fronts
document.body.appendChild(img)
img.src = url_wpc_bw
document.body.appendChild(img)
}
<form>
<input type="text" id="YYYY" value="Enter year (YYYY)"> <br>
<input type="text" id="MM" value="Enter month (MM)"> <br>
<input type="text" id="DD" value="Enter day (DD)"> <br>
<input type="text" id="HH" value="Enter hour (HH)"> <br>
<input type="button" id="btn" value="Get Data">
</form>
The problem I am having is two-fold:
How do I make it so all 3 images are appended to one another? When I run the above code, only the most recent image via the defined url is produced (url_wpc_bw).
The end goal is to have n number of checkboxes for the n number of possible url / image combinations. For this scenario, n = 3. For example, The user would be able to select a checkbox with 'wpc_sfc' and then the image based on their input will be produced. Furthermore, if they select a checkbox with 'wpc_sfc' as well as 'wpc_bw', two images would be produced based on their input for the year, month, day, and hour.

document.getElementById('btn').onclick = function() {
var yyyy = document.getElementById('YYYY').value
var mm = document.getElementById('MM').value
var dd = document.getElementById('DD').value
var hh = document.getElementById('HH').value
url_wpc_sfc = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/namussfc" + yyyy + mm + dd + hh + ".gif"
url_wpc_fronts = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/usfntsfc" + yyyy + mm + dd + hh + ".gif"
url_wpc_bw = "https://www.wpc.ncep.noaa.gov/archives/sfc/" + yyyy + "/print_us" + yyyy + mm + dd + hh + ".gif"
let img = document.getElementById('setimg');
let htm = '';
htm = `
<img src="url_wpc_sfc">
<img src="url_wpc_fronts">
<img src="url_wpc_bw">
`;
img.outerHTML = htm;
}
<form>
<input type="text" id="YYYY" value="Enter year (YYYY)"> <br>
<input type="text" id="MM" value="Enter month (MM)"> <br>
<input type="text" id="DD" value="Enter day (DD)"> <br>
<input type="text" id="HH" value="Enter hour (HH)"> <br>
<input type="button" id="btn" value="Get Data">
</form>
<div id="setimg"></div>
maybe like this?

How can I get future date month and year by inputting opening date and duration month using JavaScript

when I select date and input month duration then other field will display the target date
how can I implement this,Please anybody help me to do that.my form is that
// I have tried to do that
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + duration);
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
// i have do that but do not get my espect out put
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">

Please try this:
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + parseInt(duration));
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">

How to insert the value of javascript into html [duplicate]

This question already has answers here:
How to Add Two Days from Current Date to the Value of a Hidden Input
(3 answers)
How to insert Javascript variables into a database
(1 answer)
Closed 5 years ago.
I want to get the javascript value into my html input value and insert it into the database after the user click the submit
<script>
var currentDate = new Date();
if (currentDate.getDay() == 5) {
var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
} else {
var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
}
currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
var dd = currentDate.getDate();
var mm = currentDate.getMonth() + 1;
var y = currentDate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById("display").innerHTML = someFormattedDate;
</script>
<?php
echo $_GET['someFormattedDate'];
?>
<input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" value="<?php echo " someFormattedDate " style="border: 3px double #CCCCCC; " disabled/>

Since your input id is sd,
document.getElementById("sd").value = someFormattedDate;
Note: Elements with Disabled attribute are not submitted, enable it before submit.
Full Code:
<?php
echo $_GET['due_date'];
?>
<form name="myform" id="myform" method="GET">
<input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" style="border: 3px double #CCCCCC; " readonly/>
<input type="submit" name="btn_submit" value="Submit">
</form>
<script>
var currentDate = new Date();
if (currentDate.getDay() == 5) {
var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
} else {
var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
}
currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
var dd = currentDate.getDate();
var mm = currentDate.getMonth() + 1;
var y = currentDate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById("sd").value = someFormattedDate;
</script>

First, put the JavaScript code after the input you want to use. That way the input exists on the page when the code executes.
Second, use the actual id of the input.
Third, set the .value property.
Fourth, put the input in a form.
Fifth, don't disable the input.
Something like this:
<form>
<input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" style="border: 3px double #CCCCCC;" disabled/>
<input type="submit" value="Submit" />
</form>
<script>
// The rest of your JavaScript code, formatting your date value
document.getElementById("sd").value= someFormattedDate;
</script>
Unless otherwise specified, this <form> will submit a GET request to the current URL by default when the submit button is clicked.
Aside from that it's not really clear to me what you're trying to do with the PHP code here. Why you're trying to output a value that hasn't been submitted yet, or output a literal string, or whatever you're attempting.

<script>
var currentDate = new Date();
if (currentDate.getDay() == 5) {
var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
} else {
var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
}
currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
var dd = currentDate.getDate();
var mm = currentDate.getMonth() + 1;
var y = currentDate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById("sd").innerHTML = someFormattedDate;
</script>
Description:- You are binding data with wrong element.

month and date in two digits in javascript

I am trying to add end date with javascript.
<head>
<? $duration1 = $member_data['advt_duration']; //Using for var duration ?>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#start_date').datepicker({dateFormat: 'yy-mm-dd',timeFormat: "hh:mm tt"});
});
});
function getdate() {
var tt = document.getElementById('start_date').value;
var date = new Date(tt);
var newdate = new Date(date);
var duration = '<?php echo $duration1 ;?>';
//alert(duration);
if (duration ==="One Month") {
newdate.setDate(newdate.getDate() + 30);
}
if (duration ==="Three Months") {
newdate.setDate(newdate.getDate() + 90);
}
if (duration ==="Six Months") {
newdate.setDate(newdate.getDate() + 180);
}
if (duration ==="One Year") {
newdate.setDate(newdate.getDate() + 365);
}
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = y+ '-' + mm + '-' + dd;
document.getElementById('end_date').value = someFormattedDate;
}
</script>
</head>
<body>
From : <input name="start_date" type="text" id="start_date" style="border:1px solid #333;"/>
<input type="button" onclick="getdate()" value="Get End Date" style="background-color:#999; border:1px solid #333;"/>
To : <input name="end_date" type="text" id="end_date" style="border:1px solid #333;" readonly/>
</body>
Now I am Getting START DATE in YYYY-MM-DD Format...But END DATE is Not getting in that format...
e.g. If we set start date and suppose var duration = "One Year"...
start_date = "2016-05-09" //09 May 2016
Then
getting
end_date = "2017-5-9" Instead of "2017-05-09"

this will work
mm = ( mm < 10 ) ? ( "0" + ( mm ).toString() ) : ( mm ).toString();
dd= ( dd< 10 ) ? ( "0" + ( dd).toString() ) : ( dd ).toString();

jQuery set defaul value of date picker input

I am building a web app that uses a date picker to filter the search results of some event items.
The form submits via ajax just fine, (I am getting results) but I am having issues with setting a default value into the datepicker. The input type is text based, but it functions like a javascript DatePicker. Thanks for any help.
Note: I did not build the form from scratch, but it is customized to do what I need it to.
jQuery:
// Get current date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
var currentDate = day + "-" + month + "-" + year;
$("#CAT_Custom_2_Min").val(currentDate)
$("#calendar-form").submit();
Form HTML:
<form id="calendar-form" action="/Default.aspx?CCID=17654&FID=197248&ExcludeBoolFalse=True&PageID=11940414" method="post" name="catcustomcontentform95560">
<table cellspacing="0" cellpadding="2" border="0" class="webform">
<tbody>
<tr>
<td><label>Event Start Time Min/Max:</label><br />
<input type="text" onfocus="displayDatePicker('CAT_Custom_2_Min');return false;" style="background-color: #f0f0f0;" readonly="readonly" class="cat_textbox" id="CAT_Custom_2_Min" name="CAT_Custom_2_Min" />
And <input type="text" onfocus="displayDatePicker('CAT_Custom_2_Max');return false;" style="background-color: #f0f0f0;" readonly="readonly" class="cat_textbox" id="CAT_Custom_2_Max" name="CAT_Custom_2_Max" /></td>
</tr>
<tr>
<td><input type="submit" value="Search" class="cat_button" /></td>
</tr>
</tbody>
</table>
</form>
Live Page: http://sevenclanscasino.designangler.com/warroad/warroad-calendar
jsfiddle: http://jsfiddle.net/VJQYb/

// Get current date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var currentDate = date.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;
// Date for 7 days from current date
var futureDate = new Date();
futureDate.setDate(date.getDate() + week);
$("#CAT_Custom_2_Min").val(currentDate);
$("#CAT_Custom_2_Max").val(futureDate);
$("#calendar-form").submit();
I removed the variable d as it wasn't being declared, and added a # in front of CAT_Custom_2_Min and CAT_Custom_2_Max

you can try
<input type="text" id="date1" />
<script type="text/javascript">
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var cdate = month + "/" + day + "/" + year;
document.getElementById("date1").value=cdate;
</script>
just an example to clear the idea of showing date in input box...