source: trunk/plugins/Forms/popups/select.html @ 192

Last change on this file since 192 was 192, checked in by gocher, 15 years ago

Add closing tags textarea, form, select in htmlarea.js

Forms: A select with size="1" can't be multiple!

File size: 7.0 KB
Line 
1<html>
2
3<head>
4  <title>Insert/Edit Form Element SELECT</title>
5  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" />
6  <script type="text/javascript" src="../../../popups/popup.js"></script>
7
8<script type="text/javascript">
9var type;
10function Init() {
11  __dlg_translate("Forms");
12        __dlg_init();
13        var param = window.dialogArguments;
14  type = param.f_type;
15  var d = document;
16  d.getElementById("f_name").value = param.f_name;
17        d.getElementById("f_size").value = (param.f_size<=0)?"":param.f_size;
18        d.getElementById("f_multiple").checked = param.f_multiple;
19        for (var i=0; i<=param.f_options.length-1; i++) {
20                document.getElementById("f_select").options[i] = new Option(param.f_options[i].text, param.f_options[i].value);
21        }
22        window.resizeTo(350,320);
23        d.getElementById("f_name").focus();
24};
25
26function onOK() {
27        var d = document;
28        var el = d.getElementById("f_name");
29        if (!el.value) {
30        alert("You must enter a Name");
31                el.focus();
32          return false;
33        }
34  var param = new Object();
35  param["f_type"] = type;
36  param["f_name"] = d.getElementById("f_name").value;
37        param["f_size"] = d.getElementById("f_size").value;
38  if (d.getElementById("f_size").value=="1")
39    param["f_multiple"]=false;
40  else
41        param["f_multiple"] = d.getElementById("f_multiple").checked;
42        function optionValues(text,value) {
43                this.text = text;
44                this.value = value;
45        }
46        optionNodes = new Array(); // for option text/value pairs
47        for (var i=0; i<= d.getElementById("f_select").options.length-1; i++) {
48                optionNodes[i] = new optionValues(d.getElementById("f_select").options[i].text, d.getElementById("f_select").options[i].value);
49        }
50        param["f_options"] = optionNodes;
51        __dlg_close(param);
52  return false;
53};
54
55function onCancel() {
56        __dlg_close(null);
57        return false;
58};
59
60
61//functions to build select options list
62//Populates Label and Value fields with selected option values
63function getValues(){
64        var d = document;
65        d.getElementById("f_optionvalue").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].value;
66        d.getElementById("f_optiontext").value = d.getElementById("f_select").options[d.getElementById("f_select").selectedIndex].text;
67        d.getElementById("f_update").value ="Update Option";
68}
69
70//Add or update options to the select box
71function addItem(item) {
72        var d = document;
73        if (item.f_optiontext.value =="") {alert("Please enter a Label");}
74        else {
75                if (d.getElementById("f_select").options.selectedIndex != -1) { //update item
76                        var indx = d.getElementById("f_select").options.selectedIndex;
77                        d.getElementById("f_select").options[indx].text=d.getElementById("f_optiontext").value;
78                        d.getElementById("f_select").options[indx].value=d.getElementById("f_optionvalue").value;
79                } else { //add new item
80                        var newItem = d.getElementById("f_select").options.length++;
81                        d.getElementById("f_select").options[newItem].text=d.getElementById("f_optiontext").value;
82                        d.getElementById("f_select").options[newItem].value=d.getElementById("f_optionvalue").value;
83                }
84                d.getElementById("f_select").selectedIndex = -1; //deselect
85                d.getElementById("f_optiontext").value="";//clean up
86                d.getElementById("f_optionvalue").value="";
87                d.getElementById("f_update").value ="Add Option";
88                d.getElementById("f_optiontext").focus();
89        }
90}
91//Clears selected option
92function deleteItem() {
93        var d = document;
94        for (var i = d.getElementById("f_select").options.length - 1; i>=0; i--) {
95                var opt = d.getElementById("f_select").options[i];
96                if (opt.selected) {
97                        d.getElementById("f_select").options[i] = null;
98                }
99        }
100        d.getElementById("f_select").selectedIndex = -1;
101        d.getElementById("f_optiontext").value="";
102        d.getElementById("f_optionvalue").value="";
103        d.getElementById("f_optiontext").focus();
104}
105//Moves selected option up
106function moveOptionUp() {
107        var d = document;
108        for (i=0; i<d.getElementById("f_select").options.length; i++) {
109                if (d.getElementById("f_select").options[i].selected) {
110                        if (i != 0 && !d.getElementById("f_select").options[i-1].selected) {
111                                swapOptions(d.getElementById("f_select"),i,i-1);
112                                d.getElementById("f_select").options[i-1].selected = true;
113                        }
114                }
115        }
116}
117//Moves selected option down
118function moveOptionDown() {
119        var d = document;
120        for (i=d.getElementById("f_select").options.length-1; i>=0; i--) {
121                if (d.getElementById("f_select").options[i].selected) {
122                        if (i != (d.getElementById("f_select").options.length-1) && ! d.getElementById("f_select").options[i+1].selected) {
123                                swapOptions(d.getElementById("f_select"),i,i+1);
124                                d.getElementById("f_select").options[i+1].selected = true;
125                        }
126                }
127        }
128}
129       
130function swapOptions(obj,i,j) {
131        var o = obj.options;
132        var i_selected = o[i].selected;
133        var j_selected = o[j].selected;
134        var temp = new Option(o[i].text, o[i].value);
135        var temp2= new Option(o[j].text, o[j].value);
136        o[i] = temp2;
137        o[j] = temp;
138        o[i].selected = j_selected;
139        o[j].selected = i_selected;
140}
141</script>
142<style rel="stylesheet" type="text/css">
143DIV.line        {       clear: both;    }
144
145LABEL   {
146        padding-top: 3px;
147        padding-left: 3px;             
148        padding-right: 3px;     
149        }
150       
151LABEL.label     {
152        float: left;
153        width: 12em;
154        text-align: right;
155        }       
156</style>
157</head>
158
159<body onload="Init()">
160  <div id="f_type" class="title">Form Element: SELECT</div>
161  <form action="" method="get">
162    <div class="line"><label class="label" for="name">Name/ID:</label>
163    <input type="text" name="name" id="f_name" title="Name of the form select" /></div>
164    <div class="line"><label class="label" for="size">Size:</label>
165    <input name="size" id="f_size" type="text" value="" size="15"></div>
166                <div class="line"><label class="label" for="multiple">Allow Multiple Selections:</label>
167    <input name="multiple" id="f_multiple" type="checkbox"></div>
168    <div class="space"></div>
169    <fieldset id="fldLayout">
170          <legend>Options</legend>
171      <table border="0" cellspacing="0" width="100%">
172                  <tr>
173      <td align="right">
174        <select name="select" id="f_select" Size="6" onchange="getValues();"  style="width:16em">
175            </select>
176      </td>
177      <td align="center">
178        <input type="button" name="up" value="Move Up" style="width:6em" onClick="moveOptionUp()"><br />
179              <input type="button" name="down" value="Move Down" style="width:6em" onClick="moveOptionDown()"><br />
180        <input type="button" name="delete" value="Delete" style="width:6em" onClick="deleteItem();">
181      </td>
182      </tr>
183      </table>
184      <div class="space"></div>
185      <table border="0" cellspacing="0" width="100%">
186                  <tr>
187                          <td align="right">Lable:</td>
188                          <td><input type="text" id="f_optiontext" name="optionText" value="" size="15"></td>
189                          <td align="right">Value:</td>
190                          <td><input name="optionValue" id="f_optionvalue" type="text" value="" size="15"></td>
191        <td><input type="button" name="update" id="f_update" value="Add" onclick="addItem(document.forms[0])"></td>
192                  </tr>
193                  </table>
194          </fieldset>
195          <div id="buttons">
196      <button type="button" name="ok" onclick="return onOK();">OK</button>
197      <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
198    </div>     
199  </form>
200</body>
201</html>
Note: See TracBrowser for help on using the repository browser.