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

Opeyemi AbdulRasheed
Opeyemi AbdulRasheed used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
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
Most Valuable Expert 2017
Distinguished Expert 2018

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

Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

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

Most Valuable Expert 2017
Distinguished Expert 2018

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

In fact can you post your rendered HTML.
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?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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?
Most Valuable Expert 2017
Distinguished Expert 2018

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

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.
Most Valuable Expert 2017
Distinguished Expert 2018

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

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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.
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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome - we all had to start somewhere - the more you practice the better you get.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial