Question

我想在我的数据库中插入任何信息之前创建一个确认框我想点击添加确认消息。如果用户选择“确定”则完成添加，否则如果单击“取消”则不会发生任何操作。这是我的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代码在同一页面中我如何定义javascript需要执行哪些代码

Answer 1

您没有添加事件侦听器：

<table ref:table>
  {{#each rows as row, i}}
    <tr>
      {{#each row as val, j}}
      <td tabIndex=1>
        <input
          data-row='{{i}}'
          data-col='{{j}}'
          on:keydown='arrow(this, event.keyCode)'
          on:focus='set({selected: [i, j] })'
          bind:value='val'>
      </td>
      {{/each}}
    </tr>
  {{/each}}
</table>

<script>
  export default {
    oncreate () {
      this.observe( 'selected', s => {
        this.refs.table.querySelector( `[data-row="${s[0]}"][data-col="${s[1]}"]` ).focus();
      });
    },
    methods: {
      arrow ( node, code ) {
        if ( code < 37 || code > 40 ) return;

        let i = +node.dataset.row;
        let j = +node.dataset.col;

        const rows = this.get( 'rows' );
        const row = rows[i];

        if ( code === 37 ) j = Math.max( 0, j - 1 );
        if ( code === 39 ) j = Math.min( j + 1, row.length - 1 );
        if ( code === 38 ) i = Math.max( 0, i - 1 );
        if ( code === 40 ) i = Math.min( i + 1, rows.length - 1 );

        this.set({ selected: [ i, j ] });
      }
    }
  };
</script>

应该是：

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

此外，$("#confirmOk").on('click', onConfirm);函数未定义。

如何创建确认框？

1 个答案: