Question

我正在尝试附加一些HTML FORM代码，但似乎我的代码中存在错误。当我尝试单击“添加其他体验”按钮时，它将转到必填字段，然后说“请填写此字段”。什么似乎是问题？这是我的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 CODE：

 $(".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

我只是让它像这样工作。

头脑中的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 2

在javascript代码中添加多行字符串时，您可以通过＆＃39; \＆＃39;来转义字面换行符。否则换行符号将破坏你的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 3

你有两种方法可以做到这一点，最简单的方法就是在div中包含你要克隆的部分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? &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);
});

这是工作小提琴：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

3 个答案: