Value of a query to a numeric field returns non-numeric

Question

I am trying to read a field in a table that is of the whole type. And it is also a primary key and auto-increment.

The value returned is put in a label (I’ve tried putting in an input text as well).

To read the target table and put the result on the label, I use a Jquery statement. The event is a click on

<input type='file':

The click code is

jQuery("#idFilFoto").click(function (){
var nSigla=jQuery("#idLblSigla").text();
var tabela = "TabPessoas";
var clausulaWhere = " TabPessoasSigla = '"+nSigla+"'";
var jqxhr = $.post("genericaPegaID.php",{tabela:tabela,clausulaWhere:clausulaWhere},      function(resultado) {
jQuery("#idLblID").text(resultado);
});//fim do post
});//fim do click

This works well.

On the label

<label id="idLblID" 

value is set correctly. An integer with no spaces before or after.

Now, I want this value inside that label to use it in another table.

The completion of this table is done by the event click of a button.

jQuery("#idBtnSalvar").click(function (){
var tabela="TabFotos";
var campos="TabFotosCaminhoArquivo,TabFotosFKPessoas";
var matricula = jQuery("#idLblID").text();
var foto = jQuery("#idFilFoto").val();
var posicao = foto.indexOf("fakepath");
foto = foto.substr(posicao+9);
var valores="'"+foto+"',"+matricula;    
alert (tabela+" : "+campos+" : "+valores);
/*
var jqxhr = $.post("genericaInserir.php",{tabela:tabela,campos:campos,valores:valores}, function(resultado) {
alert("success "+resultado);
});//fim do post
*/
});//fim do botao salvar

The block commented above is because the 'values' field forces an error in the Insert Into statement I have on the generic page Insert.php. It says that the value of the 'matricula' field is non-numerical.

Really, if you inspect what was going to the 'post' (see Alert before the commented block) appears, for example, like this:

'photo.png',[][]6.

Please interpret the two brackets as two closed symbols, like two rectangles.

It should be just the number 6, in case.

I tried to

var matricula = parseInt(jQuery("#idLblID").text(),10);

but the result is Nan in Alert.

Answer 1

You are collecting the value of the element with the identifier #idLblID using the method .text() ^(English) which serves the purpose of collecting a string with everything found inside the target element.

In the documentation it is described that there are differences in the collection of browser-to-browser content, which may justify a little why you are picking up characters beyond the expected number:

The result of the . text() method is a string containing the Combined text of all Matched Elements. (Due to Variations in the HTML parsers in Different browsers, the text returned may Vary in newlines and other white space.)

That translated:

The result of the . text() method is a string containing the combined text of all located elements. (Due to variations in the HTML interpreters of the different browsers, the returned text may vary in new lines and other whitespace.)

The difference depends essentially on your Markup, but if there’s nothing more than a number between the tags of your element, the way you’re taking that value should also work:

<label id="idLblID">10</label>

Demonstration at Jsfiddle

Solution

Without seeing your Markup to analyze what comes when you collect the value, my solution is to make use of the function $.trim() which serves to clean the collected value by removing blanks and other:

The $.Trim() Function removes all newlines, Spaces (including non-breaking Spaces), and tabs from the Beginning and end of the supplied string.

That translated:

The $.Trim() function removes all line breaks, spaces (including nonseparable spaces ) and tabs from the beginning and end of the given string.

HTML with tabs, whitespace and number 10:

<label id="idLblID">     10 &nbsp;    </label>

Value collection and verification:

var numero = $.trim($('#idLblID').text()); // recolhe conteúdo

alert(numero);                             // alerta 10

alert(parseInt(numero) || 0);              // alerta  10

Demonstration at Jsfiddle