0

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 ?

EDIT: I encountered this Clone isn't cloning select values which suggests a fix available here https://github.com/spencertipping/jquery.fix.clone but I don't know how to use it given the provided example, can somebody please advise ?

3
  • 1
    using jQuery(document).ready(function($) { seems not to solve the issue Commented Feb 18, 2020 at 13:12
  • I remember it happened to me once can you check with this $("#addPrefixListIx").on("click", function(){ ...} and let me know if that works. Commented Feb 18, 2020 at 15:38
  • @Manjuboyz unfortunately, no luck. But, please do see the new 'edit'... Commented Feb 18, 2020 at 20:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.