Put value of textbox into another textbox
Question
I have a start date which is put in a textbox by the user trough a jquery date picker.
I also have an end date textbox which I want to fill with the start date value when the user changed the value of the start date.
So I was thinking of doing a JavaScript and than a when textbox has changed enter value into end date textbox but I don't know how this would be done.
Thank you guys for helping since I am new to JavaScript.
4 answers
solution1
2 2014-03-25 05:58:16
Here is the working code for what you have asked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#fromdate").datepicker({
onSelect: function() {
$(this).change();
}
});
$("#fromdate").change(function (){
var val=$("#fromdate").val();
$("#todate").val(val);
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="fromdate" name="from">
<label for="to">to</label>
<input type="text" id="todate" name="to">
</body>
</html>
And working JSFiddle ( Here )
solution2
1 2014-03-25 05:59:18
If it is this calendar , (which it looks like from your own "answer" ), you could do something like this. It will set " date end " and pop up calendar for it when "date from" is selected:
window.onload = function(){
var cal_start = new JsDatePick({
useMode:2,
target:"date_start",
dateFormat:"%m/%d/%Y"
});
var cal_end = new JsDatePick({
useMode:2,
target:"date_end",
dateFormat:"%m/%d/%Y"
});
cal_start.addOnSelectedDelegate(function(){
document.getElementById('date_end').value = cal_start.getSelectedDayFormatted();
cal_end.showCalendar();
});
};
If you do not want the calendar-end to pop up, remove:
cal_end.showCalendar();
Original answer as per your statement "[…] trough a jquery date picker […]" in question text.
jQuery UI variant:
Use onSelect event.
$(function() {
$("#date_start").datepicker({
onSelect: function(d) {
$("#date_end").val(d);
}
});
$("#date_end").datepicker();
});
You could also add for change event on element, but not sure how user-friendly that would be.
solution3
0 2014-03-25 05:45:48
This is just the simple method below,but if you need something other,let me know
function copytextbox()
{
document.getElementById('textbox2').value=document.getElementById('textbox1').value;
return false;
}
solution4
0 2014-03-25 05:55:26
<script>
function myfunction()
{
document.getElementById("text2").value=document.getElementById("text1").value;
}
</script>
and your start date textbox-
<input type="text" name="startdate" id="text1" onchange="myfunction()"/>
<input type="text" name="enddate" id="text2" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.