Change Inputs to Read-Only when NOW() is greater than $LimitDate

Hello Experts!

I want to make certain inputs read-only when NOW() is greater than $LimitDate.

I use the following to populate the DataTable:

{
    orderable: false,
    render: function (data, type, row) {
    return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + '">';
    }
},
{
    orderable: false,
    render: function (data, type, row) {
    return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass2[' + row.Enroll_ID + ']" value="' + row.CA2 + '">';
    }
}

Open in new window

The $LimitDate holds the date when the input periods expire.

How can I manipulate the two inputs above so the change to READ-ONLY when NOW() is greater than $LimitDate?

Thank you.
Opeyemi AbdulRasheedAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Where is $LimitDate in this picture?
What are we looking with the code - I am assuming from your question this has something to do with DataTables (JavaScript, Client Side) however $LimitDate is PHP which is server side.

Please can you fill in the missing pieces for us.
0
Opeyemi AbdulRasheedAuthor Commented:
Yes sir. I retrieved that date value from MySQL. $LimitDate is a variable I used to hold the value. as in...
$ass_time_limit = $row['Ass_Time_Limit'];
$myDateTime = DateTime::createFromFormat('Y-m-d', $ass_time_limit);
    $LimitDate = $myDateTime->format('d-m-Y');

Open in new window


The DataTable is populated through the following JQuery:
$(document).ready(function(){

            var myDt = $('#assessmentTable').DataTable({
                "paging": false,
                columns : [
                    { data : 'Roll_No' },
                    { data : 'Student_ID' },
                    { data : 'Student_Name' },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass2[' + row.Enroll_ID + ']" value="' + row.CA2 + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="exam[' + row.Enroll_ID + ']" value="' + row.Exam + '">';
                        }
                    }
                ]

            });
 });

Open in new window

Now I want those inputs in the DataTable to behave as follows:

if ( NOW() > $LimitDate ){
  <input type="text" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + '" readonly="readonly">
}
else{
 <input type="text" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + '" >
}

etc.

Thank you sir
0
Julian HansenCommented:
First inject $LimitDate into your document - in this example we create a function that returns a string 'readonly' if now > limitdate otherwise an empty string. We call that function in our input string builder.
echo <<< SCRIPT
<script>function getReadonly() {
  var limitdate = new Date('{$LimitDate}');
  var now = new Date();
  return now > limitdate ? 'readonly' : '';
}
</script>
SCRIPT;

Open in new window


Then in your Javascript
return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + getReadonly() + '">';

Open in new window

0
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Opeyemi AbdulRasheedAuthor Commented:
I implemented your suggestion as follows but all inputs are still editable.
<script>
    function getReadonly() {
    var limitdate = new Date('{$LimitDate}');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

        <script>
        $(document).ready(function(){

            var myDt = $('#assessmentTable').DataTable({
                "paging": false,
                columns : [
                    { data : 'Roll_No' },
                    { data : 'Student_ID' },
                    { data : 'Student_Name' },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass2[' + row.Enroll_ID + ']" value="' + row.CA2 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="exam[' + row.Enroll_ID + ']" value="' + row.Exam + getReadonly() + '">';
                        }
                    }
                ]

            });
});
</script>

Open in new window

$LimitDate is displayed on the page as:
Assessment entry/update is opened till: 08-10-2018

NOTE: The DataTable only displays the data when the following is executed (button clicked):
$('#loadStudents').click(function() {
                $.ajax({
                    method : 'post',
                    url : 'assessment_updateData.php',
                    data : { session : $('#session').val(), term : $('#term').val(), class : $('#c_taught').val(), subject : $('#s_taught').val(), limit : $('#process_limit').val(), },
                    dataType : 'json',
                }).done(function(data) {
                    myDt.clear().draw();
                    myDt.rows.add(data).draw();
                });
            });

Open in new window

0
Julian HansenCommented:
What does the rendered code look like for the <script>function getReadonly() ... </script> output.

In fact can you post your rendered HTML.
0
Opeyemi AbdulRasheedAuthor Commented:
What does the rendered code look like for the <script>function getReadonly() ... </script> output.

In fact can you post your rendered HTML.
How can I get that output, sir?
0
Julian HansenCommented:
1. View source
2. Copy
3. Open Code tags and paste the code between the code tags

