Ir para conteúdo
GOD

Colocar parte de dado de um form em outro (de um input para outro input)

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá!
Não entendi.
Se puder, ajude-nos a enteder melhor:
A) Os formulários estão em arquivos diferentes?
B) O sr. quer que os dados digitados em um, apareçam simultaneamente no outro?
C) Mas cada um vai estar aberto em uma aba diferente do browser?
D) Ou vão estar abertos em devices diferentes, em redes diferentes(um form aberto do Brasil e o outro no Japão)?

Compartilhar este post


Link para o post
Compartilhar em outros sites

A) Os formulários estão em arquivos diferentes?

Sim. O primeiro form está no index.htm e o segundo form está no reserva.html
B) O sr. quer que os dados digitados em um, apareçam simultaneamente no outro?

Sim. Quando eu preencher o form do index.html (form 1) e clicar em pesquisa ele encaminhe para a página reserva.html (form 2) os dados que foram digitados no index.html (form 1).
C) Mas cada um vai estar aberto em uma aba diferente do browser?

Sim.
D) Ou vão estar abertos em devices diferentes, em redes diferentes (um form aberto do Brasil e o outro no Japão)?

Não. Vão estar aberto em uma aba diferente do browser?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Certo.
Então o sr. tem duas abas abertas.
E o que digitar na aba X, precisa aparecer na aba Y?

E isso serve pra q?
O que isso resolve?
Pq não pode resolver na mesma aba, igual a grande maioria dos sites do mundo?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então o sr. tem duas abas abertas.

Sim.


E o que digitar na aba X, precisa aparecer na aba Y?

Sim.

 

E isso serve pra q?

Isso é um formulário de hospedagem o form1(aba x) a pessoa faz uma consulta e essa consulta leva os dados pra o form2(aba y).


O que isso resolve?

Isso resolver o fato de a pessoa fazer a reserva sabendo que tem a opção na consulta. 

 
Pq não pode resolver na mesma aba, igual a grande maioria dos sites do mundo?

No form1 na verdade é só uma consulta que leva ao form 2. No form 2 é que na verdade vai resolver tudo como todos os sites do mundo. Então o form 1 na verdade ele é somente um link que leva ao form 2 os dados (data da chegada e saída, adultos e criança)

 

 

 

Na imagem abaixo explica mais um pouco

 

 

explicação2.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ôppa!
Acho q estou quase entendendo. Na verdade, não há necessidade de duas abas abertas simultaneamente.
pode ser até na mesma aba. Assim como o colega sugeriu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Além do mais não dar para usar duas abas, a não ser que desenvolva o próprio browser para isso, o crie um extensão para algum já existente.

Isso envolve segurança pessoal e nenhum navegador dá suporte nativo a manipulação de abas, por causa das arbtrariedades nocivas dessa ação.

 

Em outro contexto como disse no mesmo tópico sobre a mesma questão elvantada pelo mesmo usuário, a coisa pode ser feita em um único formulário.

Hora que se em form 1 definine dados >>>> envia os mesmos dados para form 2 que por sua vez envia para form 3 etc...

A qualquer parte desse processo os dados do form 1 ou 2 sei lá; podem ser alterados, então para que usar mais de um  formulário?

Um vez que os dados podem ser substituídos/apagados removendo completamente a lógica de usar mais de um formulário.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá!

 

Então qual seria a forma?

 

Desde já agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nao sei se entende direito a pergunta

 

Mais deve ser isso

 

form1

<body onload="save()" onunload="save()">
        <form name="form1" id="form1" action="form2.html" method="post">
            <input id="campo1" name="campo1" value="ValorCampo1"><br>
            <br>
            <button type="submit" id="form1-submit">Confirmar</button>
        </form>
    </body>

javascript

<script>
function gohome(){
    window.location='form1.html';
}
function save(){
    window.localStorage.setItem('campo1', $('#campo1').val());
}
function load(){
    $('#campo2').val(window.localStorage.getItem('campo1'));
}
function erase(){
    window.localStorage.removeItem('campo1');
}
</script>

Form2

 

 

<body onload="load()" onunload="erase()">
        <form name="form2" id="form2" action="form1.html" method="get">
            <input id="campo2" name="campo2"><br>
            <br>
            <button type="button" id="form2-submit" onclick="gohome()">Confirmar</button>
        </form>        
    </body>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Jack Oliveira

 

Não está passando os dados.

 

Criei um HTLM e dei para ele o nome form1.html

Criei um segundo HTML e dei para ele o nome form2.html

 

Eu clico em confirmar no form1 e os dados não passa para o form2. 

 

 

A pergunta é: esses dados é pra colocar tudo no mesmo form em uma página html? Ou é pra colocar em páginas diferentes exemplo form1 na pagina1 e form2 na pagina2.

 

Porque do jeito que está o código não está passando para o próximo form.

 

Desde já agradeço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por luiz monteiro
      Bom dia!
       
      A questão é a seguinte, tenho o seguinte form 
       
      <form onsubmit="return false;" action="./busca.php" method="post" name="buscar" id="buscar">
       
                 <input type="text" name="texto">
       
                <button>Executa</button>
       
      </form>
       
      Que está funcionando perfeitamente com a seguinte estrutura do script abaixo
       
        var form = document.getElementById('buscar');
       
        form.addEventListener('submit', function(e)
        {
            e.preventDefault();
       });
       
       
      O que preciso, é saber como submeter esse mesmo formulário ao clicar em button fora do form sem modificar esse script?
       
      <button id="fora_do_form">Submeter o form</button>
       
       
      Agradeço desde já!
       
       
    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • 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.