Pegando valores de input com JS e jQuery

pegando valores de input com js e jquery
Seja para fazer uma verificação num formulário ou para uma interação com valores vindos do usuário, este recurso pode ser bem útil. Hoje vou aproveitar para testar uma nova forma de demonstrar o código.

Como pegar os valores do input com JavaScript ?

Vamos começar montando nosso formulário.

Com o form montado vamos para o javascript:

var form = document.getElementById('form1');
var campo1 = document.getElementById('campo1');
var campo2 = document.getElementById('campo2');

form.addEventListener('submit', function(e) {
    // alerta o valor do campo
    alert(campo1.value+'-.-'+campo2.value);
    // impede o envio do form
    e.preventDefault();
});

linha 2-4 : Resgatamos o id dos formulário e alimentamos as variáveis para poder manipular os elementos.
linha 6 : Adicionamos ao formulário o evento disparado pelo submit.
linha 8 : O alert ser ve apenas para printar o resultado o campo1 é a variável que representa o id campo1 ela poderia ter qualquer nome. O “.value” é o que diz ao código que desejamos pegar o atributo valor do input.
linha 10 : Nessa linha como o comentário já explica nós impedimos que o formulário seja enviado.

Usando e o jQuery ?

var form2 = document.getElementById('form2');

form2.addEventListener('submit', function(e) {
    // alerta o valor do campo
    alert($("#campo3").val()+'-.-'+$("#campo4").val());
    // impede o envio do form
    e.preventDefault();
});

Note que desta vez pegamos apenas o valor do formulário, pois o jQuery já pega o valor do campo sem a necessidade de jogar numa variavel antes e depois pedir o valor dela.

E por fim, vamos chamar uma função que pega esses valores através do jQuery.

function myFunction(){
    alert($("#campo3").val()+'-.-'+$("#campo4").val());
}

Logo abaixo você verá o código rodando, ainda estou testando esse recurso mas acho que vai ser um bom acréscimo as nossas postagens.

Forte abraço e até mais 😀