動態字段表格

-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

動態字段表格

回答

相關問題