Topic: how to append an existing form with select form fields
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 can you provide a snippet for it please? where exactly should I do that ?
nskalis commented 5 years ago
I am afraid that this is the case: https://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values
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 5 years ago
Yes. We know that. We're working on it
nskalis commented 5 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 5 years ago
We already have the task to fix this. We'll take care of everything. This will be fix in next release
nskalis commented 5 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 5 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"]')
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.12.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 5 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();