Function count Javascript + PHP characters

Question

Function count Javascript + PHP characters

Asked 6 years, 10 months ago

Viewed 389 times

-1

I have this function that counts the characters and shows me the value:

function calcular(el) {
  var valor = document.getElementById('valor');
  var precoPorLetra = 10;
  var espacos = (el.value.split(" ").length - 1); //conta espacos
  var caracteres = el.value.length;
  valor.value = parseFloat( (caracteres - espacos) * precoPorLetra).toFixed(2); //formatado para duas casas decimais
}

I need to get the "Price" of the database (PHP + MYSQL). I need to show the "value" also in a <span>

<span id="valor"></span>

But nothing shows up

Nome: <input onkeyup="calcular(this)" type="text" />
Valor: <input id="valor" type="text" readonly />

If you want to take the price value per mysql letter, you will have to make an ajax request.

– Max Rogério

2017/08/14 at 20:28
just via ajax? And how would I do that?

– Betinho Silva

2017/08/14 at 20:33
You can do either by ajax, or take the value of PHP variable in JS. Example ajax request: http://vinteum.com/ajax-facil-com-jquery/ or pass php variable to JS: https://stackoverflow.com/a/415888/7168666

– Max Rogério

2017/08/14 at 20:37
The second option gave it right... but now as I do to display beyond the input in a span tbm

– Betinho Silva

2017/08/14 at 20:44
Add the code of span in the question and if there is something in the JS that refers to the span, put it too. But to give a north to you, creates a span and puts an id on it, and blanks print the variable value precoPorLetra, in that span, via ID.

– Max Rogério

2017/08/14 at 20:50
See if it helps

– Betinho Silva

2017/08/14 at 20:54
There cannot be two equal Ids. Change the SPAN ID to "full value" and add the line in the function document.getElementById('valor_total').innerHTML = "R$"+preco_final;. And alter valor.value for preco_final.

– Sam

2017/08/14 at 22:22
Price per letter? dot, colon, question mark, dash, parentheses etccc counts as letter?

– user60252

2017/08/14 at 23:29
I think Leo’s answer was more than complete, validate it as correct.

– Max Rogério

2017/08/15 at 03:24
@Leocaracciolo yes Leo... count tbm

– Betinho Silva

2017/08/15 at 12:36

Show 5 more comments

1 answer

Browser other questions tagged php javascript

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

by user60252 · Answer 1 · 2017-08-14T23:35:24+00:00

Javascript-enabled to display in a span also just insert that line

document.getElementById('valor_span').innerHTML = "R$ "+preco_total;

changing the value of id on the tag span for valor_span for id=valor has already been assigned to the input

function calcular(el) {
  var valor = document.getElementById('valor');
  var precoPorLetra = 10;
  var espacos = (el.value.split(" ").length - 1); //quantidade de espacos
  var caracteres = el.value.length;
  preco_total = valor.value = parseFloat( (caracteres - espacos) * precoPorLetra).toFixed(2); //duas casas decimais
  
  document.getElementById('valor_span').innerHTML = "R$ "+preco_total;
  
}

Nome: <input onkeyup="calcular(this)" type="text" />
Valor: <input id="valor" type="text" readonly />

<span id="valor_span"></span>

With jquery

Accepts only letters, including accents (not to inflate prices with commas, dots, special characters and etc :D )
Thousand separator . (point) and decimal , (comma)
Spaces are accepted but not counted

$(document).ready(function() {
    $('.soLetras').keyup(function (el) {
    var precoPorLetra = 10;

      $(this).val($(this).val().replace(/[^a-zA-Zà-úÀ-Ú ]/g,''));
      var nome = document.getElementById('nome');
  
      var espacos = (nome.value.split(" ").length - 1);

      var letras = nome.value.length;		    
      var total = parseFloat((letras-espacos) * precoPorLetra).toFixed(2);
	    
      total=total.replace(".", ",");
      
      total=total.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
	    
      $('.valor').html("R$ " + total); 
      
      valor.value = total;

	    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Nome: <input type="text" class="soLetras" name="nome" id="nome">
Valor: <input id="valor" type="text" readonly />
<span class="valor"></span>

To accept numbers also replace that line

$(this).val($(this).val().replace(/[^a-zA-Zà-úÀ-Ú ]/g,''));

along that line

$(this).val($(this).val().replace(/[^a-zA-Zà-úÀ-Ú0-9 ]/g,''));

PHP

The value of precoPorLetra from the bank can be assigned in the script as follows:

var precoPorLetra = <?php echo $nomeVariavel ?>;