easyui dialog 表单提交,弹框初始化赋值,dialog实现

时间:2021-08-17 14:37:29
//定义弹框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.');
} }
});
}
}

  

easyui dialog 表单提交,弹框初始化赋值,dialog实现的更多相关文章

  1. Easyui &plus; jQuery表单提交 给 Controller patr1

    2014-11-15  总结上周在公司开发所用到的技术,由于是刚找的工作(一个大三实习生)+自己的技术菜,有很多地方都是怎么想就怎么实现的, 如果你有什么更好的解决方法,在看见这篇博客的时候,希望你能 ...

  2. jquery表单提交获取数据&lpar;带toast dialog&rpar;

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  3. easyui form表单提交应注意的问题

    今天在一个项目中用到表单提交,代码如下: $('#CreateForm').form('submit', { onSubmit: function () { ajaxCreateFrom(this, ...

  4. EasyUI Form表单提交

    转自:https://www.cnblogs.com/net5x/articles/4576926.html Form(表单) 使用$.fn.form.defaults重写默认值对象 form提供了各 ...

  5. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  6. &lbrack;必会&rsqb; 表单验证&plus;弹框~老司机原生js

    <!DOCTYPE html><html><head> <meta charset="gb2312"> <title>恰 ...

  7. easyui form表单提交标准格式

    $("#temForm").form('submit', { url: '', queryParams: {}, cache: false, type: 'POST', dataT ...

  8. 由于想要实现下载的文件可以进行选择,而不是通过&lt&semi;a&gt&semi;标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载,但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果。

    由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文 ...

  9. 使用Jquery&period;form&period;js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

随机推荐

  1. R语言学习笔记之&colon; 论如何正确把EXCEL文件喂给R处理

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html ---- 前言: 应用背景兼吐槽 继续延续之前每个月至少一次更新博客,归纳总结学习心得好习惯. ...

  2. Java类型擦除机制

    Java泛型是JDK 5引入的一个特性,它允许我们定义类和接口的时候使用参数类型,泛型在集合框架中被广泛使用.类型擦除是泛型中最让人困惑的部分,本篇文章将阐明什么是类型擦除,以及如何使用它. 一个常见 ...

  3. 使用intellij idea搭建MAVEN&plus;springmvc&plus;mybatis框架

    原文:使用intellij idea搭建MAVEN+springmvc+mybatis框架 1.首先使用idea创建一个maven项目 2.接着配置pom.xml,以下为我的配置 <projec ...

  4. HW3&period;18

    import javax.swing.JOptionPane; public class Solution { public static void main(String[] args) { Str ...

  5. 2012高校GIS论坛

    江苏省会议中心 南京·钟山宾馆(2012年4月21-22日) 以"突破与提升"为主题的"2012高校GIS论坛"将于4月在南京举行,由南京大学和工程中心共同承办 ...

  6. PHP &dollar;&lowbar;SERVER&lbrack;'HTTP&lowbar;REFERER'&rsqb; 获取前一页面的 URL 地址

    转载:http://www.5idev.com/p-php_server_http_referer.shtml 使用 $_SERVER['HTTP_REFERER'] 将很容易得到链接到当前页面的前一 ...

  7. webpack的四大核心概念

    webpack中文文档:https://doc.webpack-china.org/concepts/ 一.Entry(入口) 1.单个入口(简写)语法 // 语法 entry: string|Arr ...

  8. python 的 format 函数

    python的格式化字符串方法之一------------format 函数 它通过{}和:来代替%. 数字 格式 输出 描述 3.1415926 {:.2f} 3.14 保留小数点后两位 3.141 ...

  9. lnmp 基础设置

    1.设置ci.tp.laravel重写,去掉index.php location / { try_files $uri $uri/ /index.php?$query_string; } 2.开启ph ...

  10. 关于 Thread&period;currentThread&lpar;&rpar;

    currentThread()  到底是什么? 其实currentThread() 只是Thread 的一个静态方法.返回的正是执行当前代码指令的线程引用: /** * Returns a refer ...