javascript - 输入不会更新 javascript

标签 javascript validation

我有一个正在尝试验证的表单,不幸的是,带有 id 的字段 edatefield 在用户进行更正后不会更新。我记录了该字段的值,控制台只是不断重复相同的默认值。

这是表单文件:

   <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>

这是 js 函数的一部分:

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;
        }
    }
}

抱歉,篇幅较长,但我不确定是什么导致了这里的问题,所以我只写了我认为可能必要的内容。

最佳答案

您正在缓存页面加载时元素的值。当脚本加载时,方法之外的所有内容都会立即执行,这就是为什么您总是会在页面加载时得到任何内容。

您应该使用以下方法缓存元素:

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

然后使用以下方法获取方法中的值:

var userValue = datefield.value;

或者将 document.getElementById 移到方法内部,以便它始终获取当前值。

关于javascript - 输入不会更新 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24974677/

相关文章:

Android EditText setError() 无法按预期工作

javascript - Summernote图片通过AJAX上传导致页面刷新

JavaScript:在列表中上下移动元素

javascript - 使用 Meteor JS 的响应式(Reactive)连接在模板中呈现集合数据

javascript - getElementById() 不适用于动态分配的 id

javascript - 正则表达式正负十进制数,逗号分隔

python - Django ORM : Implement Pre-save for a "Field" instead of a "Model"

javascript - 从字符串中提取主题标签,直到出现特殊字符

javascript - 在 Canvas 中加载多个图像

检查输入是否为数字