How to take data from a form and place it inside a Javascript object?

Question

Hello,

I’m trying to understand calls via JS from a form (so speak?), but I’m having a few problems and would like a 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 answers of the form to end up there in the 'Full Name' fields and the others.

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

Answer 1

To do this you need to set a function to be called when submitting the form on action and assign a id/class for each element, this will facilitate the selection in Javascript. Then just take the value of the inputs, using the .value, follows code example:

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 completed with all information in the form!

Answer 2

I imagine you’re willing 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 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 make sure the console is recognizing the variable the way you want it.