Question

我有两个成员数据元素，例如id和模态中的其他一些信息，它们是模态中的隐藏输入元素，我使用javascript绑定来自锚标记的数据，例如锚标记中的数据元素：

data-column="'.htmlspecialchars($column, ENT_QUOTES, 'utf-8').'"

绑定到模式的Javascript示例：

$('#EnterExpiryModal').on('show.bs.modal', function (e) {
        var memberID = $(e.relatedTarget).data('id');
        $('#memID232').val(memberID);
        var cola3 = $(e.relatedTarget).data('column');
        $('#column3').val(cola3);
});

在我的模式（以下模式代码段）中具有有关成员的相关数据：

<div class="modal" id="EnterExpiryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div id="ExpiryError"></div>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">Please enter document expiry date</h4>
          <br>
            <form class="form-horizontal" method="post" id="ExpiryDateForm">
              <div class="form-group">
              <input id ="memID232" name="memID232" class="form-control" type="hidden">
              </div>

              <div class="form-group">
              <input id ="column3" name="column3" class="form-control" type="hidden">
              </div>

             <div class="form-group">
                  <label class="col-md-4 control-label">Date</label>
                  <div class="col-md-6  inputGroupContainer">
                    <div class="input-group">
                  <div class="clearfix">
                    <div id="date" data-placement="left" data-align="top" data-autoclose="true">
                      <input name="date" type="text" class="form-control hasDatepicker" placeholder="Choose Date">
                    </div>
                  </div>
                    </div>
                  </div>
              </div>

              <div class="middleme"><p><i class="fa fa-info-circle iwarner" aria-hidden="true"></i><small> These documents can be uploaded again at any time...</small></p></div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" id="expirySubmit" name="expirySubmit" class="btn clocumsbtn">Confirm</button>
              </div>
            </form>
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

上面的代码产生以下模态：

如您所见，系统会提示用户在表单字段中输入到期日期，然后单击确认。

但是我遇到的问题是，当我点击Submit表单确实提交时，我的jQuery验证会在使用ajax提交之前进行所有必要的检查，但是我的隐藏输入元素未按照应有的值提交，它们出现了可以为空，但是会填充datepicker（日期）字段-我知道这些值会填充所需的数据。

这是模态在没有隐藏元素的情况下的样子：

这是验证：

$("#ExpiryDateForm").validate({
        rules:
              {


                memID232: {
                required: true,
                minlength: 0
                },

                column3: {
                required: true,
                minlength: 0
                },

                date: {
                required: true,
                minlength: 3
                }

        },
        messages:
        {
                memID232: "There's an error",
                column3: "There's an error",
                date: "Please enter the expiry date",

        },
        submitHandler: submitExpiryDate
});

这是提交处理程序：

function submitExpiryDate() {
var data = $("#ExpiryDateForm").serialize();
$.ajax({
    type : 'POST',
    url : 'enterdocexpiry.php',
    data : data,

beforeSend: function() {
$("#expirySubmit").html('<span class="fa fa-spinner"></span>   please wait...');
},

success : function(responses) {

    if(responses=="1"){
        $('#ExpiryError').removeClass('animated shake');
        $("#ExpiryError").fadeIn(1000, function(){
        $('#ExpiryError').addClass('animated shake');
        $("#ExpiryError").html('<div class="alert alert-danger"> <span class="fa fa-exclamation"></span>   Sorry there was an error!</div>');
    });
    } 

    else if(responses=="updated"){
    $("#ExpiryError").fadeIn(2000, function(){
    $("#expirySubmit").html('<span class="fa fa-spinner"></span>   updating...');
    $("#ExpiryError").html("<div class='alert alert-success'><span class='fa fa-check-square-o'></span>  Added Expiry Date!</div>");
    setTimeout(function(){                          
       window.location.href="manage_docs.php";
    },2000);
    });
    }

    else {
        $("#ExpiryError").fadeIn(1000, function(){
        $("#ExpiryError").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span>   '+data+' !</div>');
        $("#expirySubmit").html('<span class="glyphicon glyphicon-log-in"></span>   Some other error');
    });
    }
}
});
return false;
}

此处是php：

require "database.php";

$memberID = $_POST['memID232'];
$column = $_POST['column3'];

$date = DateTime::createFromFormat('d/m/Y',$_POST['dates']);
$expiryDate = $date->format("Y-m-d");

$docploaded = "Yes";

if (isset($_POST['expirySubmit'])) {

    if ($column == "passport") {

        $statement = $conn->prepare('UPDATE memberdocs SET pexpiry=:expiryDate,puploaded=:docploaded WHERE m_id=:memberID');
        $statement->bindParam(':expiryDate', $expiryDate);
        $statement->bindParam(':docploaded', $docploaded);    
        $statement->bindParam(':memberID', $memberID);
        $statement->execute();

        if($statement->execute() ):
        echo 'updated';
        else:
        echo "1";
        endif;

    }else if ($column == "crb") {

        $statement = $conn->prepare('UPDATE memberdocs SET cvexpiry=:expiryDate WHERE m_id=:memberID');
        $statement->bindParam(':expiryDate', $expiryDate);    
        $statement->bindParam(':memberID', $memberID);
        $statement->execute();

        if($statement->execute() ):
        echo 'updated';
        else:
        echo "1";
        endif;

    }

}

现在，我已经进行了一些故障排除，看来日期选择器是这里的问题。如果我删除了datepicker（日期）表单域，并用标准的自由文本输入域替换了它，那么我的表单就成功地使用填充的memID232输入域和column3输入域提交了，并执行了php脚本，我试图尽可能地清楚我希望屏幕截图和摘要有帮助，有什么建议吗？

Bootstrap Modal不会使用PHP使用datepicker字段发布所有数据

0 个答案: