hello
i want ta create a html form using javascript dynamic input
but the javascript script not working,where is wrong ?
my code html form...
<form id="bookForm" method="post" class="form-horizontal">{% csrf_token %}
<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
<script>$(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();
});});</script>
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/a541281f-31b9-4b08-9f29-b39d010d13a8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
