To display data in the fields in the modal retrieved from the mysql database

Question

Friends I am submitting the form on clicking the submit button and simultaneously i am displaying the just submitted data in the modal.So as soon as i hit the submit button ,the data gets submitted and a modal appears with the data just submitted.Everything is working fine with my code but the only problem that the data does not gets displayed in the modal. Here is the code for submitting the form-

$("#savep").click(function(e){
      e.preventDefault();

       formData = $('form.pform').serialize() + '&' 
        + encodeURI($(this).attr('name'))
        + '='
        + encodeURI($(this).attr('value'));

             $.ajax({
               type: "POST",
               url: "data1_post.php",
               data: formData,
               success: function(msg){
                $('input[type="text"], textarea').val('');
                 $('#entrysavedmodal').modal('show');


                },
               error: function(){
                alert("failure");
               }
           });
     });

Here is modal which gets displayed when i click on submit button-

<div id="entrysavedmodal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:1000px;">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Saved Entry</h4>
      </div>
      <div class="modal-body">
        <form  class="form-horizontal savedform" id="savedform">
    <div class="form-group">
      <label class="control-label col-xs-2">Date:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="datepreview" name="datepreview" 
           value = "<?php
                  include('db.php');
                  $sql = "SELECT `date` FROM tran ORDER BY id DESC limit 1";
                  $result = mysqli_query($conn,$sql);
                  $rows = mysqli_fetch_assoc($result);
                  $date = $rows['date'];
                  echo $date;

                  ?>" readonly /> //this field does not show anything and none of the fields show any data.
      </div>

      <label class="control-label col-xs-2">v_no:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="v_nopreview" name="v_no"  autocomplete="off" readonly /> //same problem 
      </div>

    </div>
   </form>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-info" id="print"  name="print" >Print</button>

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
   </form>
  </div>
</div>
</div>
</div>

Date field does not show the date value from database and v_nopreview field also does not show anything. I have tried to give as much details as possible but in case if you need anything then let me know.Please let me know why the data is not being displayed inside the input fields in modal. Thanks in advance. Edited part Here is the data1_post.php code-

<?php
include('db.php');
$sql = "INSERT INTO `table1` (`date`, `v_no`, `name`,`narration`,`stk_y_n`)
         VALUES ( '".$_POST['date']."','".$_POST['v_no']."', '".$_POST['user']."','".$_POST['narration']."', 'No')";
 if ($conn->query($sql) === TRUE){
echo "saved";
}
else
{
echo "not saved";
}
?>

Answer 1

As I understand, you expect execution of php code each time after js event. But PHP is a server-side language, it interprets only once, when you request the pages.

So your php code will load some content form DB after refreshing, then you clear input's value before displaying model and as it can't be executed again - you see empty modal. I recommend you to return saved data from "data1_post.php" and than process it in success callback

UPDATE

if you want to present saved data, your php code would look like the following

include('db.php');

$response = ["success" => false];
$sql = "INSERT INTO `table1` (`date`, `v_no`, `name`,`narration`,`stk_y_n`)
        VALUES ( '".$_POST['date']."','".$_POST['v_no']."', '".$_POST['user']."','".$_POST['narration']."', 'No')";
if ($conn->query($sql) === TRUE){
    $sql = "SELECT `date` FROM tran ORDER BY id DESC limit 1";
    $result = mysqli_query($conn,$sql);
    $rows = mysqli_fetch_assoc($result);
    $response = ["success" => true, "date" => $rows['date']];
}

header('Content-type: application/json');
echo json_encode($response);  

and js

$("#savep").click(function(e){
    e.preventDefault();

    formData = $('form.pform').serialize() + '&'
        + encodeURI($(this).attr('name'))
        + '='
        + encodeURI($(this).attr('value'));

    $.ajax({
        type: "POST",
        url: "data1_post.php",
        data: formData,
        success: function(response){
            $('input[type="text"], textarea').val('');

            if (response.success) {
                $('#datepreview').val(response.date);
                $('#entrysavedmodal').modal('show');
            } else {
                alert("failure");
            }
        },
        error: function () {
            alert("failure");
        }
    });
});