Duvida sobre JS e JSON

Front-end JavaScript
,
#1

Boa tarde amigos do GUJ!

Então, estou precisando criar um html com um form onde terão 2 campos Login e senha.

é apenas uma questão de implementação, não será usado para muita coisa.

Preciso fazer este campo de login e senha seja transformado em um objeto JSON e que quando clique em enviar apareça um alert com os valores de login e senha digitados.

fiz meu code mais ou menos assim:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="css.css" type="text/css">
  <script type="text/javascript" src="./pub/jquery-1.2.6.min.js"></script>
  <script type="text/javascript">
  	var teste1 = document.getElementById('login');
	var teste2 = document.getElementById('senha');
    var json = '{"login": teste1,"senha": teste2}';
    var dados = JSON.parse(json);
    function alerta()
        {
        alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        }
  </script>
</head>

<body>
  <div class="py-5 w-100 h-100">
    <div class="container">
      <div class="row">
      <div class="col-md-12">
          <form class="" method="post" name="form">
            <div class="form-group"> <label>Login</label>
              <input type="login" placeholder="Digite seu login" name="login" class="form-control" id="login"> </div>
            <div class="form-group"> <label>Senha</label>
              <input type="password" placeholder="Digite sua senha" name="senha" class="form-control" id="senha"> </div>
            <button type="submit" class="btn btn-primary" onClick="alerta()">Entrar</button>
            <button type="reset" class="btn btn-cancel btn-warning">Cancelar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
</html>

se alguém puder me auxiliar…

eu consigo fazer o alert sair se eu não instanciar a variável dentro do objeto JSON, caso eu instancie a var teste1 e var teste2 ele apenas faz o envio do form e não abre o alert.

quando eu coloco assim:

var json = '{"login": "teste1","senha": "teste2"}';
    var dados = JSON.parse(json);
    function alerta()
        {
        alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        }

é impresso na tela o alert Login: teste1 Senha: teste2

quando coloco assim:

  <script type="text/javascript">
  	var teste1 = document.getElementById('login');
	var teste2 = document.getElementById('senha');
    var json = '{"login": teste1,"senha": teste2}';
    var dados = JSON.parse(json);
    function alerta()
        {
        alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        }
  </script>

o alert não aparece mais…

fico no aguardo.
Atenciosamente.
Matheus Saad.

#2

Coloque seu script acima do fechamento da tag , o que acontece no caso é.

O script executa antes da página ser renderizada.

como no segundo caso você depende dos elementos, ele não encontra.

Uma dica, use o console para ver o que ele está retornando e manda o log, bora 0/

1 curtida
#3

desculpa, não entendi muito bem o que é para fazer…

boto o script a cima do fechamento de qual tag?

entendi o que está acontecendo, só não entendi onde colocar o script

#4 
<body>

...

<script>
//faz algo
</script>
</body>
1 curtida
#5

certo, fiz a troca, coloquei no final da body, porém ainda não retornou nada…

o alert não aparece na realidade…

#6

e o console, está mostrando algo?
Se estiver usando chrome, só aperta f12 e procurar a aba console

#7

<button type="submit" class="btn btn-primary" onClick="alerta()">Entrar</button>

é onclick, não onClick, com maiúsculo, salve engano ele não pega.

#8

sim

Uncaught SyntaxError: Unexpected token l in JSON at position 10 at JSON.parse (<anonymous>) at test.html:36

#9

tem que pegar os valores dos elementos e jogar na variável

var teste1 = document.getElementById('login').value;
var teste2 = document.getElementById('senha').value;
#10

certo, arrumei pq tava dando o erro do JSON.parse
ele n tava reconhecendo esse comando, botei JSON.stringify(json)

código ficou assim:

				var login = document.getElementById('login').value;
				var senha = document.getElementById('senha').value;
    			var json = '{"login": login,"senha": senha}';
    			var dados = JSON.stringify(json);
    			function alerta()
        		{
        			alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        		}
#11

agora está aparecendo no Chrome o box da alert, porém ta login: undefined
senha: undefined

#12

Coloca parse, parse transforma em objeto JS. stringify transforma objeto em string json kkk

#13

ah ta entendi kkkkkk

#14

certo, está assim o code então:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="css.css" type="text/css">
  <script type="text/javascript" src="./pub/jquery-1.2.6.min.js"></script>
</head>

<body>
  <div class="py-5 w-100 h-100">
    <div class="container">
      <div class="row">
      <div class="col-md-12">
          <form class="" method="post" name="form">
            <div class="form-group"> <label>Login</label>
              <input type="login" placeholder="Digite seu login" name="login" class="form-control" id="login"> </div>
            <div class="form-group"> <label>Senha</label>
              <input type="password" placeholder="Digite sua senha" name="senha" class="form-control" id="senha"> </div>
            <button type="submit" class="btn btn-primary" onclick="alerta()">Entrar</button>
            <button type="reset" class="btn btn-cancel btn-warning">Cancelar</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
  <script type="text/javascript">
				var login = document.getElementById('login').value;
				var senha = document.getElementById('senha').value;
    			var json = '{"login": login,"senha": senha}';
    			var dados = JSON.parse(json);
    			function alerta()
        		{
        			alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        		}
	
 </script>
</body>

</html>
#15

agora não abre mais o alert do final :smile: kkk

e ta dando este erro:

VM133:1 Uncaught SyntaxError: Unexpected token l in JSON at position 10 at JSON.parse (<anonymous>) at test.html:36 (anonymous) @ test.html:36

#16

Só um minuto

#17 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
  <div class="py-5 w-100 h-100">
    <div class="container">
      <div class="row">
      <div class="col-md-12">
          <form class="" method="post" name="form">
            <div class="form-group"> <label>Login</label>
              <input type="text" placeholder="Digite seu login" name="login" class="form-control" id="login"> </div>
            <div class="form-group"> <label>Senha</label>
              <input type="password" placeholder="Digite sua senha" name="senha" class="form-control" id="senha"> </div>
            <button type="submit" class="btn btn-primary" onclick="alerta()">Entrar</button>
            <button type="reset" class="btn btn-cancel btn-warning">Cancelar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
				var login = document.getElementById('login');
				var senha = document.getElementById('senha');
				
    			
    
    			function alerta()
        		{
        			var json = {"login": login.value, "senha": senha.value};
        			json = JSON.stringify(json); //transforma em string josn 
    				var dados = JSON.parse(json); //transforma em objeto javascript
        			alert("Login: " + dados.login + "\nSenha: " + dados.senha);
        		}
 </script>
</body>
</html>
1 curtida
#18

és o cara meu amigo, estou aprendendo ainda sobre json e javascript, muito obrigado pela ajuda!!

#19

Bem longe disso amigo, tenho muito chão pela frente kkk. Bora!!! e bons estudos 0//