Spry

Insert the Validation Radio Button widget

  1. Locate the SpryValidationRadio.js file and add it to your web site. You can find the SpryValidationRadio.js file in the widgets/radiovalidation directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

    For example, create a folder called SpryAssets in the root folder of your web site, and upload the SpryValidationRadio.js file to it. The SpryValidationRadio.js file contains all of the information necessary for making the Radio Button widget interactive.

  2. Locate the SpryValidationRadio.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
  3. Open the web page to add the Radio Button widget to and link the SpryValidationRadio.js file to the page by inserting the following script tag in the page’s head tag: 
    <script src="SpryAssets/SpryValidationRadio.js" type="text/javascript"></script>

    Make sure that the file path to the SpryValidationRadio.js file is correct. This path varies depending on where you’ve placed the file in your web site.

  4. Link the SpryValidationRadio.css file to your web page by inserting the following link tag in the page’s head tag: 
    <link href="SpryAssets/SpryValidationRadio.css" rel="stylesheet" type="text/css" />

    Make sure that the file path to the SpryValidationRadio.css file is correct. This path varies depending on where you’ve placed the file in your web site.

  5. Add radio buttons to the page and assign them names and values. You can add an unlimited number of radio buttons. 
    <input type="radio" name="fieldName" value="1"/>
<input type="radio" name="fieldName" value="2"/>
  6. Add a container around the radio buttons by inserting span tags around the input tags, and assigning a unique ID to the widget, as follows: 
    <span id="RadioWidget">
	<input type="radio" name="fieldName" value="1"/>
	<input type="radio" name="fieldName" value="2"/>
</span>
  7. To initialize the Spry validation Radio Button object, insert the following script block after the HTML code for the widget: 
    <script type="text/javascript">
	var spryRadio1 = new Spry.Widget.ValidationRadio("RadioWidget");
</script>

    The new JavaScript operator initializes the Radio Button widget object, and transforms the span tag content with the ID of RadioWidget from static HTML code into an interactive Radio Button object. The Spry.Widget.ValidationRadio() method is a constructor in the Spry framework that creates radio button objects. The information necessary to initialize the object is contained in the SpryValidationRadio.js JavaScript library that you linked to at the beginning of this procedure.

    Make sure that the ID of the Radio Button widget’s container span tag matches the ID parameter you specified in the Spry.Widgets.ValidationRadio method. Make sure that the JavaScript call comes after the HTML code for the widget.

  8. Save the page.

    The complete code looks as follows:

    <head> 
... 
<script src="SpryAssets/SpryValidationRadio.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryValidationRadio.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
	<form id="form1" name="form1" method="post" action="">
		<span id="RadioWidget">
			<input type="radio" name="fieldName" value="1">
			<input type="radio" name="fieldName" value="2">
		</span>
	</form>
<script type="text/javascript">
	var spryRadio1 = new Spry.Widget.ValidationRadio("RadioWidget");
</script>
</body>