如何创建一个确认框

我想在数据库上插入任何信息之前创建一个确认框我想在单击添加时获得确认消息。如果用户选择"确定"，则添加已完成，否则单击"取消"，什么也不会发生。这是我的HTML5代码

<script>
    var option = "êtes-vous sûr de vouloir ajouter ce RDV?";
      $('#btnAdd').on('click', function(e){
    		confirmDialog(option, function(){
    			//My code to Add
    		});
    	});
        function confirmDialog(message, onConfirm){
    	    var fClose = function(){
    			modal.modal("hide");
    	    };
    	    var modal = $("#confirmModal");
    	    modal.modal("show");
    	    $("#confirmMessage").empty().append(message);
    	    $("#confirmOk").one('click', onConfirm);
    	    $("#confirmOk").one('click', fClose);
    	    $("#confirmCancel").one("click", fClose);
        }
  </script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Add RDV</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Modal dialog -->
	<div id="frmTest" tabindex="-1">
	    <!-- CUTTED --><div class="modal-body">
        <form method="post" id="insert-form">
        <label>Nom</label>
        <input type="text"id="name" class="form-control" required/>
        <label>Prenom</label>
        <input type="text"id="lname" class="form-control" required/>
        <label>Date</label>
        <input type="text"id="date" class="form-control" required/>
        <label>Heure</label>
        <input type="text"id="heure" class="form-control" required/>
        
        </form>
      </div>
        <div id="step1" class="modal-footer">
		  <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnAdd"> Add</button>
		</div>
	</div>
    <!-- Modal confirm -->
	<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
		<div class="modal-dialog">
			<div class="modal-content">
         <div class="modal-header"style="background-color:green;color:white;text-align:center">
             <button type="button" class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title" >Confirmation!</h4>
         </div>
				<div class="modal-body" id="confirmMessage">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" id="confirmOk">Ok</button>
		        	<button type="button" class="btn btn-danger" id="confirmCancel">Cancel</button>
		        </div>
			</div>
		</div>
	</div>
</body>
</html>

我的PHP代码与我的HTML和JavaScript代码在同一页面中

您没有添加事件侦听器：

$("#confirmOk").one('click', onConfirm);

应该是：

$("#confirmOk").on('click', onConfirm);

另外，onConfirm功能是未定义的。

相关内容

最新更新

热门标签：