Load a Form every time I create an element

Navigation
0

Good morning, the question is this. I have a small Form that is not more than a Form Generator, each time I select a component and I believe it is shown in another DIV, this form grants a random own ID, but when I want to create another element, this element is assigned with the same ID as the previous element.

My question is, could you help me.

1) As I do so that when creating another element, it is added with another ID.

I tried the Jquery .load function, but for some reason every time you refresh my form, it loses all its Javascript functionality that allows you to create the elements, validate and deliver the ID.

Any way to solve it? Thanks in advance.

Here the Code.

The Function of the Button when filling in the Form: 

/*botón de añadir*/
$("#btn_add").on("click",function(){
    var f = $("#miCampo");
    f.append("<div class='field'><label>"+$("#nom_camp").val()+": <input placeholder='"+$("#plch").val()+"' type='"+$('#select_opc').val()+"' name='"+(galpha+"_"+$("#nom_camp").val())+"' id='"+(galpha+"_"+$("#nom_camp").val())+"' class='"+(galpha+"_"+$("#nom_camp").val())+"'></label></div>");
    plch.prop('disabled', true);
    nc.prop('disabled', true);
    nc.val("");
    plch.val("");
    $("#nom_camp").val("");
    $("#id_id").text("");
    $("#id_name").text("");
    $("#id_class").text("");
            $("#form_refresh").load(location.href + " #form"
            });
})

The Function that generates the random ID 

/*función que genera una letra y numero de forma aleatoria*/
function generarAlphanumerico(r)
{
var arreglo = new Array();
var r = Math.floor(Math.random()*100) +1;
for(var i=65; i<=90; i++)
    {arreglo[i] = String.fromCharCode(i);}

return arreglo[Math.floor(Math.random() * (arreglo.length-65)+65)]+''+r;

}

Form: 

<!--Área de trabajo -->
                <div class="ui stripe community vertical segment">
                    <div class="ui two column center divided very relaxed stackable grid container">
                        <div class="row">
                            <div class="column">

                            <!-- área donde se visualizará el formulario -->
                            <form class="ui form">
                                <h4>Mi formulario</h4>
                                <div id="miCampo"></div>
                                <input type="button" value="Enviar" class="ui button" id="btn_submit_generado">
                            </form>

                            </div>

                            <div class="column" id="form_refresh">
                                <form action="" class="ui form" id="form">
                                <h4 class="ui dividing header">
                                    Seleccionar
                                </h4>
                                <div class="field">
                                    <label>Tipo de campo:</label>
                                    <select class="ui fluid dropdown" id="select_opc">
                                        <option value="0">Seleccionar</option>
                                        <option value="label">Etiqueta</option>
                                        <option value="text">Caja de texto</option>
                                        <option value="textarea">Cuadro de texto</option>
                                        <option value="checkbox">Casilla de verificaci&oacute;n</option>
                                        <option value="radio">Bot&oacute;n de radio</option>
                                        <option value="select">Desplegable</option>
                                        <option value="date">Fecha</option>
                                        <option value="number">Número</option>
                                    </select>
                                </div>
                                <div class="field">
                                    <label>Nombre del campo</label>
                                    <input type="text" id="nom_camp">
                                </div>
                                <div class="field">
                                    <label>id: <span id="id_id"></span></label>
                                </div>
                                <div class="field">
                                    <label>Name: <span id="id_name"></span></label>
                                </div>
                                <div class="field">
                                    <label>Class: <span id="id_class"></span></label>
                                </div>
                                <div class="field">
                                    <label>Placeholder:</label>
                                    <input type="text" id="plch">
                                </div>
                                <div class="ui green vertical animated button" id="btn_add" style="float:right;">
                                    <div class="hidden content">Add</div>
                                    <div class="visible content">
                                        <i class="add icon"></i>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
    
asked by KuraiDark23 10.10.2016 в 12:42
source

3 answers

0

I want to offer the solution that I got for sure someone else will serve you. The truth is I started to think a lot about refreshing (refreshing) the DIV, and nothing with another solution.

But it gets a function to solve everything. Passing the function by jquery, so that the field again execute the function that generated the ID. 

/************************************************
GENERAR ID ALEATORIO AL HACER CLICK O TAB(FOCUS)
************************************************/
$("#nom_camp").on("click focus", function(){
    galpha = generarAlphanumerico();
    $("#nom_camp").off("click focus");
    console.log("El ID es: "+galpha);
});
    
answered by 11.10.2016 / 01:06
source
1

Greetings, I think this is another possible solution, and maybe it helps someone: 

<script>
    var contador = 1;

/*botón de añadir*/
$("#btn_add").on("click",function(){
    var f = $("#miCampo");
    galpha = 'campoAdicional_'+contador;
    contador = contador+1;
......
</script>

The idea is to have a global variable with a numerical initial value, which will serve as a suffix to name the id's that will be added. Each time you click to add, the id is formed, with a prefix (additionalField_), and the value of the global variable. After this, one (1) is added to the global variable; in this way, when a new element is added, it will have a different id from the previous one.

I hope someone can find something useful in this solution.

    
answered by 12.10.2016 в 17:37
0

When I want to create new elements but with a different id I use the jQuery function clone () . In this way I can clone already existing and visible elements or create "templates" to copy (hidden with display: none or similar) that are thus easily editable (being HTML / CSS and not part of the Javascript ). The base code is as follows: 

$(template_id).clone(true).appendTo($(template_id).parent()).attr('id', nuevo_id);

Note that I add the copy to the same place where the original is but you can add it where you want by changing the .appendTo () .

parameter

The variables are: 

- template_id: el identificador de lo que quiero clonar (y aquí tb a donde se copia).
- nuevo_id: el nuevo id que le quiero dar a la copia.

To the same jQuery line you can add for example .addClass('_bloque_clonado_') , .fadeIn('fast') , etc, etc ... directly, to adapt the cloner to each need.

In general I think it is quite customizable and simple at the same time. I hope you find it useful.

    
answered by 12.10.2016 в 20:46
How to create a JDBC pool connection in glassfish? Mysql one to many relationship (bring the information at the same time)