Append Date to variable in Javascript

Question

I have the following code, and it is not intuitive to me how I can append the Date to the front end of the newly entered data.

Basically I have a text field that allows editing of the data within. It initially pulls the oldVal from a database, shows it in the td and allows a user to update/edit/add to it. When focus leaves that textarea this method is called and then a php file is called to write to the database.

Here is the td:

<td class="editable-col" contenteditable="true" col-index='4' oldVal ="<?php echo nl2br($res2['status']); ?>"><?php echo nl2br($res2['status']); ?></td>

Here is the javascript method called on 'focusout':

<script type="text/javascript">
$(document).ready(function(){
    $('td.editable-col').on('focusout', function() {
        data = {};
        data['val'] = $(this).html().replace(/\r?\n/g, '<br />');
        data['id'] = $(this).parent('tr').attr('data-row-id');
        data['index'] = $(this).attr('col-index');
        if($(this).attr('oldVal') === data['val'])
            return false;

        $.ajax({   

              type: "POST",  
              url: "updater_1.php",  
              cache:false,  
              data: data,
              dataType: "json",       

        });
    });
});
</script>

I want to append " March 21, 2017 - " to the front of the new data entered.

I would add "and yet another update here"

So the td ends up looking like this:

March 13, 2017 - Update on cuz blah blah blah
March 19, 2017 - Another update here
March 21, 2017 - and yet another update here

Any suggestions ? I tried to handle it in the updater_1.php file but after many hours it is not as easy as I thought.

Thanks for any and all suggestions.

Image added:

Another:

New code test:

$(document).ready(function(){
  $('td.editable-col').on('focusout', function() {
    data = {};
    data['val'] = getDate() + $(this).html().replace(/\r?\n/g, '<br />');
    data['id'] = $(this).parent('tr').attr('data-row-id');
    data['index'] = $(this).attr('col-index');

$.ajax({   

      type: "POST",  
      url: "updater_1.php",  
      cache:false,  
      data: data,
      dataType: "json",       

    });
  });
});

Answer 1

For the starter, you can use date("F j,Y") to return the date in Month date, Year format: So, here's the algorithm to consider on updater_1.php script:

Step1: Get the posted values and sanitize them.

Step2: Get the last part of the string after <br /> in $_POST['data']['values'] ( based on your JS logic and assuming your last line is the newly added string here)

Step3: add today's date in required format to the last part of the string (newly added data)

Step4: fetch the old data from database. this step is important because we don't trust the data user entered He might have fiddled the dates of previously added data

step5: append the data in step 3 to the data in step 4 (ie, oldData + 'br /'+ date + newData)

step6: write this data to the database

step7: if everything goes well and good return this newly written data to front end

To do the above your php script should be doing something like:

 // When you've the post
 $_POST  = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
 //whatever is present in the text box
 $userData = explode("<br />",$_POST['data']['value']);
 //newly entered line/ data and current data
 $todayDate = date("F j,Y")
 $newDataToSaveWithDate =  $todayDate." - ".$dataToSave[count($dataToSave)-1]; 
 //fetech the old data from DB again we don't trust the user he might have changed the date of previously edited data
 //assuming the oldData is fetched correctly into a variable called $oldData
 $dataToSave = $oldData.'<br />'.$newDataToSaveWithDate;
// Save $date to DB
//assuming when everything goes right and the DB is updated
echo $dataToSave; //this would return a date like March 23, 2017 subjected to your datetimezone

And in your ajax call write a success function:

    var self = this; //or any other selector where you want to update/display the date
    $.ajax({   

          type: "POST",  
          url: "updater_1.php",  
          cache:false,  
          data: data,
          dataType: "json",
          success: function(data) {
                       $(this).html(data);
                   }       

    });

Answer 2

You can do this on the client side using native JavaScript code: you can use the global Date class to get the time, and write a function that returns the formatted date. (There is no simple, built in way to format Date objects in JS, but you can use libraries such as moment.js to do so).

Here's a function to format the current date from another SO answer:

function getDate() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    today = mm+'/'+dd+'/'+yyyy;
    return today;
}

And then you can use this in your existing AJAX call. Just call the above function while setting the data['val'] key:

data['val'] = getDate() + $(this).html().replace(/\r?\n/g, '<br />');