генерировать динамические c вложенные текстовые поля, используя javascript - PullRequest
Новая
       5

генерировать динамические c вложенные текстовые поля, используя javascript

0 голосов
/ 20 января 2020

У меня есть следующие javascript, которые добавляют текстовые поля в div, когда я нажимаю добавить, он отлично работает при добавлении и удалении. Но мне нужно немного стилизовать его и вложить div, но я не знаю как. 

<script type="text/javascript">
function GetDynamicTextBox(value) {
    return('<input type="text" name="events[0].Key" value="" /><input type="text" name="events[0].Value.StartDate" value=""/><button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>');
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("divcontent").appendChild(div);
    iterateBoxes();
}
function RemoveTextBox(div) {
    document.getElementById("divcontent").removeChild(div.parentNode);
    iterateBoxes();
}
function iterateBoxes() {
    // Set unique names of each textbox
    var children = document.getElementById("divcontent").children; 
    for (i = 0; i < children.length; i++)
    {
        var el = children[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';
    }
}


<div id="divcontent"></div>

Приведенный выше код генерирует это html .. 

<div id="divcontent">

<div id="events[0].Key">
    <input type="text" name="events[0].Key" value="">
    <input type="text" name="events[0].Value.StartDate" value="">

    <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
</div>

    <div id="events[1].Key">
    <input type="text" name="events[1].Key" value="">
    <input type="text" name="events[1].Value.StartDate" value="">

    <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
</div>

Если возможно, мне бы хотелось, чтобы вместо этого генерировалось следующее html, которое работает как при добавлении, так и при удалении с помощью функций javascript. 

            <div id="divcontent">
            <div id="content[0]" class="form-group">
                <label class="col-md-3 control-label" for="example-text-input">Name</label>
                <div class="col-md-3">
                    <input type="text" name="events[0].Key" value="" />
                </div>
                <div class="col-md-3">
                    <input type="text" name="events[0].Value.StartDate" value="" />
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
                </div>
            </div>

            <div id="content[1]" class="form-group">
                <label class="col-md-3 control-label" for="example-text-input">Name</label>
                <div class="col-md-3">
                    <input type="text" name="events[1].Key" value="" />
                </div>
                <div class="col-md-3">
                    <input type="text" name="events[1].Value.StartDate" value="" />
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
                </div>
            </div>
        </div>

Все Помощь в том, как этого добиться, очень ценится.

...