How do I get data from a form and put it inside a JavaScript object?

Question

How do I get data from a form and put it inside a JavaScript object?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Hello,

I'm trying to understand JS calls from a form (so what?), but I'm having a few issues and would like some help.

My form is:

Nome: <input type="text" name="name">
E-mail: <input type="email" name="email">
CPF: <input type="number" name="cpf">
Meio de Pagamento: <input type="text" name="pagamento">
<input type="submit" value="Enviar">

And a part of the JS code that will handle the information:

   enviar.compra({                                 
            name: 'Nome Completo',
            email: '[email protected]',
            data: {                                     
                cpf: 'CPF',                  
                pagamento: 'Cartão VISA'      
            }
   });

I would like the form responses to stop there in the 'Full Name' fields and the others.

How to do this, and how do I call js in the form?

javascript html

asked by anonymous 26.07.2017 / 04:08

2 answers

Migrations adds the letter S to the table name How to perform a SQL command that takes several lines

score 1 · Answer 1

I imagine you're trying to do the following:

  <input type="text" id="name" placeholder="Nome">
  <input type="email" id="email" placeholder="Email">
  <input type="number" id="cpf" placeholder="CPF">
  <input type="text" id="pagamento" placeholder="Pagamento">
  <input onclick="enviarCompra()" type="submit" id="Enviar" placeholder="Enviar">

Get the values you typed in the fields:

function enviarCompra(){
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var cpf = document.getElementById('cpf').value;
var pagamento = document.getElementById('pagamento').value;
};

To check add the line in the send function ():

console.log(name);

And check if the console is recognizing the variable the way you want it.

score 1 · Answer 2

To do this you need to set a function to be called when sending the form in action and assign a id/class to each element, this will make it easier to select in JavaScript. Then just get the value of the inputs, using .value , follow example code:

HTML:

<form action="javascript: enviar();">
    Nome: <input type="text" class="js-input-name" name="name">
    E-mail: <input type="email" class="js-input-email" name="email">
    CPF: <input type="number" class="js-input-cpf" name="cpf">
    Meio de Pagamento: <input type="text" class="js-input-pagamento" name="pagamento">
    <input type="submit" value="Enviar">
</form>

JavaScript:

function enviar(){
    //Variaveis que recebem valor dos inputs e depois são atribuidas ao JSON
    var nomeValue = document.querySelector(".js-input-name").value;
    var emailValue = document.querySelector(".js-input-email").value;
    var cpfValue = document.querySelector(".js-input-cpf").value;
    var pagamentoValue = document.querySelector(".js-input-pagamento").value;

    var formValue = {                                 
        name: nomeValue,
        email: emailValue,
        data: {                                     
            cpf: cpfValue,                  
            pagamento: pagamentoValue      
        }
    };
    console.log(formValue);
}

Now the object formValue is filled with all form information!