Question

在我的Django应用程序中，我有'rooms'字段的表单，它是整数字段。根据房间的数量，我想为每个房间的“成人”和“儿童”生成另外两个字段。我看到了很多关于如何在java脚本上执行此操作的示例，因此我尝试自己编写脚本，但它不起作用。并且浏览器没有错误。我是java脚本的新手，你能告诉我我做错了吗

Here is my html file

<div class="fieldWrapper">
    <label for="id_rooms">Rooms:</label>
    <input id="id_rooms" type="number" name="rooms" min="1">
</div>

js file:

$(function() {

    var newFields = $('');
    $('#id_rooms').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n + 1) {
            if (n > newFields.length) {
                addFields(n);
            } else {
                removeFields(n);
            }
        }
    });

    function addFields(n) {
        for (form_num = newFields.lenght; form_num < n; form_num++) {
            $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
            $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
        }
    }

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }
});

感谢您的帮助。

Answer 1

HTML -

<div class="fieldWrapper">
<label for="id_rooms">Rooms:</label>
<input id="id_rooms" type="number" name="rooms" min="1">
</div>

<div class="extrafieldWrapper">    
</div>

Javascript -

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
}
} );

Answer 2

HTML

<div class="fieldWrapper">
    <label for="id_rooms">Rooms:</label>
    <input id="id_rooms" type="number" name="rooms" min="1">
</div>
<div class="extrafieldWrapper"></div>

JS

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    $('.extrafieldWrapper').html('');
}

});

这是一个小提琴：https://jsfiddle.net/ymz60pjm/

根据值动态添加表单字段

2 个答案: