1

Bom dia Pessoal. Este é um trabalho que estou tentando fazer.Este código cria clones dos componestes, que assim podem ser arrastados até determinado local(Podem ser arrastado clicando na borda azul).Mas tenho um problema para pegar os valor do campo TEXTAREA e dos outros campos mas se auguem conseguir o do text área eu consigo fazer o resto.(Se acharem melhor posso anexar no Google driver ja com as bibliotecas)

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>

1 Resposta 1

1

Você pode fazer um loop com .each pegando os valores dos elementos pelo name exceto do primeiro de onde veio o clone:

// VALORES DOS TEXTAREAS CLONADOS
$("textarea[name='thiago[]']:not(:first)").each(function(){
   console.log($(this).val());
});
5
  • Boa tarde amigo.Deu certo Muito obrigado pela ajuda.Fico agradecido.
    – thiago
    26/01/2018 às 16:55
  • Boa noite dvd poderia me ajudar novamente.Como pego qual radio esta selecionado pelo o usuário.perceba que ao clicar no componente é pedido a quantidade que sera usado .É pedido tmb um nome para ser usado no atributo (name="Valor fornecido pelo usuario").Estou fazendo desta forma mais sem exito. var var_name = $("input[name='radios']:checked").val();.Aqui estou considerando que o ussuario digitou o nome radios no nome ,ficando name='radios'.
    – thiago
    26/01/2018 às 22:28
  • posso fazer uma nova publicação se preferir
    – thiago
    26/01/2018 às 22:29
  • @thiago Como vc está fazendo essa verificação? Onclick?
    – Meu ovo
    26/01/2018 às 22:44
  • Acabei de descobrir como fazer.Obrigado.
    – thiago
    26/01/2018 às 22:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .