javascript – using the jquery.clonea plugin hook

Question:

I'm using the jquery.cloneya plugin which is a plugin to clone forms that were already included in a template of an admin panel I'm using. I didn't quite understand how to use this plugin's hook to increment the name of an input whenever it is cloned.

For example: I click the "+" sign and clone one or two fields together. These two fields have their name incremented like this > " name='produtos[qtd][2]' ", with the index of the first input starting with " [qtd][0] ".

I asked the plugin developer if it was possible to clone and increment the names and he replied as follows:

"Yes, it is. Ideally, due to the nature of cloned form elements, the names should be name[], so that the values ​​can be processed as arrays. If you need to increment name and/or value, you can plug into the custom event – clone_form_input .

See: https://github.com/yapapaya/jquery-cloneya/blob/master/jquery-cloneya.js#L119 .

Answer:

Unfortunately the plugin documentation is very weak, making it very difficult to use.

Anyway I created an example of how to create a form with pure Javascript. I think you will have to end up accepting this solution anyway.

HTML

<button id='botao'>
    Adicione um formulário
</button>

<div id='formulario'>
    <form id='form' action='#'>
        <input type='submit' id='submit'></input>
    </form>
</div>

Javascript

var sequencia = 0;

var form = document.getElementById('form');
var submit = document.getElementById('submit');

var cria_formulario = function() {

    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', 'entrada[' + sequencia + ']');
    input.setAttribute('value', 'entrada[' + sequencia + ']');
    sequencia += 1;

    form.removeChild(submit);
    form.appendChild(input);
    form.appendChild(document.createElement('br'));
    form.appendChild(submit);
};

var botao = document.getElementById('botao');
botao.onclick = function() {
    cria_formulario();
}

JSFiddle

See on JSFiddle .

Scroll to Top