Jump to content
Sign in to follow this  
crebs86

Variável dinâmica

Recommended Posts

Boa noite Pessoal.

Gostaria de ajuda de vocês para poder completar meu código:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>postagem dinamica</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script>
$(document).ready(function marcar() {
    $("#grava").click(function() {
        var nome = $("#nome");
        var nomePost = nome.val();
        $.post("grava.php", {nome: nomePost},
        function(data){
         $("#resposta").html(data);
         }
         , "html");
    });
});

</script>
</head>
<body>

    <form action="#" onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="hidden" name="" id="nome" />
        <input type="button" value="Enviar" id="grava" />
    </form>
    <span id="resposta"></span>

    <form action="#" onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="button" value="Enviar" id="grava" />
    </form>
    <span id="resposta1"></span>

    <form action="#" onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="button" value="Enviar" id="grava" />
        </form>
    <span id="resposta2"></span>


    <form action="#" onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="button" value="Enviar" id="grava" />
    </form>
    <span id="resposta3"></span>

</body>
</html>

No caso eu tornarei os ID's "nome" dos formulários dinâmicos, porém preciso que o Javascript responda dinamicamente aos meus ID's para que não seja necessário eu repetir o JS para cada form que eu precisar.
OBS.:
- Da forma que esta somente o primeiro formulário funciona e os outros ficam sem reposta;
- Os IDs resposta é onde aparece o resultado da query do JS;
- Usei números em todas as as IDs, mas não sei como fazer o JS responder cada form.

Desde já agradeço.

Share this post


Link to post
Share on other sites

Eu acho que não rola assim, se for tudo igual ele sempre só vai pegar o primeiro.

 

No caso você poderia pensar em passar um parâmetro pra identificar qual formulário você está utilizando.

 

Nessa própria função marcar(n) passar um parâmetro qualquer;

 

E nos forms pode chama-la: onsubmit="marcar(1)", onsubmit="marcar(2)"...

 

Não sei se é o que vc precisa mas pode ajudar.

Share this post


Link to post
Share on other sites

Eu acho que não rola assim, se for tudo igual ele sempre só vai pegar o primeiro.

 

No caso você poderia pensar em passar um parâmetro pra identificar qual formulário você está utilizando.

 

Nessa própria função marcar(n) passar um parâmetro qualquer;

 

E nos forms pode chama-la: onsubmit="marcar(1)", onsubmit="marcar(2)"...

 

Não sei se é o que você precisa mas pode ajudar.

Obrigado pela resposta!

Pensei em usar id="1", id="2", id="3", etc. ao invés de id="grava" e fazer algo semelhante com com id="resposta" e o JS aceitar esses diferentes valores. Mas não sei como

Share this post


Link to post
Share on other sites

tenta assim mano, primeiro tira o action já q não está sendo usado, depois troca o evento para click no button, passando = marcar(id do input nome) , obs: muda os id's ex: nome1,nome2, nome3

 

lá você da getElementById(id que recebeu).

Opá, uma luz no fim do tunel. Valeu junior.vieira, postarei o resultado aqui. Mas como ficaria o

<span id="resposta"></span>

?

Share this post


Link to post
Share on other sites

O que você quer que apareça nele?

Aparece o resultado da Query do arquivo grava.php.

