Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
Lord Savage Zelebra

Script de duplicar tags e upload sem refresh

Perguntado por Lord Savage Zelebra

Pergunta

Lord Savage Zelebra    0

Lord Savage Zelebra
Postado

Boa noite pessoal,

 

Preciso de uma ajuda ai, estou aprendendo javascript, o meu código abaixo não está mostrando as fotos quando clico no botão de adicionar (clonar) campos. 

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="UTF-8">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<!-- SCRIPT DE CLONAGEM DE DIVs-->    
    <script type="text/javascript">
function duplicarCampos(){
    var clone = document.getElementById('origem').cloneNode(true);
    var destino = document.getElementById('destino');
    destino.appendChild (clone);
    var camposClonados = clone.getElementsByTagName('input');
    for(i=0; i<camposClonados.length;i++){
        camposClonados.value = '';
    }
}
function removerCampos(id){
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.childNodes[0]);
}
    </script>
    
<script type="text/javascript">
    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
        };
    }
</script>    
    
<body>

<div id="origem">
<!-- COMODOS-->
<select data-no-selected="Nothing selected" name="comodo" required="required" style="border:none;">
        <option value="Área de serviço">Selecione o comodo:</option>
        <option value="Área de serviço">Área de serviço</option>
        <option value="Área de churrasco">Área de churrasco</option>
        <option value="Área de lazer">Área de lazer</option>
        <option value="Banheiro">Banheiro</option>
        <option value="Copa">Copa</option>
        <option value="Cozinha">Cozinha</option>
        <option value="Garagem">Garagem</option>
        <option value="Quarto">Quarto</option>
        <option value="Quarto suíte">Quarto suíte</option>
        <option value="Sala">Sala</option>
        <option value="Sala de estar">Sala de estar</option>
        <option value="Sala de jantar">Sala de jantar</option>
        <option value="Sala conjulgada">Sala conjulgada</option>
        <option value="Terraço">Terraço</option>
        <option value="Outros">Outros</option>
</select>

<table>
<tr>
    <td>
        <img id="uploadPreview1" src="img/no_image.jpg" height="100" width="100" /><br />
        <input id="uploadImage1" type="file" name="p1" onchange="PreviewImage(1);" />
    </td>
    <td>
        <img id="uploadPreview2" src="img/no_image.jpg" height="100" width="100" /><br />
        <input id="uploadImage2" type="file" name="p2" onchange="PreviewImage(2);" />
    </td>
    <td>
        <img id="uploadPreview3" src="img/no_image.jpg" height="100" width="100" /><br />
        <input id="uploadImage3" type="file" name="p3" onchange="PreviewImage(3);" />
    </td>
    <td>
        <img id="uploadPreview4" src="img/no_image.jpg" height="100" width="100" /><br />
        <input id="uploadImage4" type="file" name="p4" onchange="PreviewImage(4);" />
    </td>    
</tr>
</table>

</div>
<div id="destino"></div>

 

<img width="40px" height="40px" src="img/add.jpg" style="cursor: pointer;" onclick="duplicarCampos();">
<img width="40px" height="40px" src="img/cross.jpg" style="cursor: pointer;" onclick="removerCampos(this);">
 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

William Bruno    1501

William Bruno
Postado

quando você está trabalhando com múltiplos elementos, é um erro querer usar IDs.
Você tem que navegar no DOM, veja: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="UTF-8">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<!-- SCRIPT DE CLONAGEM DE DIVs-->
    <script type="text/javascript">
function duplicarCampos(){
    var clone = document.getElementById('origem').cloneNode(true);
    var destino = document.getElementById('destino');
    destino.appendChild (clone);
    var camposClonados = clone.getElementsByTagName('input');
    for(i=0; i<camposClonados.length;i++){
        camposClonados.value = '';
    }
}
function removerCampos(id){
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.childNodes[0]);
}
    </script>
<script type="text/javascript">
    function PreviewImage($element) {
        var $img = $element.parentElement.querySelector('img');
        var oFReader = new FileReader();
        oFReader.readAsDataURL($element.files[0]);
        oFReader.onload = function (oFREvent) {
            $img.src = oFREvent.target.result;
        };
    }
</script>
<body>
<div id="origem">
<!-- COMODOS-->
<select data-no-selected="Nothing selected" name="comodo" required="required" style="border:none;">
        <option value="Área de serviço">Selecione o comodo:</option>
        <option value="Área de serviço">Área de serviço</option>
        <option value="Área de churrasco">Área de churrasco</option>
        <option value="Área de lazer">Área de lazer</option>
        <option value="Banheiro">Banheiro</option>
        <option value="Copa">Copa</option>
        <option value="Cozinha">Cozinha</option>
        <option value="Garagem">Garagem</option>
        <option value="Quarto">Quarto</option>
        <option value="Quarto suíte">Quarto suíte</option>
        <option value="Sala">Sala</option>
        <option value="Sala de estar">Sala de estar</option>
        <option value="Sala de jantar">Sala de jantar</option>
        <option value="Sala conjulgada">Sala conjulgada</option>
        <option value="Terraço">Terraço</option>
        <option value="Outros">Outros</option>
</select>
<table>
<tr>
    <td>
        <img src="img/no_image.jpg" height="100" width="100" /><br />
        <input type="file" name="p1" onchange="PreviewImage(this);" />
    </td>
    <td>
        <img src="img/no_image.jpg" height="100" width="100" /><br />
        <input type="file" name="p2" onchange="PreviewImage(this);" />
    </td>
    <td>
        <img src="img/no_image.jpg" height="100" width="100" /><br />
        <input type="file" name="p3" onchange="PreviewImage(this);" />
    </td>
    <td>
        <img src="img/no_image.jpg" height="100" width="100" /><br />
        <input type="file" name="p4" onchange="PreviewImage(this);" />
    </td>
</tr>
</table>
</div>
<div id="destino"></div>
<img width="40px" height="40px" src="img/add.jpg" style="cursor: pointer;" onclick="duplicarCampos();">
<img width="40px" height="40px" src="img/cross.jpg" style="cursor: pointer;" onclick="removerCampos(this);">
</body>
</html>

como você já tá com o jQuery ali em cima, poderia ter usado ele, em vez de fazer com js puro.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para lista de Perguntas Perguntas e respostas rápidas

  • Conteúdo Similar

    • GOD
      Colocar parte de dado de um form em outro (de um input para outro input)
      Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • eduardomr98
      Loop valores inseridos num input
      Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
    • rodrigomouran
      Preencher formulário após inserir dado no Input com PHP+AJAX
      Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

    • Kefatif
      input date com edição bloqueada (Apenas calendário)
      Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • Kefatif
      input date só com edição bloqueada (Apenas calendário)
      Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito