动态字段表格

-1

我正在努力让自己的表格变为动态，您可以在其中添加字段。我试了下面的代码，但点击，不会触发任何东西，当我点击添加按钮时，没有任何反应，任何帮助？动态字段表格

HTML

<form id="bookForm" method="post" class="form-horizontal"> 
    <div class="form-group"> 
    <label class="col-xs-1 control-label">Book</label> 
    <div class="col-xs-4"> 
    <input type="text" class="form-control" name="book[0].title" placeholder="Title" /> 
    </div> 
    <div class="col-xs-4"> 
    <input type="text" class="form-control" name="book[0].isbn" placeholder="ISBN" /> 
    </div> 
    <div class="col-xs-2"> 
    <input type="text" class="form-control" name="book[0].price" placeholder="Price" /> 
    </div> 
    <div class="col-xs-1"> 
    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button> 
    </div> 
    </div> 

    <!-- The template for adding new field --> 
    <div class="form-group hide" id="bookTemplate"> 
    <div class="col-xs-4 col-xs-offset-1"> 
    <input type="text" class="form-control" name="title" placeholder="Title" /> 
    </div> 
    <div class="col-xs-4"> 
    <input type="text" class="form-control" name="isbn" placeholder="ISBN" /> 
    </div> 
    <div class="col-xs-2"> 
    <input type="text" class="form-control" name="price" placeholder="Price" /> 
    </div> 
    <div class="col-xs-1"> 
    <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-xs-5 col-xs-offset-1"> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </div> 
    </div> 
    </form>

这是我的javascript，我包括在主体的底部

$(document).ready(function() { 
    var titleValidators = { 
    row: '.col-xs-4', // The title is placed inside a <div class="col-xs-4"> element 
    validators: { 
    notEmpty: { 
    message: 'The title is required' 
    } 
    } 
    }, 
    isbnValidators = { 
    row: '.col-xs-4', 
    validators: { 
    notEmpty: { 
    message: 'The ISBN is required' 
    }, 
    isbn: { 
    message: 'The ISBN is not valid' 
    } 
    } 
    }, 
    priceValidators = { 
    row: '.col-xs-2', 
    validators: { 
    notEmpty: { 
    message: 'The price is required' 
    }, 
    numeric: { 
    message: 'The price must be a numeric number' 
    } 
    } 
    }, 
    bookIndex = 0; 

    $('#bookForm') 
    .formValidation({ 
    framework: 'bootstrap', 
    icon: { 
    valid: 'glyphicon glyphicon-ok', 
    invalid: 'glyphicon glyphicon-remove', 
    validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
    'book[0].title': titleValidators, 
    'book[0].isbn': isbnValidators, 
    'book[0].price': priceValidators 
    } 
    }) 

    // Add button click handler 
    .on('click', '.addButton', function() { 
    bookIndex++; 
    var $template = $('#bookTemplate'), 
    $clone = $template 
    .clone() 
    .removeClass('hide') 
    .removeAttr('id') 
    .attr('data-book-index', bookIndex) 
    .insertBefore($template); 

    // Update the name attributes 
    $clone 
    .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end() 
    .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end() 
    .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end(); 

    // Add new fields 
    // Note that we also pass the validator rules for new field as the third parameter 
    $('#bookForm') 
    .formValidation('addField', 'book[' + bookIndex + '].title', titleValidators) 
    .formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators) 
    .formValidation('addField', 'book[' + bookIndex + '].price', priceValidators); 
    }) 

    // Remove button click handler 
    .on('click', '.removeButton', function() { 
    var $row = $(this).parents('.form-group'), 
    index = $row.attr('data-book-index'); 

    // Remove fields 
    $('#bookForm') 
    .formValidation('removeField', $row.find('[name="book[' + index + '].title"]')) 
    .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]')) 
    .formValidation('removeField', $row.find('[name="book[' + index + '].price"]')); 

    // Remove element containing the fields 
    $row.remove(); 
    }); 
    });

我包括这些库的jQuery

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>

来源

2016-07-21 LaravelOnly

你的形式抛出错误：Uncaught TypeError：$（...）.formValidation不是函数

您是否记得除了jQuery库之外还要添加以下脚本？

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script> 
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

来源

2016-07-21 15:21:26 GunWanderer

由于事实上，是的，我有所有的人除了bootstrap.min.js，现在我谓添加它，我没有提到，我有一个模式里面的形式，所以现在当我点击它刚刚打开的模式按钮，然后在一眨眼的过程中自行关闭......这可能是一个jQuery或其他库冲突吗？因为自从我使用blad以来，我有许多人。 – LaravelOnly

我真的不知道，因为我试图复制你在codepen上发布的代码，它的工作就像它应该为我。也许你可以看看它，看看你自己的代码中的差异：[http://codepen.io/GunWanderer/pen/QEmmJo](http://codepen.io/GunWanderer/pen/QEmmJo） – GunWanderer

是的，谢谢你，这是我猜jQuery的冲突， – LaravelOnly

动态字段表格

回答

相关问题