How to save date and time in a variable by clicking button

Question

I need to save date and time in a variable by clicking a button that starts a task and then send it to the BD, for example:

<div class="form-group">
  <label class="col-md-4 control-label" for="IniciarTarefa" id="acao"></label>
  <div class="col-md-4">
    <button id="IniciarTarefa" name="IniciarTarefa" class="btn btn-info">Iniciar Tarefa</button>
  </div>
</div>

I tried to use this script but got very confused because I do not have a field in the form and even creating a Hidden capo did not work.

Example of Code holding value

Answer 1

The script you refer to stores information in a field data- within an element of the GIFT. This can easily be adapted to your code and when you need this value in a variable you can simply search with .data('nomeDoCampo').

An example using your HTML, and using the div.form-group to store the information would:

$('#IniciarTarefa').on('click', function () {
    $(this).closest('.form-group').data('inicio', new Date().getTime());
});

$('#mostrar').on('click', function () {
    // esta variável time tem um timestamp que podes enviar para a BD
    var time = $('.form-group').data('inicio'); 
    alert(new Date(time));
});

jsFiddle: https://jsfiddle.net/ogn1o10u/

Answer 2

I would like to give a complementary information the reply of @Sergio, so there goes another "reply comment".

Let’s assume that in your HTML has an element with a data custom attribute (data-*) similar to the following:

<div id="helloWorld" data-nome="Hello World!"></div>

In jQuery you can access the value of this property in two ways:

var helloWorld = $("#helloWorld");
var usingAttr = helloWorld.attr("data-nome");
var usingData = helloWorld.data("nome");
console.log(usingAttr); //saida: "Hello World!"
console.log(usingData); //saida: "Hello World!"

<div id="helloWorld" data-nome="Hello World!" ></div>

But if you make a set using .data("nome", value), it will update the value only in the date object, but will not update the value of the date attribute, as in the example below:

var helloWorld = $("#helloWorld");
helloWorld.data("nome", "Hello Mars?");
var usingAttr = helloWorld.attr("data-nome");
var usingData = helloWorld.data("nome");
console.log(usingAttr); //saida: "Hello World!"
console.log(usingData); //saida: "Hello Mars?"

<div id="helloWorld" data-nome="Hello World!" ></div>

But if you make a set using .attr("data-nome", value), then the value of the object and date attribute will be updated:

var helloWorld = $("#helloWorld");
helloWorld.attr("data-nome", "Hello Mars?");
var usingAttr = helloWorld.attr("data-nome");
var usingData = helloWorld.data("nome");
console.log(usingAttr); //saida: "Hello Mars?"
console.log(usingData); //saida: "Hello Mars?"

<div id="helloWorld" data-nome="Hello World!" ></div>

finally, if you wanted to access a data custom attribute (data-*) which has a compound name using the method .data(), you will have to remove the hyphens and turn the name into pascalCase, however using .attr() nothing changes:

var helloWorld = $("#helloWorld");
var usingAttr = helloWorld.attr("data-nome-completo");
var usingData = helloWorld.data("nomeCompleto"); //Pascal Case
console.log(usingAttr); //saida: "Hello World!"
console.log(usingData); //saida: "Hello World!"

<div id="helloWorld" data-nome-completo="Hello World!" ></div>

This is because the method .data() was created before the specification of data custom attribute (data-*) and can be used to store whatever type of object (string, integer, float, Date, JSON, etc.), while an attribute can store only text (string).