I have a transaction date field and due date field in my php-html page. I am trying to automatically populate the due date in the respective field by using Jaya script (for example: transaction date is 05-10-2014, my due date needs to be 18-11-2014 (05-10-2014 + 45) . I am not familiar with the java scripts. I am able to populate the same value from the transaction date field to due date field, but i have no idea how to add the 45 days with the transaction date. Attaching the html code and java script. I am using mysql DB. Please help. thanks in advance
Html code
<div class="form-group">
<div class="input-group col-sm-6">
<div class="input-group-addon">Transaction Date <i class="fa fa- calendar"></i></div>
<input id ="txndt" class="form-control" type="date" name ="purch_date" placeholder="Date of transactions" required />
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-6">
<div class="input-group-addon">Payment Due Date <i class="fa fa-calendar-o"></i> </div>
<input id ="duedt" class="form-control" type="text" name ="due_date" readonly />
</div>
</div>
Java Script
<script type="text/javascript">
$('#txndt').keyup(function () {
$('#duedt').val(this.value);
});
</script>
entire script
<?php
require_once('auth.php');
require_once('connection.php');
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DLBCC-Home</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>DLBCC-Purchases</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.redborder {
border:2px solid #f96145;
border-radius:2px;
}
.colored {
background-color: #F0EEEE;
}
.row {
padding: 20px 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand">DLB Credit Card transactions</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-nav">
<li><a href="http://localhost/Projects/dlbcc/home.php" class="scroll-link active" data-id="Home"><font color = "white"><b><i class="fa fa-home"></i> Home</b></font></a></li>
<li class="active"><a href="#" class="scroll-link" data-id="Purchases"><font color = "white"><b><i class="fa fa-shopping-cart"></i> Add Purchases</b></font></a></li>
<li><a href="#" class="scroll-link" data-id="refund"><font color = "white"><b><i class="fa fa-money"></i> Add Refund</b></font></a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<font color = "white"><b> <i class="fa fa-pencil"></i> Reports <i class="fa fa-arrow-down"></i></b></font>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
</ul>
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> User <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href= http://localhost/Projects/dlbcc/index.php><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
</nav>
</div>
<!-- /#wrapper -->
<form name="purchase" method="post" action="dlbcc.php">
<div class = "container">
<div class="page-header">
<center> <h1><small>Input transaction details</small></h></center>
</div>
<br/>
<div class="form-group">
<div class="input-group col-sm-4">
<div class="input-group-addon">Transaction Date <i class="fa fa-calendar"></i></div>
<input id ="txndt" class="form-control" type="date" name ="purch_date" placeholder="Date of transactions" required />
</div>
</div>
<br/>
<div class="form-group">
<div class="input-group col-sm-4">
<div class="input-group-addon">Transaction Amount <i class="fa fa-rupee"></i></div>
<input class="form-control" type="number" name ="purch_amt" placeholder="Amount" required/>
</div>
</div>
<br/>
<div class="form-group">
<div class="input-group col-sm-4">
<div class="input-group-addon">Transaction Details <i class="fa fa-book"></i></div>
<input class="form-control" type="text" name ="purch_dtls" placeholder="Details" required/>
</div>
</div>
<br/>
<div class="form-group">
<div class="input-group col-sm-4">
<div class="input-group-addon">Payment Due Date <i class="fa fa-calendar-o"></i></div>
<input id ="duedt" class="form-control" type="date" name ="due_date" readonly required/>
</div>
</div>
<br/>
<div class = "col-sm-4"><button class="btn btn-success btn-lg btn-block" name="submit_mult" type="submit">Save <i class="fa fa-save"></i></button></div>
</div>
</form>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<center><font color = "white">Copy Right © 2014-14: Prajith Ayril </font></center>
</div>
</nav>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>
<script type="text/javascript">
Date.prototype.addDays = function(days)
{
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
}
$(document).ready(function() {
$('#txndt').on('change', function(event) {
var txndt = new Date(this.value);
var duedt = txndt.addDays(45);
$('#duedt').val(duedt.toString());
});
});
</script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>
latest code
<html>
<head>
<title>Add days</title>
<script type="text/javascript">
function txnfn(){
if(document.getElementById("txnType").value=='ccpurch'){
document.getElementById("duedtdiv").style.display="block";
document.getElementById("duedt").value = dat.toLocaleFormat('%d-%b-%Y');
}else{
document.getElementById("duedtdiv").style.display="none";
}
}
function adddays()
{
var dt = document.getElementById("txndt").value;
var dat = new Date(dt);
dat.setDate(dat.getDate() + 40);
document.getElementById("duedt").value = dat.toLocaleFormat('%d-%b-%Y');
}
</script>
</head>
<body>
Txn Type: <select name="txnType" id="txnType" onchange="txnfn();">
<option value="ccpurch">Purchase</option>
<option value="ccrefund">Refund</option>
</select>
<br/><br/>
txn date:<input id ="txndt" type="date" name ="purch_date" onblur = "adddays();"/>
<br/><br/>
<div id="duedtdiv">
due date:<input id ="duedt" type="date" name ="due_date" readonly/>
</div>
</body>
</html>
