在JQuery或Javascript中附加HTML FORM
[英]Append HTML FORM in JQuery or Javascript
问题描述
I'm trying to append some HTML FORM codes but it seems that there's wrong in my code. 
我正在尝试附加一些HTML FORM代码，但似乎我的代码有误。 When I try to click the button "Add another experience", it will go to a required field then say "Please fill in this field". 当我尝试单击“添加其他体验”按钮时，它将转到必填字段，然后说“请填写此字段”。 What seems to be the problem? 似乎是什么问题？ Here is my HTML CODE: 这是我的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>
<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
And here is my JQUERY CODE: 这是我的JQUERY代码：
$(".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>'); });
3 个解决方案
解决方案1
3 已采纳 2015-02-05 06:57:36
I just have it working like this. 我只是让它像这样工作。
Jquery in the head 头脑中的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>
And body in the html is the same as yours. html中的主体与您的主体相同。 The only change is the appending of the strings for the new elements in html. 唯一的变化是在html中为新元素追加了字符串。 To have multiple lines, you need to escape it or append the strings. 要包含多行，您需要对其进行转义或附加字符串。
解决方案2
1 2015-02-05 06:54:16
When you add multiline string in javascript code you can escape the literal newline by '\\' otherwise newline symbol will break your js code. 当您在JavaScript代码中添加多行字符串时，可以使用'\\'来使文字换行符转义，否则换行符将破坏您的js代码。 That's the right way to use multiline string: 这是使用多行字符串的正确方法：
$(".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>'); });
解决方案3
1 2015-02-05 10:39:42
You have two ways to do that the most simple way is to wrap a part of html that you want to clone in a div. 有两种方法可以做到这一点，最简单的方法是将要克隆的html部分包装到div中。 In your html: 在您的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>
I wrapped a part of the form in a div with id = "partialForm" Then I clonned this part in jquery and added specific html elements 我将表单的一部分包裹在id = "partialForm"的div中，然后在jQuery中将此部分拼凑起来，并添加了特定的html元素
$(".add_exp1").click(function(){
var newForm= $("#partialForm").clone();
$('input',newForm).val('');
var generatedBr = $(document.createElement('br'));
var header = $(document.createElement('label'))
.attr('for','exp')
.text('Another Work Experience');
$('.exp').append( generatedBr,
header,
newForm);
});
Here is the working fiddle: http://jsfiddle.net/defee/nna15kph/ Another way is to generate Html from javascript with the use of best practices. 这是工作的小提琴： http : //jsfiddle.net/defee/nna15kph/另一种方法是使用最佳实践从javascript生成HTML。
Here there is an example how to generate an input in jquery: 这里有一个示例如何在jquery中生成输入：
var dateStartInput = $(document.createElement('input'))
.attr('id','date-picker-2')
.attr('type','date')
.attr('placeholder','Date Started')
.addClass('date-picker form-control');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.