how to append an existing form with select form fields

Topic: how to append an existing form with select form fields

nskalis free asked 4 years ago

Given some html, a form named inputPrefixListIx and a button named addPrefixListIx

<div id="divinputPrefixListIx" name="divinputPrefixListIx">
    <form name="inputPrefixListIx" class="inputPrefixListIx">
        <div class="row">

                <div class="col-12">
                    <select name="spec" class="mdb-select md-form colorful-select dropdown-primary">
                        <option value="" disabled selected>spec</option>
                        <option value="replace" data-secondary-text="">replace</option>
                        <option value="delete" data-secondary-text="">delete</option>
                    </select>
                    <label class="mdb-main-label">spec</label>
                </div>

            </div>

        </div>
        <br><br><br>
    </form>

    <div class="col-12">
        <button type="button" name="addPrefixListIx" id="addPrefixListIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
    </div>

</div>

I would like to clone/duplicate the form when the user clicks on the addPrefixListIx button using jQuery I guess.

The jQuery used (and works partially) looks like this:

<script type="text/javascript" src="/static/js/blueprints.js"></script>

jQuery(($) => {

    // PrefixListIx
    $('#addPrefixListIx').click(function() {
        $('.inputPrefixListIx:first').clone().insertAfter('.inputPrefixListIx:last');
    });
    if (sessionStorage.getItem('PrefixListIx') !== null) {
        $('#divinputPrefixListIx').addClass('d-none');
    }
    else {
        $('#divmanifestPrefixListIx').addClass('d-none');
    }
    $('#delPrefixListIx').click(function() {
        sessionStorage.removeItem('PrefixListIx');
        $('#divinputPrefixListIx').toggleClass('d-none');
        $('#divmanifestPrefixListIx').toggleClass('d-none');
    });

});

What doesn't work is that the options of the select form fields do not appear.

Would you be so kind to advise what I am doing wrong and how to fix this ?

Grzegorz Bujański staff commented 4 years ago

Hi. After add new select you should initialize him. First you should destroy current elements: $('.mdb-select').materialSelect({destroy: true}); and initialize all selects again $('.mdb-select').materialSelect();

Add comment

nskalis free answered 4 years ago

0 0 Best answer

<p>doing it like this:</p>

<pre class="prettyprint"><code>$('#addAsPathGroupIx').click(function() {
        $('.inputAsPathGroupIx:first').clone().insertAfter('.inputAsPathGroupIx:last');
        $('.mdb-select').materialSelect({destroy: true});
        $('.mdb-select').materialSelect();
    });
</code></pre>

<p>totally destroys the appearance of it</p>

<p>the full snippet is here</p>

<div class="col-12">
                <select name="unit" class="mdb-select md-form colorful-select dropdown-primary">
                    <option value="" disabled selected>unit</option>
                    <option value="attributes" data-secondary-text="">attributes</option>
                </select>
                <label class="mdb-main-label">unit</label>
            </div>

<div class="col-12">
                <select name="spec" class="mdb-select md-form colorful-select dropdown-primary">
                    <option value="" disabled selected>spec</option>
                    <option value="replace" data-secondary-text="">replace</option>
                    <option value="delete" data-secondary-text="">delete</option>
                </select>
                <label class="mdb-main-label">spec</label>
            </div>

<div class="col-12">
                <select name="groups" class="mdb-select md-form colorful-select dropdown-primary" multiple>
                    <option value="" disabled selected>groups</option>
                    <option value="BOGON_ASNS_IN">BOGON_ASNS_IN</option>
                    <option value="BOGON_ASNS_OUT">BOGON_ASNS_OUT</option>
                </select>
                <label class="mdb-main-label">groups</label>
            </div>

<select name="target" class="mdb-select md-form colorful-select dropdown-primary" multiple>
                    <option value="" disabled selected>target</option>
                    <optgroup label="peering">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'peering' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                    <optgroup label="business">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'business' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                    <optgroup label="cdn">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'cdn' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                </select>
                <label class="mdb-main-label">targets</label>

</div>

</div>
        <br><br><br>
    </form>
</code></pre>

Please insert min. 20 characters.

doing it like this:

$('#addAsPathGroupIx').click(function() {
        $('.inputAsPathGroupIx:first').clone().insertAfter('.inputAsPathGroupIx:last');
        $('.mdb-select').materialSelect({destroy: true});
        $('.mdb-select').materialSelect();
    });

totally destroys the appearance of it

the full snippet is here

    <form name="inputAsPathGroupIx" class="inputAsPathGroupIx">
        <div class="row">

            <div class="col-12">
                <select name="unit" class="mdb-select md-form colorful-select dropdown-primary">
                    <option value="" disabled selected>unit</option>
                    <option value="attributes" data-secondary-text="">attributes</option>
                </select>
                <label class="mdb-main-label">unit</label>
            </div>

            <div class="col-12">
                <select name="spec" class="mdb-select md-form colorful-select dropdown-primary">
                    <option value="" disabled selected>spec</option>
                    <option value="replace" data-secondary-text="">replace</option>
                    <option value="delete" data-secondary-text="">delete</option>
                </select>
                <label class="mdb-main-label">spec</label>
            </div>

            <div class="col-12">
                <select name="groups" class="mdb-select md-form colorful-select dropdown-primary" multiple>
                    <option value="" disabled selected>groups</option>
                    <option value="BOGON_ASNS_IN">BOGON_ASNS_IN</option>
                    <option value="BOGON_ASNS_OUT">BOGON_ASNS_OUT</option>
                </select>
                <label class="mdb-main-label">groups</label>
            </div>

            <div class="col-12">
                <button type="button" class="btn btn-block btn-flat text-right" data-toggle="collapse" data-target="#optAsPathGroupIx" aria-expanded="false" aria-controls="optAsPathGroupIx"><i class="fas fa-ellipsis-v"></i></button>
            </div>

            <div id="optAsPathGroupIx" name="optAsPathGroupIx" class="col-12 collapse">

                <select name="target" class="mdb-select md-form colorful-select dropdown-primary" multiple>
                    <option value="" disabled selected>target</option>
                    <optgroup label="peering">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'peering' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                    <optgroup label="business">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'business' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                    <optgroup label="cdn">
                        {% for target in params.pipeline.target %}
                        {% if target.functionality == 'cdn' %}
                        <option value="{{ target.host_name }}__{{ target.functionality }}">{{ target.host_name }}</option>
                        {% endif %}
                        {% endfor %}
                    </optgroup>
                </select>
                <label class="mdb-main-label">targets</label>

            </div>

        </div>
        <br><br><br>
    </form>

Grzegorz Bujański staff commented 4 years ago

Yes. We know that. We're working on it

nskalis free commented 4 years ago

@Grzegorz Bujański thanks. is there an estimate for the fix ? should I open a gitlab issue or there is one ?

Grzegorz Bujański staff commented 4 years ago

We already have the task to fix this. We'll take care of everything. This will be fix in next release

nskalis free commented 4 years ago

@Grzegorz Bujański thank you for looking at it, i downloaded the new version yesterday, and experimenting with it today. I can confirm that cloning forms works now, what it doesn't work is the submission of the forms (only the first one gets considered). I would appreciate your help and advise on this one. I have sent you a unicast email with an example. Please le the know if you have received that.

Grzegorz Bujański staff commented 4 years ago

It's look like document.forms ['inputAsPathGroupIx'] get only first element, but you can get all elements using document.forms or using jQuery: $('form[name="inputAsPathGroupIx"]')

Add comment

nskalis free answered 4 years ago

0 0 Best answer