//定義彈框html
<div id="delete" class="easyui-dialog" title="Delete" data-options="closed: true" style="width: 400px; height: 280px;"> <form method="post" class="easyui-form" > <div class="notice">You are deleting a comment now!</div> <div class="delreason"> <input type="radio" checked="true" name="delReason" value="unhealthy" />unhealthy <input type="radio" name="delReason" value="other" />other </div> <input type="hidden" name="itemId" id="itemId" value=""/> <div class="head"> <div><span class="bold">Marks</span></div> </div> <textarea class="textarea" name="delComment" id="delComment"></textarea> <div class="center"> <input onclick="fnSubmit('delete','your request url')" type="button" value="submit"/> </div> </form> </div>
設置一個按鈕
<button class="r-button" id="deletebtn">Delete</button>
對應的js操作,初始化彈框以及提交表單
$('#deletebtn').click(function (e) { e.preventDefault(); $('#delete_publicity').dialog({ onOpen:function() { //AAA參數可以為外界變量 $('#itemId').val(AAA); $('#del_post').val('-1'); $('#deleteMarks').val(''); } //也可以在此處設定初始值,而免於在html中設定了 //title: 'My Dialog', //width: 400, //height: 200, //closed: false, //cache: false, //href: 'get_content.php', //modal: true }); $('#delete_publicity').dialog('open'); showModalMask('.modal-mask'); $('#delete_publicity').window('center'); });
提交表單操作
function fnSubmit(id,url) { if(id=='delete_reply'){ //注意,easyui表單提交實際上是利用jquery的serialize方法將表單數據轉化為query string的形式append到url地址上 var submitPar = $('#'+id+' form').serialize(); submitPar = submitPar.toString(); var delReason = submitPar.substring(submitPar.indexOf('=')+1,submitPar.indexOf('&')); var delComment = submitPar.substring(submitPar.lastIndexOf('=')+1,submitPar.length); delComment = delComment.trim(); //根據easyui 表單提交的方式,若存在文本框在form內,且輸入有空格時 將會將空格對應的轉化為+號,具體可參見easyui表單提交部分 if(delReason == 'other' && (delComment==''||/^[\+]+$/.test(delComment))){ $.messager.alert('Notice','Please enter the reason for the deletion'); }else{ ajaxRequest(id,url); } }else{ ajaxRequest(id,url); } function ajaxRequest(id,url){ $('#'+id+' form').form('submit',{ url:url, onSubmit:function(){ //return $(this).form('validate'); }, success:function(data){ if(data){ data = JSON.parse(data); } if(data.code==200){ $('#'+id).dialog('close'); $.messager.alert('Notice',data.message); ***** }else{ ********* } }else{ $.messager.alert('Notice','submit Fail.'); } } }); } }