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

Asked

Viewed 49 times

0

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

Note: I need to take only the numerical values.

Just 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>

<input name="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 when testing on localhost does not work.

javascript jquery

  • Is there an error in the browser console? this javascript is set in html after the right jquery include?

3 answers

0


If you’re testing by the button you don’t need the on input. And to capture only the numbers 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>

<input name="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>

  • I tried to put your solution in my code but it doesn’t work. See here.

  • mount your code in a Fiddle @Wendell, pf

  • Fiddle works, but both localhost and server does not work. Which may be? See the Fiddle code here.

  • 1

    @Wendell On the page you reported, the order of things is wrong: the first thing you should load is the jQuery library, then the HTML and finally the script. You changed the order of things, so it doesn’t work

0

Try it like 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>

<input name="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>

  • I tried to put your solution in my code but it didn’t work. See here

0

Solution with pure javascript a regex to delete all non-number 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>

If you should return a number with separator. (dot)

Use the parseFloat to convert to Number, so just change the , for . for parseFloat to be able to work with the 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 that string (or the number found at the beginning of the string which is the case in question when changing the , for . ).

Browser other questions tagged javascript jquery

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