JS生成子节点并且附加ID，name，然后提交表单；

来源：互联网发布：淘宝网广场舞服装套装编辑：程序博客网时间：2024/04/30 15:23

在做项目的时候，涉及到一个功能就是录入书本。书本数量用户自定义，书本编码自动生成；这样就会涉及到添加DOM节点的技术了；

前台页面：

<form action="/Book/addOldSuccess?GUID=@book.BookGUID" onsubmit="return checkOBKAll()" class="form-horizontal" method="post">
<legend>添加已有书本</legend>
<div class="control-group">
<label for="BookCode" class="control-label">添加数量</label>
<div class="controls">
<input type="text" name="store" id="store" class='input-square' onkeyup="showBookCode()" onblur="CheckStore(this.value)">  
前缀<input type=" text" name="BKPre" id="BKPre" class='input-square' onkeyup="EditBookCode()" onblur="CheckPre(this.value)" style="width:100px;">  
后缀起始数<input type=" text" name="BKEnd" id="BKEnd" class='input-square' onkeyup="EditBookCode()" onblur="CheckEnd(this.value)" style="width:40px;">  *
<span id="errorBK" style="display: none; color: red;">数量，编码前缀和后缀不能为空</span>
<span id="errorNUM" style="display: none; color: red;">数量和后缀必须是数字</span>
</div>
</div>
<div id="bookCodeAll">
<div class="bookall">
<div class="control-group" id="Book1">
<label for="BookCode" class="control-label">编码1</label>
<div class="controls">
<input type="text" name="BookCode1" id="BookCode1" class='input-square' onblur="checkBookCode(this.value)">  *
<span id="errorbc0" style="display:none;color:red;">该已存在，请重新输入！</span>
<span id="errorbc1" style="display: none; color: red;">只能输入6-20个字母、数字、下划线</span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="form-actions">
<input class="btn btn-primary" type="submit" name="submit"></input>
<input type="reset" class='btn btn-danger' value="重置">
</div>
</div>
</div>
</form>

后台JS：

//}
function showBookCode() {
var size = 1;
var i = parseInt($("#store").val());
$("#bookCodeAll").empty();
for (size; size <= i; size++) {
$("#bookCodeAll").append(" <div class='bookall'><div class='control-group' ><label for='BookCode' id='BK' class='control-label'></label><div class='controls'><input type='text' id='BookCode' class='input-square' onblur='checkBookCode1(this.value)'>  *<span id='errorbc0' style='display:none;color:red;'>编码1已存在，请重新输入！</span><span id='errorbc1' style='display: none; color: red;'>只能输入6-20个字母、数字、下划线</span></div></div></div>");
$("#BookCode").attr({ "name": "BookCode" + size, "id": "BookCode" + size });
$("#BK").attr({ "name": "BK" + size, "id": "BK" + size });
$("#BK" + size).text("编码" + size);
}
EditBookCode()

}
function EditBookCode() {
var prefix = $("#BKPre").val();
var begin = $("#BKEnd").val();
if (begin == "") {
begin = 1;
}
var size = 1;
var i = parseInt($("#store").val());
for (size; size <= i; size++) {
$("#BookCode" + size).val(prefix + "_" + begin);
begin = parseInt(begin) + 1;
}
}

0 0