Get Values from Cloned Fields Created Through JQUERY UI

1

Good morning everyone. This is a work I am trying to do. This code creates clones of the componestes, so they can be dragged to a certain location (they can be dragged by clicking on the blue border). But I have a problem getting the values from the TEXTAREA field and the other fields but (if you feel better I can attach to the driver already with the libraries)

             TODO supply a title                                    

    <link href="../jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
    <script src="../jquery-ui-1.12.1/jquery-ui.min.js"></script>


    <style type="text/css">

        *{
            margin: 0px;

            border:0px;

        }
        body{
            background-color: rgb(255,255,255);
            font-family: 'Gloria Hallelujah', cursive;
        }

        body>header{
            background-color:#F5F5F5;

            height: 83px;

            box-shadow:1px 1px 5px black;
        }

        #logo img{


            border: 1px solid black;
            box-shadow: 1px 1px 1px black;
        } 


        #logo{ 
            display: inline-block;
            margin-left:80px;
            margin-top: 14px;
        }





        #divBusca{
            background-color:#E0EEEE;
            border:solid 1px black;
            border-radius:10px;
            width:450px;
            height:32px;
            margin-left: 400px;
            margin-top: -48px;
        }

        #txtBusca{
            float:left;
            background-color:transparent;
            padding-left:5px; 
            font-size:18px;
            border:none;
            height:32px;
            width:370px;
        }

        #btnBusca{
            border:none;
            float:right;
            height:32px;
            border-radius:0 7px 7px 0;
            width:70px;
            font-weight:bold;
            background:rgb(240,240,240);
        }

        #construirPerguntas h1 { text-align: center; margin: 0; }
        #construirPerguntas{


            width: 500px;
            height: 500px;
            background-color:rgb(240,240,240);

            margin-top: 50px;
            padding: 5px;


        }

        #componentes{
            display: inline-block;
            margin-left:345px;
            margin-top:10px;

            width: 660px;
            height:100px;
            box-shadow:1px 1px 2px black;
        }
        #componentes h1{
            text-align: center;
        }
        .formulario{

            border:2px solid black;  
            box-shadow:1px 1px 5px black;

            display:inline-block;


        }


        .draggable,.botaoSubmit {
            display: inline-block;
            box-shadow:1px 1px 2px black;
        }



        .draggable:before, 
        .draggable:after, 
        .draggable>:first-child:before, 
        .draggable>:first-child:after {
            position:absolute;
            width:10px; height:10px;
            border-color:blue;
            border-style:solid;
            border-radius:12px ;
            content: ' ';
        }

        .draggable:before {top:0;left:0;border-width: 0px 0 0 0px}
        .div:after {top:0;right:0;border-width: 4px 4px 0 0}

        .draggable>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
        .draggable>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}


        .botaoSubmit{
            position:relative;
            margin-top:360px;
            margin-left:600px;
        }


        form{
            width:700px;
            height: 410px;   }

        #dimensao{

            margin-left:320px;
            margin-top:30px;
            height: 900px; 
            width:900px;
        }

        .estiloPassarCima{

            background-color: #fffa90; 

        }

    </style>

</head>
<body>


    <header>
        <div id="logo">

            <figure>

                <img  <img src="../imagens/logotipo.png">

            </figure> 

        </div>

        <div id="divBusca">

            <input type="text" id="txtBusca" placeholder="Buscar..."/>
            <button id="btnBusca">Buscar</button>
        </div>


    </header>



    <section>


        <header>



            <div id="componentes">
                <h1>Componentes</h1>
                <label >Radio: </label><div  class="draggable" class="ui-widget-content" ><input type="Radio" name="radios" disabled="true" value=""> </div>
                <label>CheckBox: </label><div  class="draggable" class="ui-widget-content"><input type="checkbox" disabled="true"></div>
                <label>TextArea:</label><div  class="draggable" class="ui-widget-content"> <textarea  id="text" disabled="true" name="thiago[]"></textarea></div>
                <label>Text Edition:</label><span contenteditable="false" class="draggable" class="ui-widget-content" >text Edition</span>  


            </div>


        </header>





    </section>

    <section id="dimensao">

        <div  class="formulario" class="ui-widget-content">
            <form>

                <div class="botaoSubmit" class="ui-widget-content"><input type="button" id="botao"></div>
            </form>


        </div>


    </section>




    <script>
        $(function () {



            var quantidadePerguntaRadio = 0;
            var nomeConjuntoPergunta = 'null';
            var valorRadio = 0;

            $(".draggable").draggable(
                    {
                        helper: "clone"

                    }
            );


            $(".draggable").mousedown(
                    function (e) {


                        if ($(this).children().prop("type") == "radio") {



                            while ((quantidadePerguntaRadio == 0 || quantidadePerguntaRadio == 'null')) {
                                nomeConjuntoPergunta = 'null';

                                quantidadePerguntaRadio = prompt("Digite a quantidade de Button Radio que usará para está pergunta.");

                                nomeConjuntoPergunta = prompt("Digite um nome para o conjunto de perguntas?.");


                            }
                            valorRadio = prompt("Digite valor para esse campo.");

                            $(this).children().prop("name", nomeConjuntoPergunta);



                            quantidadePerguntaRadio--;


                        }
                    }


            );






            $(".botaoSubmit").draggable();


            $("form").resizable(
                    {
                        animate: true,
                        containment: "#dimensao"
                    });

            $(".formulario").droppable({
                accept: ".draggable",
                drop: function (event, ui) {//evento o evento .ui elemento recebido

                    var new_signature = $(ui.helper).clone();
                    // var new_signature = $(ui.helper).clone();
                    new_signature.draggable();//estou dizendo que o clone pode ser arrastado



                    new_signature.draggable().children().attr('disabled', false);
                    new_signature.draggable().children().css({"resize": "both"});


                    $(new_signature.draggable()).mouseup(function (e) {//para excluir ao clicar botao direito

                        if (e.button === 2) {
                            $(new_signature).remove();

                        }

                    });

                    if (new_signature.draggable().prop("tagName") === "SPAN") {

                        new_signature.draggable().attr('contenteditable', 'true');


                    }
                    //new_signature.draggable() uso o choldren porque o que esta sendo arrastado é uma div e dentro da divi é que esta o componente input


                    if ((new_signature.draggable().children().prop("type") === "radio")) {

                        if (valorRadio != null) {
                            //new_signature.draggable().prop("value", valorRadio);
                            new_signature.draggable().append("<span>" + valorRadio + "</span>");
                          }
                        valorRadio = null;
                    }
                    $(this).append(new_signature);//estou add o elemnto

                    $(ui.helper).remove();//removendo para não criar clones.

                }
            });






        });

    </script>

</body>

    
asked by anonymous 26.01.2018 / 17:15

1 answer

1

You can loop with .each by taking the values of the elements by name except from the first where the clone came from:

// VALORES DOS TEXTAREAS CLONADOS
$("textarea[name='thiago[]']:not(:first)").each(function(){
   console.log($(this).val());
});
    
26.01.2018 / 17:36