简体   繁体   中英

How to display value on two different text box

I want to calculate total days between start_date and end_date. Here i have two text box which is one textbox for end_date and other one for total days between start_date and end_date.What i want to do is when user click the button , the end_date textbox filled with end date and total days text box filled with total days . Can anyone help me with it ?

Here's the code.

<html>
<head>

<script>
$(document).ready(function () {
    $('#txtDate').datepicker();
    $('#follow_Date').getDate();
    $('#dura').getValue();
    $('#mark').getValue();


});

function getdate() {
    var sd = document.getElementById('txtDate').value;
    var d = document.getElementById('dura').value;
    var m = document.getElementById('mark').value;

    var date = new Date(sd);
    var newdate = new Date(date);
    var duration = parseInt(d);
    var marking = parseInt(m);


    if ( marking === 1 )
    {
        newdate.setDate(newdate.getDate());
    }
    else if ( marking === 2 )
    {
         newdate.setDate(newdate.getDate() + duration);
    }
    else if ( marking === 3 )
    {
         newdate.setDate((newdate.getDate() + duration)+1);
    }


    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();

    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('follow_date').value = someFormattedDate;

}
function getdays()
{
    var days = (follow_date.setdate(follow_date.getDate()) - newdate.setDate(newdate.getDate()));
}

</script>
</head>
<body>

<p>Date:
    <input id="txtDate" type="text" />
</p>
<p>Duration :
    <input id="dura" type="text" />
</p>

<p>Marks:
    <input id ="mark" type = "text"/>
</p>
<p>
  <input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>End Date:
    <input id="follow_date" type="text" onkeydown="getdate()" />
</p>
<p>Days :
    <input id="days" type="text" onkeydown="getdays()" />
</p>

</body>
</html>

I'm not exactly sure what you want to do in the end, but there are many errors in your code.

Your getdays function cannot access the variables from your getdate function, eg follow_date and newdate , you need to define global variables or pass them to your function as arguments in order to use them.

Also you're mixing jQuery functions with plain JavaScript (if you even have included jQuery)..

This is a small idea what you need to do to display another variable as your input value, see the comment and added two lines:

function getdate() {
    var sd = document.getElementById('txtDate').value;
    var d = document.getElementById('dura').value;
    var m = document.getElementById('mark').value;

    var date = new Date(sd);
    var newdate = new Date(date);
    var duration = parseInt(d);
    var marking = parseInt(m);


    if ( marking === 1 )
    {
        newdate.setDate(newdate.getDate());
    }
    else if ( marking === 2 )
    {
         newdate.setDate(newdate.getDate() + duration);
    }
    else if ( marking === 3 )
    {
         newdate.setDate((newdate.getDate() + duration)+1);
    }


    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();

    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('follow_date').value = someFormattedDate;

    // added this two lines, that will set the days to your days input element
    var days = (follow_date.setdate(follow_date.getDate()) - newdate.setDate(newdate.getDate()));
    document.getElementById('days').value = days;
}

But as mentioned there are likely more problems with the code, I suggest reading a good JavaScript guide and start with simple things first if you want to unterstand it better, it makes no sense to rewrite your code so it just works I guess.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM