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

时间:2016-10-12 09:17:53

标签: javascript php html

所以我目前在我的页面上有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>

HTML代码段

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

2 个答案:

答案 0 :(得分:1)

感谢您添加示例输出,因为它显示了什么是错误的。 :)

首先,我想指出此代码中没有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.
    }

答案 1 :(得分:-1)

当您在javascript中输出日期时,请按照以下方式连接引号:

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