Use the contents of an input field in a JS function

Question

Use the contents of an input field in a JS function

Navigation

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

0

I'm starting now in 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 get the contents of that field and put in another field concatenating some information:

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

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

How do I do this?

javascript

asked by anonymous 02.11.2018 / 04:01

2 answers

How to prevent a React Native application from returning when you click the BackButton using React Navigation calculation with DB data, bring service, value and total

score 1 · Answer 1

var str="2018-11-01";

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

console.log(newstr);

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

The reverse() method reverses the items in an array. The first element of the array becomes the last and the last element becomes the first.

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

If the separator in the join() method is omitted the elements of the array are separated by a comma (","). If the separator is an empty string, all elements are joined without any characters between them

About Your Review

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 fires once 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><inputrequiredtype='date'name="data1" id="data1" class="form-control" />

score 0 · Answer 2

In this example, basically the date is taken from input , it is transformed into an Object of type Date and is formatted by taking day, month and year separately, after that it concatenates with 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>