Question

我是jquery的新手，我正在使用laravel框架。我希望在用户填写第一门课程后添加课程。

当用户点击添加更多课程button.it将创建新克隆确保添加更多课程按钮将从第一个课程中删除并设置为第二个课程同样适用于新创建的课程并添加更多按钮应从第二个删除课程并设置为第三门课程。我有hrml代码。

enter code here
<div class="col-md-12 col-sm-12 col-xs-12">
           <div class="row">
              <div class="heading">
                <h4>Courses Offred <button type="button" class="close" data-dismiss="modal"  aria-hidden="true" style="display:none">&times;</button></h4>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course  Title</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Fees</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Web Link</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Detail</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Type</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>  
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Duration</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Location</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Entry Requirement</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Certificates</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
                     </div>
                 </div>
                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="row">
                       <div class="add-more-class ">
                          <div class="btn-save">
                            <button class="btn btn-info">Add More Course</button>
                          </div>
                       </div>
                    </div>
                 </div>                       
              </div>
           </div>
        </div>

在标题标签中有关闭按钮。它应该在第二个过程中可见，并且使验证用户不能添加超过五个课程。谁能帮我。在此先感谢:)

Answer 1

我认为这是你想要的脚本：

更新了脚本：

var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {

    if (courseCtr === 5) {
        return false;
    }

    var $row = $(this).closest('div.heading').parent();
    var $parent = $row.parent();
    var $clone = $row.clone();
    if ($clone.find('.heading .close').length === 1) {
        $clone.find('.heading .close').remove();
    }
    $clone.find('.heading h4').after('<button class="close">X</button>')
    $clone.find(':input').val('');
    $clone.find('textarea').val('');
    $row.find('.heading div').last().remove();

  //  $clone.find('.heading h4').remove();

    $parent.append($clone);
    courseCtr++;
    console.log('course counter: ' + courseCtr);
})

$(document).on('click', '.close', function(){
    var $buttonClone = $(this).parent().find('div').last().clone();
    $(this).parents('.row').prev().find('div.heading').append($buttonClone);
    $(this).parents('.row').remove();
    courseCtr--;
    console.log('course counter: ' + courseCtr);
})

更新后的提问：SEE FIDDLE HERE

Answer 2

我认为你需要稍微清理你的html标记，你的工作和代码将更容易和更容易理解。 1-seperate从表单内容添加更多课程按钮。 2 - 给出适当的类来形成容器。 3写一个简单的代码并完成。

修改后的HTML代码

<div class="col-md-12 col-sm-12 col-xs-12 forms-container">
    <div class="row single-form">
        <div class="heading">
            <h4>Courses Offred</h4>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Course  Title</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Fees</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Web Link</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Course Detail</span>
                <textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Course Type</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Course Duration</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Location</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Entry Requirement</span>
                <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="property-type">
                <span class="property-class">Certificates</span>
                <textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="alert alert-danger" style="display:none">
                Please fill all the fields.
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="add-more-class text-center ">
                <button class="btn btn-info add-more-course">Add More Course</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="add-more-class ">
                <button class="btn btn-info pull-right save-and-continue">Save and continue</button>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT CODE

var count = 0;
$('.add-more-course').click(function() {
    if (count < 4) {
        /* clone single .single-form container */
        var $new_form = $(this).parents('.forms-container').find('.single-form').first().clone(true);

        /* clear form data if any field is filled */
        $new_form.find('input,textarea').val("");

        /* remove heading text and enable close button */
        $new_form
            .find('.heading h4')
            .text("")
            .append('<button type="button" class="close">X</button>')
            .end()
            .find('.alert').css('display','none');

        /* append it before add more course button */
        $(this).parents('.forms-container').find('.single-form').last().after($new_form)
        count++;
    }
});

$('.forms-container').on('click', '.single-form .close', function() {
    $(this).parents('.single-form').remove();
    count--;
});

$('.forms-container').on('click', '.save-and-continue', function(){
    var $form_container = $(this).parents('.forms-container'),
        is_error = false;
    $form_container.find('.single-form').each(function(ind, form){
        var $form = $(form);
        $form.find('input,textarea').each(function(ind,ele){
            if($(ele).val() === "" || $(ele).val() === undefined){
                $form.find('.alert').css('display','block');
                is_error = true;
                return false;
            }
        });
    }); 

    if(!is_error) {
        // write ajax call or anything else what you want on success
    }
});

我希望它会对你有所帮助。

Answer 3

您可以从以下代码中获得帮助，

jQuery(document).delegate('a.add-record', 'click', function(e) {
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     element.attr('id', 'rec-'+size);
     element.find('.delete-record').attr('data-id', size);
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
   });

点击添加更多按钮，您需要创建第一种父div的克隆并附加容器。

Dynamically Add and Remove rows/html form in a Table Using jquery

如何在jquery中添加一个或多个克隆

3 个答案:

修改后的HTML代码

JAVASCRIPT CODE