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

有时候我们不希望html(jsp、vm)中有创建太多的标签（dom节点），所以这些任务都由js来做，下面提供套完整的表单提交流程，只需要在html中添加两个div其余的都由js来做吧。下面原生代码只需略微修改就能达到你想要的效果。

1、需要创建表单的点击事件

<a href="javascript:void(0);"
   onclick="changeSettleMoney('$!doctor.docName','$!skuName',$!doctor.docId,$!sku.skuId)">
   修改结算金额
</a>

2、html文件创建div节点

<div id="popupContact"></div>
<div id="backgroundPopup"></div>

3、引入docData.js以及docData.css

<script src="/static/js/component/docData.js"></script>
<script src="/static/js/component/docData.css"></script>

4-1、docData.js

function changeSettleMoney(docName, serviceTypeName, docId, skuId) {
    if (docId == "" || skuId == "") {
        return
    }
    var formStr = "<a id='popupContactClose'>X</a>"
        + "<form id='docInfoForm' class='bootstrap-frm' method='post'>"
        + "<h1>修改结算金额"
        + "<span></span>"
        + "</h1>"
        + "<label>"
        + "<span>医生姓名:</span>"
        + docName
        + "</label>"
        + "<label>"
        + "<span>服务名称:</span>"
        + serviceTypeName
        + "</label>"
        + "<label>"
        + "<span>结算金额:</span>"
        + "<input  id='settleMoney' type='text' name='settleMoney' value=''/>"
        + "<input type='hidden' name='docId' value='" + docId + "'>"
        + "<input type='hidden' name='skuId' value='" + skuId + "'>"
        + "</label>"
        + "<label>"
        + "<span>&nbsp;</span>"
        + "<input id='sendButton' type='button' class='button' value='提交'/>"
        + "</label>"
        + "</form>"
        
    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 () {
                    $("<div class='loadingWrap'></div>").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);
}