am trying make form dynamic,where can add fields yourself. tried code below,but click,doesn't trigger anything,nothing happens when click on add button,any ?
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> <!-- template 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> and javascript included in bottom of body
$(document).ready(function() { var titlevalidators = { row: '.col-xs-4', // title placed inside <div class="col-xs-4"> element validators: { notempty: { message: 'the title required' } } }, isbnvalidators = { row: '.col-xs-4', validators: { notempty: { message: 'the isbn required' }, isbn: { message: 'the isbn not valid' } } }, pricevalidators = { row: '.col-xs-2', validators: { notempty: { message: 'the price required' }, numeric: { message: 'the price must 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 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 pass validator rules new field 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 fields $row.remove(); }); }); i included these libraries jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
your form threw error: uncaught typeerror: $(...).formvalidation not function
did remember add following scripts in addition jquery library?
<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> 
Comments
Post a Comment