在JQuery或Javascript中追加HTML表单
我试图附加一些HTML表单代码，但我的代码中似乎有错误。当我尝试点击“添加其他体验”按钮时，它将进入一个必填字段，然后说“请填写此字段”。有什么问题吗？以下是我的HTML代码：在JQuery或Javascript中追加HTML表单,javascript,jquery,html,forms,append,Javascript,Jquery,Html,Forms,Append,我试图附加一些HTML表单代码，但我的代码中似乎有错误。当我尝试点击“添加其他体验”按钮时，它将进入一个必填字段，然后说“请填写此字段”。有什么问题吗？以下是我的HTML代码： <div class="form-group row" style="width: 100%;"> <div class="col-md-12 exp"> <
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div
你有呼叫中心的经验吗？
对
不
你接受过语言培训吗？
对
不
公司名称：
职位：
持续时间：
目前
添加另一个体验
在javascript代码中添加多行字符串时，可以通过“\”转义文字换行符，否则换行符将破坏js代码。这是使用多行字符串的正确方法：
$(".add_exp1").click(function(){
$(".exp").append('<br>\
<label for="exp">Another Work Experience<br><br>Company Name: </label>\
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\
<br>\
<label for="exp"><br><br>Position: </label>\
<input type="input" class="form-control" id="position" placeholder="Position">\
<label for="bday"> Duration:\
</label>\
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>\
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"\
id="present" value="present"> Present\
<br><br><br>'); });
$（“.add_exp1”）。单击（函数（）{
$（“.exp”）.append（'
\
另一份工作经历公司名称：\
\
\
职位：\
\
持续时间：\
\
\
出席\
“）；}）；
在javascript代码中添加多行字符串时，可以通过“\”转义文字换行符，否则换行符将破坏js代码。这是使用多行字符串的正确方法：
$(".add_exp1").click(function(){
$(".exp").append('<br>\
<label for="exp">Another Work Experience<br><br>Company Name: </label>\
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\
<br>\
<label for="exp"><br><br>Position: </label>\
<input type="input" class="form-control" id="position" placeholder="Position">\
<label for="bday"> Duration:\
</label>\
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>\
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"\
id="present" value="present"> Present\
<br><br><br>'); });
$（“.add_exp1”）。单击（函数（）{
$（“.exp”）.append（'
\
另一份工作经历公司名称：\
\
\
职位：\
\
持续时间：\
\
\
出席\
“）；}）；
我只是让它像这样工作
头上的Jquery
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function () {
$(".add_exp1").click(function(){
$(".exp").append('<br><label for="exp">Another Work Experience<br><br>Company Name: </label>' +
'<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+
'<br>'+
'<label for="exp"><br><br>Position: </label>'+
'<input type="input" class="form-control" id="position" placeholder="Position">'+
'<label for="bday"> Duration:'+
' </label>'+
'<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>'+
'<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"'+
'id="present" value="present"> Present'+
'<br><br><br>');
});
})
</script>
$（文档）.ready（函数（）{
$（“.add_exp1”）。单击（函数（）{
$（“.exp”）.append（“
另一份工作经历
公司名称：”+
''+
“
”+
“
位置：”+
''+
“持续时间：”+
' '+
''+
“现在”+
“
”）；
});
})
html中的主体与您的相同。
唯一的变化是在html中为新元素添加字符串。
要有多行，您需要转义它或附加字符串。我只是让它这样工作
头上的Jquery
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function () {
$(".add_exp1").click(function(){
$(".exp").append('<br><label for="exp">Another Work Experience<br><br>Company Name: </label>' +
'<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+
'<br>'+
'<label for="exp"><br><br>Position: </label>'+
'<input type="input" class="form-control" id="position" placeholder="Position">'+
'<label for="bday"> Duration:'+
' </label>'+
'<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>'+
'<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox"'+
'id="present" value="present"> Present'+
'<br><br><br>');
});
})
</script>
$（文档）.ready（函数（）{
$（“.add_exp1”）。单击（函数（）{
$（“.exp”）.append（“
另一份工作经历
公司名称：”+
''+
“
”+
“
位置：”+
''+
“持续时间：”+
' '+
''+
“现在”+
“
”）；
});
})
html中的主体与您的相同。
唯一的变化是在html中为新元素添加字符串。
要有多行，需要对其进行转义或追加字符串。有两种方法可以做到这一点，最简单的方法是将要克隆的html的一部分包装到div中。
在html中：
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<div id ="partialForm">
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
</div>
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div>
这是工作小提琴：
另一种方法是使用最佳实践从javascript生成Html
下面是一个如何在jquery中生成输入的示例：
var dateStartInput = $(document.createElement('input'))
.attr('id','date-picker-2')
.attr('type','date')
.attr('placeholder','Date Started')
.addClass('date-picker form-control');
有两种方法可以做到这一点，最简单的方法是将要克隆的html的一部分包装到div中。
在html中：
<div class="form-group row" style="width: 100%;">
<div class="col-md-12 exp">
<label for="exp"><br>Do you have call center experience? </label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label>
<br>
<label for="exp"><br>Did you have any language training? </label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label>
<br>
<div id ="partialForm">
<label for="exp"><br><br>Company Name: </label>
<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
<br>
<label for="exp"><br><br>Position: </label>
<input type="input" class="form-control" id="position" placeholder="Position">
<label for="bday"> Duration: </label>
<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>
<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/> <input type="checkbox" id="present" value="present"> Present
</div>
<br><br><br>
<button class="btn btn-primary add_exp1" >Add another experience</button>
</div>
</div>
这是工作小提琴：
另一种方法是使用最佳实践从javascript生成Html
下面是一个如何在jquery中生成输入的示例：
var dateStartInput = $(document.createElement('input'))
.attr('id','date-picker-2')
.attr('type','date')
.attr('placeholder','Date Started')
.addClass('date-picker form-control');
您是否使用过任何验证…？最好从中删除
标记。原因是标签标签标签定义了输入元素的标签，但“其他工作经验”不是“公司名称”输入的标签。一致的方法是将其放在单独的元素中，例如，您是否使用过任何验证…？最好从中删除
标记。原因是标签标签标签定义了输入元素的标签，但“其他工作经验”不是“公司名称”输入的标签。一致的方法是将其放置在单独的元素中，例如。