使用Javascript用PHP变量设置HTML Date元素的值


Setting a HTML Date element's value with a PHP variable using Javascript

所以我目前在我的页面上有6个HTML日期元素,我试图让他们保存输入的内容,以便当页面重新加载时,他们仍然保存输入的数据。所以我有我的PHP设置,当表单被张贴的数据被保存到网站目录上的文本文档。现在我还创建了PHP变量来获取已保存的文档信息,这也可以正常工作。现在,当我运行Javascript时,我发现PHP变量已经传递并且正在输出正确的信息。但是,日期元素保持为空。有人知道这是为什么吗?

元素示例输出

window.onload = function (){
    var date1Value = 2016-10-01;
    var date2Value = 2016-10-02;
    var date3Value = 2016-10-03;
    var date4Value = 2016-10-04;
    var date5Value = 2016-10-05;
    var date6Value = 2016-10-06;
    document.getElementById("date1").value = date1Value;
    document.getElementById("date2").value = date2Value;
    document.getElementById("date3").value = date3Value;
    document.getElementById("date4").value = date4Value;
    document.getElementById("date5").value = date5Value;
    document.getElementById("date6").value = date6Value;
}
PHP代码片段

<?php
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date1.txt","r") or exit("Can't open file!");
$setA5 = fgets($myFile);
fclose($myFile);
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date2.txt","r") or exit("Can't open file!");
$setA6 = fgets($myFile);
fclose($myFile);
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date3.txt","r") or exit("Can't open file!");
$setA11 = fgets($myFile);
fclose($myFile);
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date4.txt","r") or exit("Can't open file!");
$setA12 = fgets($myFile);
fclose($myFile);
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date5.txt","r") or exit("Can't open file!");
$setA17 = fgets($myFile);
fclose($myFile);
$myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date6.txt","r") or exit("Can't open file!");
$setA18 = fgets($myFile);
fclose($myFile);
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    $date1 = $_POST['date_1A5'];
    $date2 = $_POST['date_1A6'];
    $date3 = $_POST['date_2A5'];
    $date4 = $_POST['date_2A6'];
    $date5 = $_POST['date_3A5'];
    $date6 = $_POST['date_3A6'];
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date1.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date1);
    fclose($myFile);
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date2.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date2);
    fclose($myFile);
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date3.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date3);
    fclose($myFile);
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date4.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date4);
    fclose($myFile);
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date5.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date5);
    fclose($myFile);
    $myFile=fopen("USERS/".$Username."/RiskAssessment"."/Date6.txt","w") or exit("Can’t open file!");
    fwrite($myFile, $date6);
    fclose($myFile);
}
?>
Javascript

<script>
    window.onload = function (){
        var date1Value = <?php echo $setA5;?>;
        var date2Value = <?php echo $setA6;?>;
        var date3Value = <?php echo $setA11;?>;
        var date4Value = <?php echo $setA12;?>;
        var date5Value = <?php echo $setA17;?>;
        var date6Value = <?php echo $setA18;?>;
        document.getElementById("date1").value = date1Value;
        document.getElementById("date2").value = date2Value;
        document.getElementById("date3").value = date3Value;
        document.getElementById("date4").value = date4Value;
        document.getElementById("date5").value = date5Value;
        document.getElementById("date6").value = date6Value;
    }
</script>
<<p> HTML片段/strong>
<html>
    <body>
        <form method="post" action=thisPage.php>
            <input type="date" name="date_1A5" id="date1">
            <input type="date" name="date_1A6" id="date2">
            <input type="date" name="date_2A5" id="date3">
            <input type="date" name="date_2A6" id="date4">
            <input type="date" name="date_3A5" id="date5">
            <input type="date" name="date_3A6" id="date6">
        </form>
    <body>
</html>

感谢您添加示例输出,因为它准确地显示了错误所在。:)

首先,我想指出这段代码中没有jQuery。你所拥有的是普通的JavaScript。

然后,问题是JavaScript部分的日期周围缺少引号。在打印日期的PHP代码周围添加这些代码,它应该可以工作。

PS:你真的应该考虑使用数据库,或者至少一个文件,来包含这些日期。像这样的多个文件不仅效率低下,而且相当混乱。
一个关于如何使用单个文件的快速示例:

// The file() function automatically creates an array on newlines.
$dates = file ("dates.txt");
if (!$dates) {
    // Show an error message on missing dates.
}
?>
<script>
// $dates[0] contains the first date, increase index by 1 to get the next date.
document.getElementById ('date_1').value = '<?php echo $dates[0]; ?>'

PPS:您还应该检查输入验证,以确保从用户返回的数据确实是一个有效的日期。最简单的方法是尝试用DateTime类解析它。

// If the user has submitted data...
if (isset ($_POST['submit'])) {
    $dates = array ();
    // Ensure we get a valid date.
    $date[0] = DateTime::createFromFormat ('Y-m-d', $_POST['date_1']);
    if (!$dates[0]) {
        // Invalid date, handle it.
    }

当你在javascript中输出日期时,像这样在它周围连接引号:

var date1Value = " + <?php echo $setA5;?> + ";