在从mysql数据库检索的模态中的字段中显示数据

时间:2016-09-22 12:42:01

标签: javascript php jquery mysql twitter-bootstrap

朋友我在单击提交按钮时提交表单同时我在模态中显示刚刚提交的数据。所以,只要我点击提交按钮,数据就会被提交,并且会出现一个模态,其中包含刚刚提交的数据。我的代码一切正常,但唯一的问题是数据没有显示在模态中。 以下是提交表单的代码 -

$("#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");
               }
           });
     });

这是我点击提交按钮时显示的模态 -

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

日期字段不显示数据库中的日期值,而v_nopreview字段也不显示任何内容。 我试图尽可能多地提供详细信息,但如果您需要任何内容​​,请告诉我。请让我知道为什么数据没有显示在模态的输入字段中。 提前致谢。 编辑部分 这是data1_post.php代码 -

<?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";
}
?>

1 个答案:

答案 0 :(得分:0)

据我了解,您希望每次在js事件之后执行php代码。但PHP是一种服务器端语言,当您请求页面时,它只会解释一次。

因此,您的PHP代码将在刷新后加载一些内容形式的数据库,然后在显示模型之前清除输入的值,因为它无法再次执行 - 您会看到空模式。 我建议你从&#34; data1_post.php&#34;中返回保存的数据。而不是处理它成功回调

<强>更新

如果您想要提供已保存的数据,您的PHP代码将如下所示

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);  

和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");
        }
    });
});