You use "bookForm" as the form id, but refer to "#taskForm" in the JS code. Perhaps that's the problem?
On Sat, Feb 27, 2016 at 2:16 PM, xristos sarantis <[email protected]> wrote: > i want to create html form with dynamic input javascript on django > but the javascript script not connect with the form > the code > > <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> > <script> > $(document).ready(function() { > // Initialize the date picker for the original due date field > $('#dueDatePicker') > .datepicker({ > format: 'yyyy/mm/dd' > }) > .on('changeDate', function(evt) { > // Revalidate the date field > $('#taskForm').formValidation('revalidateField', > $('#dueDatePicker').find('[name="dueDate[]"]')); > }); > > $('#taskForm') > .formValidation({ > framework: 'bootstrap', > icon: { > valid: 'glyphicon glyphicon-ok', > invalid: 'glyphicon glyphicon-remove', > validating: 'glyphicon glyphicon-refresh' > }, > fields: { > 'task[]': { > // The task is placed inside a .col-xs-6 element > row: '.col-xs-6', > validators: { > notEmpty: { > message: 'The task is required' > } > } > }, > 'dueDate[]': { > // The due date is placed inside a .col-xs-4 element > row: '.col-xs-4', > validators: { > notEmpty: { > message: 'The due date is required' > }, > date: { > format: 'YYYY/MM/DD', > min: new Date(), > message: 'The due date is not valid' > } > } > } > } > }) > > .on('added.field.fv', function(e, data) { > if (data.field === 'dueDate[]') { > // The new due date field is just added > // Create a new date picker > data.element > .parent() > .datepicker({ > format: 'yyyy/mm/dd' > }) > .on('changeDate', function(evt) { > // Revalidate the date field > $('#taskForm').formValidation('revalidateField', > data.element); > }); > } > }) > > // Add button click handler > .on('click', '.addButton', function() { > var $template = $('#taskTemplate'), > $clone = $template > .clone() > .removeClass('hide') > .removeAttr('id') > .insertBefore($template); > > // Add new fields > // Note that we DO NOT need to pass the set of validators > // because the new field has the same name with the original one > // which its validators are already set > $('#taskForm') > .formValidation('addField', $clone.find('[name="task[]"]')) > .formValidation('addField', $clone.find('[name="dueDate[]"]')) > }) > > // Remove button click handler > .on('click', '.removeButton', function() { > var $row = $(this).closest('.form-group'); > > // Remove fields > $('#taskForm') > .formValidation('removeField', $row.find('[name="task[]"]')) > .formValidation('removeField', > $row.find('[name="dueDate[]"]')); > > // 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/14774758-d10a-4fa3-b8cc-5b26730ff23e%40googlegroups.com > <https://groups.google.com/d/msgid/django-users/14774758-d10a-4fa3-b8cc-5b26730ff23e%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Nikolas Stevenson-Molnar | Software Engineer Conservation Biology Institute 541-368-5814 http://consbio.org http://databasin.org -- 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/CADW6jRnPL0hbGBey0oRLDgq7-QJFAKh3X2_xDo2j9wvBzNHuEA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
