How to dynamically add and remove fields generated via Cakephp?

Question

How to dynamically add and remove fields generated via Cakephp?

Asked 9 years, 10 months ago

Viewed 521 times

1

Hello.

I have a <select> which is powered by database data. I need to manipulate this select and multiply it if the user wishes to send two different data. How the <option>s depend on the data coming from the database, I do not have the option to use $(elemento).append('<select>...</select>');

I also need to change the "name" attribute of each <select> to be able to pick up the values correctly in the $this->request->data.

<div class="form-group">
    <div class="col-lg-11">
        <select class="form-control name="data[Model][0][sl_dinamica]" select-a-ser-replicada">
            <option value="1">Valor 1</option>
            <option value="2">Valor 2</option>
            <option value="3">Valor 3</option>
        </select>
        <span class="btn-apagar"></span>
    </div>
    <div class="col-lg-1">
        <span class="btn-adicionar"></span>
    </div>
</div>

Already have some HTML? then the idea is when the user presses a button -> create a copy of select on the page with another name?

– Sergio

2014/12/11 at 12:56
This is exactly the idea. The HTML of this is generated by a Cakephp helper. Either way, it’s a simple select.

– rafaslide

2014/12/11 at 13:03
And do you already have some HTML we can use in the answer? (and by the way you are doing this with AJAX? if yes put this code too)

– Sergio

2014/12/11 at 13:05
<div class="form-group"> <div class="col-lg-5"><select class="form-control"> <option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select><span class="btn-apagar"></span></div>
</div>

– rafaslide

2014/12/11 at 13:11
Good! can you put this HTML in the question? so others can see it too. They should stay inside the same <form> I suppose. To have a new select in this HTML it should be inside <div class="col-lg-5"> also?

– Sergio

2014/12/11 at 13:17
It can be inside, outside, anywhere. My greatest difficulty is to be able to replicate this select with another "name".

– rafaslide

2014/12/11 at 13:24

Show 1 more comment

1 answer

Browser other questions tagged php javascript jquery cakephp

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2014-12-11T13:28:47+00:00

You can use it like this:

$('.btn-duplicar').on('click', function(){
    var select = $(this).parent().prev().find('select:first'); // ir buscar o original
    var novoSelect = select.clone().attr('name', 'novo_select'); // criar uma cópia e mudar o nome
    $(select).after(novoSelect); // inserir depois do select original
});

Some decisions you’ll have to make:

in the example I gave "new_select" as the name of the new select. You can change how you will generate this if you generate more than one duplicate
I created a button to duplicate it, you may have another that did not show in the question. If it is not select brother/sibling tell me to adjust the answer.
if the "duplicate" button itself is added dynamically you should use delegation. You can replace the first line with:

$(document).on('click', '.btn-duplicar', function(){

How to dynamically add and remove fields generated via Cakephp?

1 answer

Example: http://jsfiddle.net/yx3t70dp/2/