form dynamic javascript input in django

[xristos sarantis]

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>

[Nikolas Stevenson-Molnar]

You use "bookForm" as the form id, but refer to "#taskForm" in the JS code. Perhaps that's the problem?

--
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 django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
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.
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