UIZE JavaScript Framework


This example demonstrates how the setNodeValue instance method of the Uize.Widget base class can be used to set the value of different types of element nodes, including form inputs. In this example, the "value" is being set in a single call to the setNodeValue instance method - for a select node, a multiple select select node, a checkbox input, a radio button set, a text input, a read-only text input, a textarea, and a span node. Setting the value for all the nodes in a single call is accomplished by supplying the setNodeValue method with a node "blob". A value property does not exist, per se, for all of the element types mentioned. So, the concept of a value is provided as an abstraction to ease interfacing with these different element types, making it easier to swap one type for another without having to change the way one's application logic addresses the elements. Use the buttons below to set the value for all of the elements to either true or false. You can use any values with setNodeValue, but a boolean was chosen here in order to demonstrate this method with a checkbox input as well. Notice how setting the "value" of the span node essentially sets its innerHTML.

a select tag
a multi-select tag
a checkbox
radio buttons  
a text input
a read-only text input
a text area
a span