在 JQuery 或 Javascript 中附加 HTML FORM

Question

我正在尝试附加一些 HTML FORM 代码，但我的代码似乎有问题。当我尝试单击按钮 "Add another experience" 时，它将转到必填字段，然后说 "Please fill in this field"。似乎是什么问题？这是我的 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? &nbsp;&nbsp;&nbsp;</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? &nbsp;&nbsp;&nbsp;</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: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
                                    <br>
                                    <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" class="form-control" id="position" placeholder="Position">
                                    <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: &nbsp;&nbsp;&nbsp;</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"/>&nbsp;<input type="checkbox" id="present" value="present">&nbsp;Present
                                    <br><br><br>
                                    <button class="btn btn-primary add_exp1" >Add another experience</button>
                                </div>
                            </div

这是我的 JQUERY 代码：

 $(".add_exp1").click(function(){
           $(".exp").append('<br>
                                    <label for="exp">Another Work Experience<br><br>Company Name: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
                                    <br>
                                    <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" class="form-control" id="position" placeholder="Position">
                                    <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration:
 &nbsp;&nbsp;&nbsp;</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"/>&nbsp;<input type="checkbox"
 id="present" value="present">&nbsp;Present
                                    <br><br><br>');         });

Answer 1

当您在 javascript 代码中添加多行字符串时，您可以通过 '\' 转义文字换行符，否则换行符会破坏您的 js 代码。这是使用多行字符串的正确方法：

$(".add_exp1").click(function(){
           $(".exp").append('<br>\
                            <label for="exp">Another Work Experience<br><br>Company Name: &nbsp;&nbsp;&nbsp;</label>\
                                    <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\
                                    <br>\
                                    <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>\
                                    <input type="input" class="form-control" id="position" placeholder="Position">\
                                    <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration:\
 &nbsp;&nbsp;&nbsp;</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"/>&nbsp;<input type="checkbox"\
 id="present" value="present">&nbsp;Present\
                                    <br><br><br>');         });

Here is working fiddle

Answer 2

我就是这样工作的。

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: &nbsp;&nbsp;&nbsp;</label>' +
                        '<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+
                        '<br>'+
                        '<label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>'+
                        '<input type="input" class="form-control" id="position" placeholder="Position">'+
                        '<label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration:'+
                        '&nbsp;&nbsp;&nbsp;</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"/>&nbsp;<input type="checkbox"'+
                        'id="present" value="present">&nbsp;Present'+
                        '<br><br><br>');      

                });

            })


        </script>

而且 html 中的正文与您的相同。唯一的变化是在 html 中附加了新元素的字符串。要有多行，您需要对其进行转义或附加字符串。

Answer 3

您有两种方法可以做到这一点，最简单的方法是将要克隆的 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? &nbsp;&nbsp;&nbsp;</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? &nbsp;&nbsp;&nbsp;</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: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">
                                    <br>
                                    <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>
                                    <input type="input" class="form-control" id="position" placeholder="Position">
                                    <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: &nbsp;&nbsp;&nbsp;</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"/>&nbsp;<input type="checkbox" id="present" value="present">&nbsp;Present
                                    </div>  
                                    <br><br><br>
                                    <button class="btn btn-primary add_exp1" >Add another experience</button>
                                </div>
                            </div>

我用 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);
});

这是工作 fiddle：http://jsfiddle.net/defee/nna15kph/ 另一种方法是使用最佳实践从 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');

在 JQuery 或 Javascript 中附加 HTML FORM

Append HTML FORM in JQuery or Javascript

html

javascript

forms

jquery

append