$.post("grava.php", {nome: nomePost}

Lembro que esta retornando apenas o referente ao primeiro FORM.

Share this post


Link to post
Share on other sites

Se entendi bem, torço para que não, pq voc não precisa de js para fazer isso que está fazendo, creio que vá precisar enviar um response com json_encode no php para capturar via ajax e tratar o json...posso estar errado, ainda não entendi o pq está fazendo com js...

Tenho uma página que faz marcação de agenda. Então dependendo dos horários vagos terei de 01 a 40 FORMS.

O que eu quero fazer é marcar em cada horário sem precisar sair página como num POST de php comum (claro que tenho opção do ACTION ser na mesma página, mas não é disso que preciso).

o que está pegando é que só funciona com o primeiro FORM.

Share this post


Link to post
Share on other sites

Então se quer preencher o valor do <span id="resposta3"></span> com js, vai ter que usar json com requisição ajax. Ao que eu tinha entendido nesse meu comentário. Não entendo o pq estaria pegando apenas o primeiro form se voc muda o evento para o button de click ao invés de submit de form, passando o #id nome correspondente ao form.. seria melhor você postar todo seu código.

 

Opá, uma luz no fim do tunel. Valeu junior.vieira, postarei o resultado aqui. Mas como ficaria o

<span id="resposta"></span>

?

Share this post


Link to post
Share on other sites

Muito obrigado pelo apoio e paciência. Eu tentei fazer o seguinte:

No JS:

<script>
$(document).ready(function marcar() {
var grava = document.getElementById('grava').value;
    $(grava).click(function() {
        var nome = document.getElementById('nome').value;
        var nomePost = nome;
        $.post("grava.php", {nome: nomePost},
        function(data){
var res = document.getElementById('res').value;
         $(res).html(data);
         }
         , "html");
    });
});
</script>

No HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>postagem dinamica</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

</head>
<body>

    <form onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="hidden" name="res" id="res" value="#resposta" />
        <input type="hidden" name="gravar" id="gravar" value="grava" />
        <input type="button" value="Enviar" id="grava" />
    </form>
    <span id="resposta"></span>

    
    <form onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="hidden" name="res" id="res" value="#resposta1" />
        <input type="hidden" name="gravar" id="gravar" value="grava1" />
        <input type="button" value="Enviar" id="grava1" />
    </form>
    <span id="resposta1"></span>

    <form onsubmit="marcar()" method="post">
        <label>Nome: <input type="text" name="nome" id="nome" /></label>
        <input type="hidden" name="res" id="res" value="#resposta2" />
        <input type="hidden" name="gravar" id="gravar" value="grava" />
        <input type="button" value="Enviar" id="grava2" />
    </form>
    <span id="resposta2"></span>

</body>
</html>

Então observe no código acima que criei dois "hidden", sendo

<input type="hidden" name="res" id="res" value="#resposta2" />

Este acima para definir em qual span aparecerá a resposta, neste caso <span id="resposta2"></span>.

<input type="hidden" name="gravar" id="gravar" value="grava" />

E este para definir de qual FORM pedar os dados.

Mas então só o primeiro tem resposta. Se apago o primeiro somente o que seria o segundo tem resposta. Tentei usar o ONCLICK e remover o <FORM>, entretanto o resultado foi o mesmo: só o primeiro FORM da retorno.

 

O código esta todo aí. O arquivo grava.php chamado pelo JS não importa, pois é uma query do MySQL de SELECT que posso mudar para UPDATE e INSERT de acordo com a necessidade. No exemplo da aplicação que estou desenvolvendo ele retorna um select e noutra fará um INSERT.

Share this post


Link to post
Share on other sites

Apenas um exemplo para você "abrir a mente"

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>postagem dinamica</title>
<script src="jquery.js"></script>
<script>
function marcar(nome){
		var string = document.getElementById(nome).value;
		alert(string);
	}
</script>
</head>
<body>
    <form method="post">
        <label>Nome: <input type="text" name="nome1" id="nome1" /></label>
        <input type="hidden" name="res" id="res" value="#resposta" />
        <input type="hidden" name="gravar" id="gravar" value="grava" />
        <input type="button" value="Enviar" id="grava" onclick="marcar('nome1')"> 
    </form>
    <span id="resposta"></span>

    
    <form method="post">
        <label>Nome: <input type="text" name="nome2" id="nome2" /></label>
        <input type="hidden" name="res" id="res" value="#resposta1" />
        <input type="hidden" name="gravar" id="gravar" value="grava1" />
        <input type="button" value="Enviar" id="grava1"onclick="marcar('nome2')">
    </form>
    <span id="resposta1"></span>

    <form method="post">
        <label>Nome: <input type="text" name="nome3" id="nome3" /></label>
        <input type="hidden" name="res" id="res" value="#resposta2" />
        <input type="hidden" name="gravar" id="gravar" value="grava" />
        <input type="button" value="Enviar" id="grava2" onclick="marcar('nome3')">
    </form>
    <span id="resposta2"></span>
</body>
</html>

Share this post


Link to post
Share on other sites

preencha o input e dê enviar para ver o resultado...

Você é fo**. Essa linha que você me salvou:

<input type="button" value="Enviar" id="grava" onclick="marcar('nome1')">

Manjo nada de JS, melhor de tudo que aprendi algumas coisas hoje sobre passar ID's.

Muito obrigado mesmo! Hoje sou uma pessoa menos ignorante que ontem (pelo menos em javascript).

Sucesso cara!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.