js操作Dom节点拼接表单及ajax提交表单

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);

}