How to insert the value of javascript into html

Question

I want to get the javascript value into my html input value and insert it into the database after the user click the submit

<script>
    var currentDate = new Date();

    if (currentDate.getDay() == 5) {
        var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
    } else {
        var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
    }

    currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
    var dd = currentDate.getDate();
    var mm = currentDate.getMonth() + 1;
    var y = currentDate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;

    document.getElementById("display").innerHTML = someFormattedDate;

</script>

<?php

    echo $_GET['someFormattedDate'];

    ?>
    <input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" value="<?php echo " someFormattedDate " style="border: 3px double #CCCCCC; " disabled/>

`getElementById("display")` should be `getElementById("sd")` — Milan Chheda, Aug 20 '17 at 13:05
Also input's do not have `innerHTML`, they have a `value` property — Patrick Evans, Aug 20 '17 at 13:08

score 0 · Answer 1 · answered Aug 20 '17 at 13:07

First, put the JavaScript code after the input you want to use. That way the input exists on the page when the code executes.

Second, use the actual id of the input.

Third, set the .value property.

Fourth, put the input in a form.

Fifth, don't disable the input.

Something like this:

<form>
    <input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" style="border: 3px double #CCCCCC;" disabled/>
    <input type="submit" value="Submit" />
</form>
<script>
    // The rest of your JavaScript code, formatting your date value

    document.getElementById("sd").value= someFormattedDate;
</script>

Unless otherwise specified, this <form> will submit a GET request to the current URL by default when the submit button is clicked.

Aside from that it's not really clear to me what you're trying to do with the PHP code here. Why you're trying to output a value that hasn't been submitted yet, or output a literal string, or whatever you're attempting.

Thank you for your effort It's working now :) – Liza Aug 20 '17 at 14:13 — Liza, Aug 20 '17 at 14:13

score 0 · Answer 2 · answered Aug 20 '17 at 13:08

<script>
    var currentDate = new Date();

    if (currentDate.getDay() == 5) {
        var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
    } else {
        var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
    }

    currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
    var dd = currentDate.getDate();
    var mm = currentDate.getMonth() + 1;
    var y = currentDate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;

    document.getElementById("sd").innerHTML = someFormattedDate;

</script>

Description:- You are binding data with wrong element.

Onx · Accepted Answer · 2017-08-20T13:17:26.157

Since your input id is sd,

 document.getElementById("sd").value = someFormattedDate;

Note: Elements with Disabled attribute are not submitted, enable it before submit.

Full Code:

<?php
    echo $_GET['due_date'];
    ?>

    <form name="myform" id="myform" method="GET">
    <input type="text" class="w8em format-y-m-d highlight-days-67 range-low-today" name="due_date" id="sd" maxlength="10" style="border: 3px double #CCCCCC; " readonly/>
    <input type="submit" name="btn_submit" value="Submit">
</form>

<script>
    var currentDate = new Date();
    if (currentDate.getDay() == 5) {
        var numberOfDaysToAdd = 4; //Adding 4 to skip sat. & sun. if Friday
    } else {
        var numberOfDaysToAdd = 2; //Adding 2 days if not Friday
    }
    currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
    var dd = currentDate.getDate();
    var mm = currentDate.getMonth() + 1;
    var y = currentDate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;

     document.getElementById("sd").value = someFormattedDate;

</script>

Thank you it's working now because my script is inside of the form that's why it's not working but when I saw your code the script is outside of form and now I got the value and display it One question, why is it Undefined index : due_date after I submit although this input type have a value , Thank you! — Liza, Aug 20 '17 at 14:10
this is because , when form is loaded first time , form not submitted, You can check whether form is submitted or not or by simply checking isset function, For example — Onx, Aug 25 '17 at 08:52

How to insert the value of javascript into html

3 Answers3