18

Browser is chromium (under ubuntu)

This is a chunk of code: (of course) The alert messages shows the right value. but the points element doesn't get the right value, it actually gets empty. Can anybody tell me why?

Here's how points element is defined.

<input type='number' id='points' value='0'/> 

and here is how javascript code is supposed to populate it.

alert(request.responseText);

document.getElementById("points").value=request.responseText;
7
  • 1
    How do you determine that it "gets empty"? What is the value you are trying to set? Does it behave as you expect in other browsers (and which other browsers have you tested)?
    – Quentin
    Nov 25, 2012 at 17:30
  • Cause I see it. When I say empty, I mean no value in the input box. It contains 0 at start, when the request is done, it turns to blank field.
    – Not Amused
    Nov 25, 2012 at 17:31
  • Your use of .value is perfectly valid. I suspect the problem is that request.responseText is empty. What does the alert say? Nov 25, 2012 at 17:31
  • Perhaps an input type number cannot have non-numeric content? Nov 25, 2012 at 17:31
  • the alert says 55 as I said earlier... it does return the number back.
    – Not Amused
    Nov 25, 2012 at 17:32

7 Answers 7

28

Your response is almost certainly a string. You need to make sure it gets converted to a number:

document.getElementById("points").value= new Number(request.responseText);

You might take a closer look at your responseText. It sound like you are getting a string that contains quotes. If you are getting JSON data via AJAX, you might have more consistent results running it through JSON.parse().

document.getElementById("points").value= new Number(JSON.parse(request.responseText));
2
  • 2
    The top level element of a JSON structure must be an array or object. Hence new Number(JSON.parse(...)) would most likely return NaN. Nov 25, 2012 at 17:59
  • Good point on the JSON. If it isn't an array or object, Chrome at least complains. Nov 25, 2012 at 18:18
5

According to my tests with Chrome:

If you set a number input to a Number, then it works fine.

If you set a number input to a String that contains nothing but a number, then it works fine.

If you set a number input to a String that contains a number and some whitespace, then it blanks the input.

You probably have a space or a new line after the data in the server response that you actually care about.

Use document.getElementById("points").value = parseInt(request.responseText, 10); instead.

1

The only case I could imagine is, that you run this on a webkit browser like Chrome or Safari and your return value in responseText, contains a string value.

In that constelation, the value cannot be displayed (it would get blank)

Example: http://jsfiddle.net/BmhNL/2/


My point here is, that I expect a wrong/double encoded string value. Webkit browsers are more strict on the type = number. If there is "only" a white-space issue, you can try to implicitly call the Number() constructor, like

document.getElementById("points").value = +request.responseText;
6
  • 1
    document.getElementById("points").value= new Number(request.responseText); Nov 25, 2012 at 17:35
  • 2
    Your test is invalid. "'5'" is not a valid number. Nov 25, 2012 at 17:35
  • I run that example and I get a blank field. so it's my browser?
    – Not Amused
    Nov 25, 2012 at 17:35
  • The same issue. "\"15\"" is not a valid number. Is it the point here? Nov 25, 2012 at 17:37
  • @slashingweapon. Type that as an answer please. +1
    – Not Amused
    Nov 25, 2012 at 17:37
1

Refer below Code Snip

In HTML Page

<input id="test" type="number" value="0"/>

In Java Script

document.getElementById("test").value=request.responseText;// in case of String 
document.getElementById("test").value=new Number(responseText);// in case of Number
1

@slashingweapon's answer in another way:
for me this worked:

document.getElementById("points").setAttribute('value', new Number(request.responseText));

or

document.getElementById("points").setAttribute('value', new Number(JSON.parse(request.responseText)));

0

The problem is clearly not with the javascript. Here's a quick snippet to show you the working of the code.

document.getElementById('points').value = 100;

http://jsfiddle.net/eqTm2/1/

As you can see, the javascript perfectly assigns the new value to the input element. It would be helpful if you could elaborate more on the issue.

3
  • 2
    Although your conclusion is correct, you sometimes have to look at your crystal ball to figure out what OP might mean :)
    – Ja͢ck
    Nov 25, 2012 at 17:38
  • Note the asker uses input type=number. You use input type=text Nov 25, 2012 at 17:39
  • Sorry, I did not see that the author used "number" as the type. Edited.
    – Karan
    Nov 26, 2012 at 9:04
-2

Try using ,

$('#points').val(request.responseText);
1
  • 3
    This is not using vanilla javascript but JQuery.
    – Cagy79
    Dec 19, 2018 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.