表單 提交前顯示 確認窗口

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link class="include" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://static.naughtycolt.com/js/jquery.validate.min.js"></script>

<!-- 系統公告發布刪除查詢頁面-->

<link class="include" rel="stylesheet" type="text/css" />

<div  class="row">

<div  id = "gm_query_title">系統公告</div>

<div   id = "gm_query">

<div class="col-md-6 col-md-offset-3">

<form class="form-inline" role="form" action="" method="post" id="send_form" >

{% csrf_token %}

<input type="text" class="form-control" name="radio" id="radio" placeholder="系統公告內容" ><select class="form-control" name = "server_name" id="server_name">

{% if server_dict %}

{% for k in server_dict %}

<option>` k`</option>

{% endfor %}

{% endif %}

</select>

</form>

<!--按鈕寫在form外防止 form自動提交   提交時  submit() id 要寫 對應表單的id -->

<button id="send">發布</button><button id="query">查詢</button>

</div>

<div  id = "gm_query_list">

<table class="table table-condensed">

{% if radios %}

   <th class="success" >ID</th>

<th class="warning" >`show_server_name`</th>

{% for r in radios %}

<tr>

<td class="success" >` forloop`.`counter `</td>

<td class="warning" >` r `</td>

</tr>

{% endfor %}

{% endif %}

</table>

</div>

<!--彈出確認窗口-->

<div id="radio_confirm" title="系統公告">  

<table class="table table-condensed">

<tr>

<td  class="info" >服務器名</td>

<td  class="danger">操作</td>

<td  class="warning">內容</td>

</tr>

<tr>

<td  id= "td_server" class="success" ></td>

<td  id="td_op" class="danger"></td>      

<td  id="td_content" class="warning"></td>

</tr>                

</table>

</div>

</div>

<script>

$( "#send,#query" ).button({ icons: { primary: "ui-icon-search"} });

$( "#radio_confirm" ).dialog({

 autoOpen: false,

     show: {

       effect: "blind",

       duration: 1000

     },

     hide: {

       effect: "explode",

       duration: 1000

     },

    // height:200,

 modal: true,

 buttons: {

      "確定": function() {

$("#radio_confirm").dialog("close");

$('#send_form').submit();

          },

       "取消": function() {

$("#radio_confirm").dialog("close");

$("#send_form")[0].reset();

 }

 }

});

$( "#send" ).click(function() {

 $("#send_form").validate({

rules: {

radio: "required"

},

messages: {

radio: "公告內容不能為空"

}

});

 $("#td_op").html("發布");

 $("#td_server").html($("#server_name").val());

 $("#td_content").html($("#radio").val());

 $("#radio_confirm").dialog( "open" );

});

$( "#query" ).click(function() {

$("#send_form").submit();

});

</script>