Writing value to page without appearing in source code

I was wondering if anyone can tell me how the following is achieved. I was looking at the Digitalstormonline custom system building interface and noticed their price gets updated without any trace in firebug.

http://www.digitalstormonline.com/comploadhailstorm.asp?id=477406

the input tag that contai开发者_高级运维ns the updated price contains no clue on what the updated price is. I understand the price is calculated on server side but how are they able update the number in a way that doesn't involve writing it in the sourcecode?

thanks

The value is updated client side, although the fact that you see no change is quite standard. Javascript changes the value which doesn't necessarily alter the DOM (what you refer to as the source, or what you see in firebug), but there's no magic going on, if you open the firebug console after customizing the price and execute:

$('#divStayTopLeft input').val();

You'll see the updated value.

You can simplify the whole thing and do the same with a simple fiddle: http://jsfiddle.net/wexTS/

The source starts as <input id="foo" value="bar" /> And that's how it looks in firebug after the change, but clearly the value changes to fooooo

Similar question: jQuery - selected attribute on options doesn't show in FireBug

They have all the information in JavaScript in the HTML source code:

networkcards[1] = new Array()
networkcards[1][0] = "Wireless-PCI N 300Mbps (Supports 802.11n/g/b) <b>[+$49]</b>";
networkcards[1][1] = "49";
networkcards[1][2] = "9030";
networkcards[1][3] = "/control/images/thumbCONF9030.jpg";
networkcards[1][4] = "&nbsp;";
networkcards[1][5] = "";
networkcards[1][6] = "";


networkcards[2] = new Array()
networkcards[2][0] = "Wireless-USB N 300Mbps (Supports 802.11n/g/b) <b>[+$49]</b>";
networkcards[2][1] = "49";
networkcards[2][2] = "9031";
networkcards[2][3] = "/control/images/thumbCONF9031.jpg";
networkcards[2][4] = "&nbsp;";
networkcards[2][5] = "";
networkcards[2][6] = "";


networkcards[3] = new Array()
networkcards[3][0] = "!PROMOTION: Killer 2100 (Optimized for Online Gaming) Lag and Latency Reduction <b>[+$99]</b>";
networkcards[3][1] = "99";
networkcards[3][2] = "9119";
networkcards[3][3] = "/control/images/thumbCONF9119.jpg";
networkcards[3][4] = "&nbsp;";
networkcards[3][5] = "Features";
networkcards[3][6] = "100";

The element [1] of the multidimensional array holds the price information.

Actually, it is written in the source code, and calculated client-side.

Starting from line 178:

//CORE******8888
// CASES
var cases;
cases = new Array; 

cases[0] = new Array()
cases[0][0] = "Special Deal Hot Seller - Black OPS HailStorm Edition";
cases[0][1] = "421";
cases[0][2] = "8357";
cases[0][3] = "/control/images/thumbCONF8357.jpg";
cases[0][4] = " "; //selected item
cases[0][5] = ""; //selected item
cases[0][6] = ""; //selected item

...(and so on)