Ir para conteúdo

Arquivado

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

lvsis

Adicionar input text

Recommended Posts

E ai pessoal, to com um pequeno problema: tenho um script que ao clicar em um botão ele adiciona um alguns inputs pelo XMLHttpRequest, mas ao adicionar os novos campos ele zera o valor dos anteriores. Tem algum jeito de parar com isso? 

 

Obs.: Se tiver alguma coisa errada com o post me avisem pois esse é meu primeiro aqui no fórum, valeu. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

script

 

function mais_prod(){
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('lista_prod').innerHTML += this.responseText;
        }
    };
    xmlhttp.open("GET","os_prod.php",true);
    xmlhttp.send();    
}

 

php

 

                        <table border="0" id="lista_prod">
                            <th> Qtd </th> <td> <input id="qtd" type="text" name="qtd[]" size="5" onblur="total()" /> </td>
                            <th> Produto </th>
                            <td>
                                <select name="produto">
                                    <option value=""> Selecione um produto </option>';
                                                                         
                                    do{
                                        echo'<option value="'.$busca1['cod_produto'].'"> '.$busca1['produto'].' </option>';
                                    }while($busca1=mysqli_fetch_assoc($sql1));
                            
                                echo'
                                </select>
                            </td>
                            <th> Valor Unt </th> <td> <input id="valor_u" type="text" value="100.00" size="15" readonly /> </td>
                            <th> Valor Total </th> <td> <input id="valor_t" type="text" size="15" readonly /> </td>
                            <tr />
                        </table>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja se você mata a charada:

Isolei pra ti...

 

https://fiddle.jshell.net/86hft92v/

 

 

----

 

 

<!SPOILER ->  ((((( Alguem me ensina a colocar essa tag nesse editor novo do forum??!  #toPutão ))))

 

Basicamente acontece assim.

 

No momento em que o Js efetua essa instrução:

    document.getElementById('lista_prod').innerHTML += toInsert;

o value que estava nos campos pela 'Memoria ram' do browser são perdidos.

 

Pois você recria 100% o nodeHTML naquele momento (apaga, concatena e joga)

 

Então basicamente você poderia fazer algo +/- assim:

 

 

function mais_prod(){
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            
			//document.getElementById('lista_prod').innerHTML += this.responseText;			
			var divByAjax = document.createElement('div');
			divByAjax.innerHTML = this.responseText;
			document.getElementById('lista_prod').appendChild(divByAjax);
        }
    };
    xmlhttp.open("GET","os_prod.php",true);
    xmlhttp.send();    
}

Demo live do exemplo sem perder a referencia na memoria do input-> value

https://fiddle.jshell.net/86hft92v/1/

 

 

Obs: Na proxima usa o botão 'Código' para código ;)

 

 

 

 

Obs²:

Reparei que você está utilizando tentativas de crowssbrowser.

Cara para a sua sanidade, se o suporte ao IE6+ é necessário... vai de jQuery sem medo e seja feliz ;)

https://blog.jquery.com/2012/08/09/jquery-1-8-released/

(Ps apesar q ... quem usa IE6 hoje em dia?!) 0.0000001%?

 

Tenho um tutorial explicando como usar ajax do jQuery:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ficou faltando a explicação principal haha

 

innerHTML  : popula todo o conteudo do html...

<div>{TUDO QUE VAI AQUI É O HTML}</div>

 

Já a função appendChild()

Insere no ultimo node do html 

<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
 {aqui seria o ultimo node}
</div>

Ou seja no meu exemplo com o uso do appendChild() por nenhum momento alteramos os inputs já criados, apenas 'empurramos' os novos campos logo abaixo deles.

 

 

Se isto estiver confuso (filho/dom/node/child)

Leia esse artigo q clareia bastante a respeito do JS no browser:

https://tableless.com.br/tenha-o-dom/

 

 

Para mais informações:

https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • 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>  
    • 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!!
    • 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!

    • 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.