Using the contents of an input field in a JS function

Asked

Viewed 76 times

0

I’m starting now on JS

I have an input field: <input required type='date' name="data1" id="data1" class="form-control" />

Then I created a button that when clicking will take the content of this field and put in another field concatenating some information:

<input type="button" onclick="this.form.introducao.value=form.data1+form.texto">

Only before I need to convert this data1 that is in the form input 2018-11-01 in normal format 01/11/2018

How do I do it?

javascript

  • https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta

2 answers

1

var str="2018-11-01";

var newstr = str.split('-').reverse().join('/');

console.log(newstr);

The method split() splits a String object into an array of strings by separating the string into substrings

The method reverse() inverts the entries of an array. The first element of the array becomes the last and the last becomes the first.

The method join() joins all elements of an array into a string and returns this string.

If the separator in the method join() is omitted array elements are separated with a comma (","). If the separator is an empty string, all elements are joined with no character between them

About your comment

como eu faço para a data ir parar ai dentro desse parênteses sendo que 
ela está digitada em um input do formulário?

With a Javascript function

function myFunction() {
var str=document.getElementById("data1").value;

console.log(str);

var newstr = str.split('-').reverse().join('/');

console.log(newstr);

}
<input required type='date' name="data1" id="data1" class="form-control" />

<button onclick="myFunction()">Submit</button>

With Jquery

The focusout event is triggered as soon as the element loses focus

var str = $("#data1");
    str.focusout( function(){
    //data retornada do input
    console.log(str.val());
    //data transformada
    console.log(str.val().split('-').reverse().join('/'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input required type='date' name="data1" id="data1" class="form-control" />

  • First, thanks for the help, in this example you gave me, you wrote the date inside the command ('2018-11-01'), as I do for the date to go there inside those parentheses being that it is typed in a form input?

0

In this example basically, the date is taken from input, is transformed into an Object of the type Date and is formatted taking day, month and year separately, after which concatenates with the typed text and inserts into a <p>:

function forData() {
  var data = document.getElementById("data1").value;
  var texto = document.getElementById("texto1").value;

  var d = new Date(data);
  var dataFormatada = (d.getDate() + 1) + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();

  var concatenar = "Data: " + dataFormatada + " Texto: " + texto;

  document.getElementById("inserir").innerText = concatenar;
}
<form>
  <input required="required" type='date' name="data1" id="data1" class="form-control">
  <br>
  <input required="required" type="text" name="texto1" id="texto1" class="form-control">
  <br>
  <input type="button" onclick="forData()" value="Enviar">
</form>

<p id="inserir"></p>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.