How to bring the typed data and store it in a json to do the processing afterwards?

Question

I would like to take the data typed in my form and put it in a json, but I don’t know how to do it. My HTML form is as follows:

<form action="" class="formContent" id="myform">
  <div class="row form-input" id="form">
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="nome">Nome
                        <input type="name" id="nome" name="nome" placeholder="Digite seu nome" title="">
                      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="email">Email
                        <input type="email" id="email" name="email" placeholder="Digite seu email">
                      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="telefone">Telefone
                        <input type="text" id="telefone" name="telefone" placeholder="Digite seu telefone">
                      </label>
    </div>
  </div>
  <div class="row form-Msg" id="form_two">
    <div class="col-lg-12 col-xs-12" style="padding: 0;">
      <label for="">Mensagem
                        <textarea id="mensagem" name="mensagem" rows="5" placeholder="Digite sua mensagem"></textarea>
                      </label>
    </div>
    <div class="col-lg-2">
      <input type="submit" id="enviar" name="enviar" onclick="salvar();" value="Enviar">
      <!-- <button href="#" class="FormSing" type="button" name="button">Enviar</button> -->
    </div>
  </div>
  <!-- <button class="FormSing" type="button" name="button">Enviar</button> -->
</form>

Answer 1

you can serialize your form with the help of Formdata.:

var serialize = function (form) {
  var json = {};
  var data = new FormData(form);
  var keys = data.keys();
  for (var key = keys.next(); !key.done; key = keys.next()) {
    var values = data.getAll(key.value);
    json[key.value] = values.length == 1 ? values[0] : values;
  }  
  return json;
}

var form = document.querySelector("form");
var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function (event) {
  event.preventDefault();
  var json = serialize(form);	
  console.log(json);
});

<form action="" class="formContent" id="myform">
  <div class="row form-input" id="form">
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="nome">Nome
        <input type="name" id="nome" name="nome" placeholder="Digite seu nome" title="" value="a">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="email">Email
        <input type="email" id="email" name="email" placeholder="Digite seu email" value="[email protected]">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="telefone">Telefone 1
        <input type="text" id="telefone1" name="telefones" placeholder="Digite seu telefone" value="123456">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="telefone">Telefone 2
        <input type="text" id="telefone2" name="telefones" placeholder="Digite seu telefone" value="654321">
      </label>
    </div>
  </div>
  <div class="row form-Msg" id="form_two">
    <div class="col-lg-12 col-xs-12" style="padding: 0;">
      <label for="">Mensagem
        <textarea id="mensagem" name="mensagem" rows="5" placeholder="Digite sua mensagem">abcdef</textarea>
      </label>
    </div>
    <div class="col-lg-2">
      <input type="submit" id="enviar" name="enviar" value="Enviar">
    </div>
  </div>
</form>

now a version with jQuery.:

var serialize = function (form) {
  var data = form.serializeArray();
  var json = {};
  data.forEach(function (item) {
    if (!json[item.name]) {
      json[item.name] = item.value;
      return;
    }    
    if (!Array.isArray(json[item.name]))
      json[item.name] = [json[item.name]];
    json[item.name].push(item.value);
  });
  return json;
}

var form = $("form");
var enviar = $("#enviar");
enviar.on("click", function (event) {
  event.preventDefault();
  var json = serialize(form);	
  console.log(json);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" class="formContent" id="myform">
  <div class="row form-input" id="form">
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="nome">Nome
        <input type="name" id="nome" name="nome" placeholder="Digite seu nome" title="" value="a">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="email">Email
        <input type="email" id="email" name="email" placeholder="Digite seu email" value="[email protected]">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="telefone">Telefone 1
        <input type="text" id="telefone1" name="telefones" placeholder="Digite seu telefone" value="123456">
      </label>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-12">
      <label for="telefone">Telefone 2
        <input type="text" id="telefone2" name="telefones" placeholder="Digite seu telefone" value="654321">
      </label>
    </div>
  </div>
  <div class="row form-Msg" id="form_two">
    <div class="col-lg-12 col-xs-12" style="padding: 0;">
      <label for="">Mensagem
        <textarea id="mensagem" name="mensagem" rows="5" placeholder="Digite sua mensagem">abcdef</textarea>
      </label>
    </div>
    <div class="col-lg-2">
      <input type="submit" id="enviar" name="enviar" value="Enviar">
    </div>
  </div>
</form>

Answer 2

You do this easily with Jquery using this function:

var formdata = $("#meu_formulario").serialize();