input won't update javascript

Question

I have a form I am trying to validate, unfortunately the field with id, edatefield, will not update after the user makes corrections. I logged the value of the field and the console just kept repeating the same default value.

Here is the form file:

   <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <style>
            #errorbox, #fielderror,
            #dateerror,#datedifferror
            {
                display:none;
            }
        </style>
    </head>
    <body>
        <?php session_start(); ?>
        <div id="errorbox">
            <p id="fielderror">Please Enter Username and Password.</p>
            <p id="dateerror">Please enter the following format for the date: mm/dd/yyyy.</p>
            <p id="datedifferror">The completion date must be greater than or equal to the start date.</p>
        </div>
        <form id="taskform" name="taskform" action="edit.php" method="POST">
            <label>Started Task:</label><p id="startdate"><?php   $startdate=new DateTime($_SESSION['startdate']); echo $startdate->format('d M Y') ?></p>
            <label>Task:</label><input type = "text" id="taskfield" name="task" value = <?php  echo $_SESSION['task']; ?> /><br />
            <label>Complete Task By:</label><input type = "text" id="edatefield" name="enddate" value ='<?php echo $_SESSION['enddate']; ?>' /><br />
            <input type="submit" onclick="checkForm()" value="Submit Edits" />
        </form>
        <script src="taskval.js"></script>
    </body>
</html>

And here is part of the js function:

var date1 = document.getElementById('startdate').innerHTML;
var date2 = document.getElementById('edatefield').value;


function dateDiff( date1, date2 ) {
    var startdate = date1.split(" ");
    var enddate = date2.split("/");
    var enddatemonth = enddate[1];
    var startdatemonth;

    if(enddate[2]-startdate[2]<0)
    {
        return false;
    }
    else if(enddate[2]==startdate[2]&&enddatemonth<startdatemonth)
    {
        return false;
    }
    else if(enddate[2]==startdate[2]&&enddatemonth==startdatemonth&&enddate[0]<startdate[0])
    {
        return false;   
    }
    else
    {
        return true;
    }
}

function checkDate(input){
    var dateformat=/^\d{2}\/\d{2}\/\d{4}$/;
    if (!input.value.match(dateformat))
    {
        return false;
    }
    else
    { 
        var monthfield=input.value.split("/")[0]
        var dayfield=input.value.split("/")[1]
        var yearfield=input.value.split("/")[2]
        var dayobj = new Date(yearfield, monthfield-1, dayfield)

        if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
        {
            return false;
        }
        else
        {
            return true;
        }
    }
}

Sorry for the length, but I wasn't sure what would be causing the problem here, so I just put what I thought might be necessary.

Brunis · Accepted Answer · 2014-07-26 19:33:11Z

1

You are caching the value of the element on page load. Everything outside methods is being executed immediately when the script loads, that's why you always get whatever it was when the page loaded.

You should either just cache the element by using:

var datefield = document.getElementById('edatefield');

and then get the value in your methods with:

var userValue = datefield.value;

or move your document.getElementById's inside the method, so it always fetches the current value.

edited Jul 26, 2014 at 19:33

answered Jul 26, 2014 at 19:24

Brunis

1,0738 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

input won't update javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related