If you could cut out the code we are interested in rather than the whole page - that would be good for now.
0
Opeyemi AbdulRasheedAuthor Commented:
this part?
<script>
    function getReadonly() {
    var limitdate = new Date('{$LimitDate}');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

        <script>
        $(document).ready(function(){

            var myDt = $('#assessmentTable').DataTable({
                "paging": false,
                columns : [
                    { data : 'Roll_No' },
                    { data : 'Student_ID' },
                    { data : 'Student_Name' },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass2[' + row.Enroll_ID + ']" value="' + row.CA2 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + getReadonly() + '">';
                        }
                    },
                    {
                        orderable: false,
                        render: function (data, type, row) {
                            return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="exam[' + row.Enroll_ID + ']" value="' + row.Exam + getReadonly() + '">';
                        }
                    }
                ]

            });

Open in new window

0
Julian HansenCommented:
Yes that part
Take a look at what was produced
<script>
    function getReadonly() {
    var limitdate = new Date('{$LimitDate}');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

Look at line 3 - that is not right - it is not substituting the value of LimitDate but outputing it as a literal

Please post your PHP code that you used to output that <script> tag - it has not been done correctly.
0
Opeyemi AbdulRasheedAuthor Commented:
here
$default_sql = "SELECT * FROM ... WHERE ... = 1 ";
    $default_result = $conn->query($default_sql);
    if ($default_result->num_rows === 1) {
    while($row = $default_result->fetch_assoc()) {
    $default_session = $row['Default_Session'];
    $default_term = $row['Default_Term'];
    $ass_time_limit = $row['Ass_Time_Limit'];
        }
    }
    $session_phrase = "Session";

    $myDateTime = DateTime::createFromFormat('Y-m-d', $ass_time_limit);
    $LimitDate = $myDateTime->format('d-m-Y');

Open in new window

I output it on the page like follows:
Assessment entry/update is opened till: <span style="color: red;"><?= $LimitDate ?></span>

Open in new window

and the HTML output is:
Assessment entry/update is opened till: <span style="color: red;">08-10-2018</span>

Open in new window

Thank you, sir.
0
Julian HansenCommented:
No, I asked where your code is that outputs this block
<script>
    function getReadonly() {
    var limitdate = new Date('{$LimitDate}');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

The above needs to be in your PHP script so it can access the $LimitDate variable.

Where did you place the above code?
0
Julian HansenCommented:
I am guessing you need to do this instead. Important to look at what the solution is recommending and adapt to your environment if necessary.

<script>
    function getReadonly() {
    var limitdate = new Date('{<?= $LimitDate}?>');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

0
Opeyemi AbdulRasheedAuthor Commented:
The above needs to be in your PHP script so it can access the $LimitDate variable.
I'm not using any PHP code to output that script. I simply pasted it that way like other JavaScript.

The HTML output of:
<script>
    function getReadonly() {
    var limitdate = new Date('{ <?= $LimitDate ?> }');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

shows:
<script>
    function getReadonly() {
    var limitdate = new Date('{ 08-10-2018 }');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

Yet, no desired result.
I hope the issue is not from
$myDateTime = DateTime::createFromFormat('Y-m-d', $ass_time_limit);
    $LimitDate = $myDateTime->format('d-m-Y');

Open in new window

Forgive me for taking too much of your time.
0
Julian HansenCommented:
I'm not using any PHP code to output that script. I simply pasted it that way like other JavaScript.
If you look at my earlier comment I did say you needed to inject that code into your document. Simply putting it in the document would do nothing as there would be no link back to the $LimitDate variable.

The original script assumed output using PHP string functions and so the variable was enclosed in { } which have been kept in the above code and should not have been.
It should be like this
<script>
    function getReadonly() {
    var limitdate = new Date('<?= $LimitDate ?>');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

Having said that your date format is incorrect for use with JavaScript - it does not follow the ISO standard for dates which is Y-m-d.

To correct you can do this
<script>
    function getReadonly() {
    var limitdate = new Date('<?= $myDateTime->format('Y-m-d');?>');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

0
Opeyemi AbdulRasheedAuthor Commented:
Thank you sir but when I tried this:
<script>
    function getReadonly() {
    var limitdate = new Date('<?= $myDateTime->format('Y-m-d'); ?>');
    var now = new Date();
    return now > limitdate ? 'readonly' : '';
    }
</script>

Open in new window

I got:
readonly.png
0
Julian HansenCommented:
That does not help me - you need to show me where you are rendering the input - something in your markup is incorrect so the readonly is part of the value.

This is not an issue with the script I gave you - it is an issue with how you have integrated this into your DataTable.

Your column configuration should look something like this
{
  orderable: false,
  render: function (data, type, row) {
    return '<input class="form-control form-control-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + '" ' + getReadonly() + '>';
    }
},

Open in new window

the call to getReadOnly() was added inside the quotes of the Value attribute.

NOTE: When you receive code on this forum that is untested (in this case setting up a test was problematic) you need to look at the code and adapt it for your specific circumstances.

You can see from the screen grab you posted that the readonly is being included with the value - that should give you a clue to look in the rendering string of your <input> to see if the application of the readonly text has not somehow been done inside the value of the value attribute - which is exactly what has happened here.

Change your input's so that the function call is outside of the value quotes and you should be good to go.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Opeyemi AbdulRasheedAuthor Commented:
Now working as desired.

You can see from the screen grab you posted that the readonly is being included with the value - that should give you a clue to look in the rendering string of your <input> to see if the application of the readonly text has not somehow been done inside the value of the value attribute - which is exactly what has happened here.
I'm a little bit crude in PHP and JavaScript. Everything I know, I learned here on this forum.

Thank you for your time and unconditional assistance. I'm so grateful.
0
Julian HansenCommented:
You are welcome - we all had to start somewhere - the more you practice the better you get.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.