js操作Dom节点拼接表单及ajax提交表单
有时候我们不希望html(、vm)中有创建太多的标签(dom节点)，所以这些任务都由js来做，下面提供套完整的表单提交流程，只需要在html中添加两个p其余的都由js来做吧。
1、需要创建表单的点击事件
修改结算金额
2、html文件创建p节点
3、引入docdata.js以及docdata.css
4-1、docdata.js
function changesettlemoney(docname, servicetypename, docid, skuid) {
if (docid == "" || skuid == "") {
return
}
var formstr = "x"
+ "
" + "
修改结算金额" + "" + "
" + "" + "医生姓名:" + docname + "" + "" + "服务名称:" + servicetypename + "" + "" + "结算金额:" + "
" + "隐藏域" + "隐藏域" + "" + "" + " " + "提交" + "" + "
" document.getelementbyid("popupcontact").innerhtml = ""; var sondiv = document.getelementbyid("popupcontact"); sondiv.innerhtml = formstr; $("#backgroundpopup").css({ "opacity": "0.6" }); //获取变量 var windowwidth = document.documentelement.clientwidth; var windowheight = document.documentelement.clientheight; //居中设置 $("#popupcontact").css({ "position": "absolute", "top": windowheight / 2 - 350, "left": windowwidth / 2 - 350, }); $("#backgroundpopup").show(); $("#popupcontact").show(); //绑定隐藏事件 $("#popupcontactclose").click(function () { $("#popupcontact").hide(); $("#backgroundpopup").hide(); }); //提交表单 $("#sendbutton").click(function () { var settlemoney = document.getelementbyid("settlemoney").value; if (!settlemoney || settlemoney == '') { alert("请输入结算金额"); return; } var formdata = new formdata($("#docinfoform")[0]); // 要求使用的html对象 $.ajax({ url: '/doctor/changesettlemoney.action', type: 'post', data: formdata, async: true, // 下面三个参数要指定，如果不指定，会报一个jquery的错误 cache: false, contenttype: false, processdata: false, success: function (res) { // alert(res.flag); if (res.data == true) { window.location.href = "/doctor/virtualdoclist" } }, beforesend: function () { $("
").appendto("body"); }, complete: function () { $(".loadingwrap").remove(); window.location.href = "/doctor/virtualdoclist" }, error: function (res) { alert("修改结算金额失败!" + res); window.location.href = "/doctor/virtualdoclist" } }); } ); }
4-2、docdata.css
#backgroundpopup{
display:none;
position:fixed;
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupcontact{
display:none;
position:fixed;
position:absolute;
width:500px;
background:#ffffff;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupcontactclose{
font-size:14px;
line-height:14px;
right:10px;
top:8px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
/*拼装form表单样式*/
.bootstrap-frm {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #fff;
padding: 20px 30px 20px 30px;
font: 12px "helvetica neue", helvetica, arial, sans-serif;
color: #888;
text-shadow: 1px 1px 1px #fff;
border:1px solid #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.bootstrap-frm h1 {
text-align:left;
color:#6fa5fd;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #d3d3d3;
padding-bottom:2px;
margin-bottom:20px;
}
.bootstrap-frm h1>span {
display: block;
font-size: 11px;
}
.bootstrap-frm label {
display: block;
margin: 0px 0px 5px;
}
.bootstrap-frm label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
/*margin-top: 10px;*/
color: #333;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-weight: bold;
}
.bootstrap-frm input[type="text"],.bootstrap-frm textarea, .bootstrap-frm select{
border: 1px solid #ccc;
color: #888;
height: 20px;
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 5px 0px 5px 5px;
width: 30%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.bootstrap-frm textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.bootstrap-frm .button {
background: #fff;
border: 1px solid #ccc;
padding: 10px 25px 10px 25px;
color: #333;
border-radius: 4px;
}
.bootstrap-frm .button:hover {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.loadingwrap{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:300;
background-image:url(/static/img/loading.gif);
background-repeat:no-repeat;
background-position:center center;
background-color:#000;
background-color:rgba(0,0,0,0.5);
filter:alpha(opacity=50);
}