Блог

Главная - Вопросы по программированию - Динамически добавлять переключатель в форму JSP

Динамически добавлять переключатель в форму JSP

#java #jquery #spring-mvc #jsp #radio-button

#java #jquery #spring-mvc #jsp #переключатель

Вопрос:

Я пытался динамически добавлять дополнительные поля в форму. Однако, как и ожидалось, создаются только текстовые / числовые поля. Переключатели были созданы, но список выбора является общим для всех объектов. Также обратите внимание, что я закрываю ФОРМУ после закрытия скрипта, иначе при вводе ФОРМЫ path будет выдана ошибка. Есть идеи, чего мне не хватает? Заранее благодарю вас.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-5 p-1">
    <form:form method="POST" modelAttribute="investmentForm" class="p-4">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="form-group">
                        <label><h5><b>Invoice ID</b></h5></label>
                        <form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />
                    </div>
                    <div class="form-group">
                        <label><h5><b>Amount</b></h5></label>
                        <form:input path="amountForm" name="amount[]" type="number" class="form-control m-input"  step=".01" required="required" min="1" max="10000"/>
                    </div>
                    <label><h5><b>Currency</b></h5></label>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>
                        </label>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
        <button type="submit" class="btn mt-4 btn-block p-2 btn-success shadowed">Invest!</button>


<script type="text/javascript">
    // add row
    var counter = 1;
    $("#addRow").click(function () {
        counter  = 1;
        var html ='<div id="inputFormRow">'
             '<div class="form-group">'
             '<label><h5><b>Invoice ID</b></h5></label>'
             '<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />'
             '</div>'
             '<div class="form-group">'
             '<label><h5><b>Amount</b></h5></label>'
             '<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input"  step=".01" required="required" min="1" max="10000"/>'
             '</div>'
              '<div class="form-group">'
             '<label><h5><b>Currency</b></h5></label>'
             '<div class="form-check form-check-inline">'
             '<label class="form-check-label">'
             '<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>'
             '</label>'
             '</div>'
             '<div class="input-group-append">'
             '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>'
             '</div>'
             '</div>'

        $('#newRow').append(html);
    });

    // remove row
    $(document).on('click', '#removeRow', function () {
        $(this).closest('#inputFormRow').remove();
    });
</script>
</form:form>

Текущее поведение

Комментарии:

1. Это происходит потому, что имя переключателя остается тем же, когда вы добавляете новую строку i,.e: currency вам нужно присвоить переключателю другое имя. Чтобы он отличался от других переключателей.