Capture input value (Only numeric fields) and put in Div

Navigation
0

I'm trying to create a function that takes the value of an input field and places it in div. But I'm not getting it to work.

Note: I need to get only numeric values.

Follow my code: 

$( "#testar" ).click(function() {

    $('#txtDistancia').on('input', function () {
        var valor = $(this).val();
        $('#valorkm').html(valor);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="distancia" type="text" id="txtDistancia" value="7,5 km">
<p></p>
<input type="button" value="Testar" id="testar" class="btn btn-success" />
<p></p>
<div id="valorkm"></div>

UPDATE: I would like the person to test the localhost code, because two people helped me, I saw the code working here and also through Fiddle, but testing on localhost does not work.

    
asked by anonymous 29.11.2017 / 15:08

3 answers

0

If you are testing the button you do not need on input . And to capture only the numbers you can use:

match(/\d+/g)

Example 

$("#testar").click(function() {

  let valor = $('#txtDistancia').val().match(/\d+/g);
  $('#valorkm').html(valor);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="distancia" type="text" id="txtDistancia" value="7,5 km">
<p></p>
<input type="button" value="Testar" id="testar" class="btn btn-success" />
<p></p>
<div id="valorkm"></div>
    
29.11.2017 / 15:12
0

Try this: 

$( "#testar" ).click(function() {
  var valor = $('#txtDistancia').val().replace(/[^0-9^,]/g, '');
  $('#valorkm').html(valor);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="distancia" type="text" id="txtDistancia" value="7,5 km">
<p></p>
<input type="button" value="Testar" id="testar" class="btn btn-success" />
<p></p>
<div id="valorkm"></div>
    
29.11.2017 / 15:18
0

Solution with pure javascript A regex to delete all non-numeric characters 

function Testar(){
  var distancia = document.getElementById('txtDistancia').value.replace(/[^0-9]/g,'');
  document.getElementById('valorkm').innerText=distancia;
};
<input name="distancia" type="text" id="txtDistancia" value="7,5 km">
<input type="button" value="Testar" id="testar" class="btn btn-success" onclick='Testar();' />
<div id="valorkm"></div>

Should return a number with a separator. (dot)

Use parseFloat to convert to Number, so just change , and . to parseFloat able to work with number 

function Testar(){
  var distancia = document.getElementById('txtDistancia').value;
  var numero = parseFloat(distancia.replace(',', '.'));
  document.getElementById('valorkm').innerText=numero;
};
<input name="distancia" type="text" id="txtDistancia" value="7,5 km">
<input type="button" value="Testar" id="testar" class="btn btn-success" onclick='Testar();' />
<div id="valorkm"></div>
  

The parseFloat argument must be a string or a string expression. The parseFloat result is the number whose decimal representation was contained in this string (or the number found at the beginning of the string which is the case in question when we change the , to . ). >

    
29.11.2017 / 17:33
How to get aws service with aws-sfk-php-zf2 v 2.0. *? Update fields of a class with sequential names