Parent | Child | Previous | Next
 
JavaScript

$svs Function

IN THIS PAGE

Syntax

$svs(element, value [,parentElement])

Arguments

elementelement objectstringarray

A string with the ID or NAME of the element, a pointer to an HTML element, or an array of either of the previous.

valueAny Type array

A string with the ID or NAME of the element, a pointer to an HTML element, or an array of either of the previous.

parentElementelement objectstring

Any element that contains the 'conceptual control'.

Description

The $svs() function sets the value of a single conceptual element.

Discussion

A 'conceptual' control in the HTML can be represented by multiple physical elements. For example, a radio button with the choices 'Green', 'Red' and 'Blue' can be thought of as a single 'conceptual' control, but the HTML will contain three physical elements, one for each of the options.

If the control passed in can have multiple values, as with a SELECT set to allow multiple selections, or a checkbox group, then you must pass in an array (rather than a single value), and the function will set the control to the values in the array.

You can also use $svs() against elements that are not form controls - the function will set the innerHTML property of the element.

In the case where the page contains multiple 'conceptual' controls with the same name (e.g. a radio button group called 'Gender' might appear in two different forms on the page), you can specify the optional PARENT_ELEMENT parameter to identify which particular radio button group you want to address.

Hyperlinks

The $svs() function can be used with a hyperlink control. By passing in an array for the VALUE parameter, you can set the url, hyperlink text, and tooltip.

Images

The $svs() function can be used with images (IMG tags). By passing in an array for the VALUE parameter, you can set the src, and tooltip.

Any other element that is not a form control, hyperlink or an image (e.g. a span, div, etc.) will be populated with text (i.e. the VALUE that you pass in will be used to set the innerHTML of the object and any '\n' in the VALUE will converted to '' tags.

Examples:

/*Assume that 'FavoriteColors' is a SELECT control that allows multiple selections.
Select the Red and Green entries.*/
$svs('FavoriteColors',['Red','Green']);
 
$svs('span1','Set the text in the span');
 
/*Assume 'gender' is a RADIO BUTTON group. i.e. there are two radio buttons with unique ids, but both radio buttons have the same name - 'gender'.*/
/*Get an array of elements - one for each radio button element in the RADIO BUTTON group.*/
var genderElements = $n('gender');
$svs(genderElements,'Male');
 
/*However, the above example could be accomplished much more simply using this code.*/
$svs('gender','Male');
 
 
/*Assume that a form contains this markup*/
<form id="form1">
    <input type="radio" name="sex"  value="Male"/>Male<br />
    <input type="radio" name="sex"  value="Female"/>Female<br />
</form>
 
<form id="form2">
    <input type="radio" name="sex"  value="Male"/>Male<br />
    <input type="radio" name="sex"  value="Female"/>Female<br />
</form>
 
/*To set the value for the radio button control group inside 'form1' (but not inside 'form2')"*/
$svs('sex','Male','form1')
 
/*Alternatively, */
var ele = $('form1');
$svs('sex','Male',ele);
 
/*Assume that your page contains this hyperlink*/
<a id="link1" href="http://www.alphasoftware.com" title="Go to Alpha Software">Alpha Software</a>
 
/*To change the hyperlink URL, (without changing the text or tooltip:*/
$svs('link1','http://www.google.com');
 
/*To change the url, text and tooltip*/
$svs('link1',['http://www.google.com','Google','Go to Goole']);
 
/*Assume that your page contains this image*/
<img id="image1" src="picture1.jpg" title="A picture of Boston"/>
 
/*To change the image src*/
$svs('image1','picture2.jpg');
 
/*To change the image src and tooltip*/
$svs('image1',['picture2.jpg','A picture of Ithaca']);
Use {dialog.object}.getPointer() to get the DOM element for a control.

See Also