source: other-projects/nz-flag-design/trunk/main-form/enter-name.html@ 29927

Last change on this file since 29927 was 29927, checked in by davidb, 9 years ago

Check that a new flag name is available
  • Property svn:executable set to *
File size: 7.6 KB
RevLine 
[29530]1<!DOCTYPE html>
[29549]2<html id="story">
[29530]3 <head>
[29927]4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
[29549]6
7 <!-- jQuery -->
[29571]8 <script src="lib/jquery-1.11.1.min.js"></script>
[29740]9
[29549]10 <title>Enter Name</title>
[29530]11 </head>
12 <body>
[29549]13 <div data-role="page" id="enter-name-page"
[29927]14 class="demo-page"
15 data-dom-cache="true"
16 data-prev="iterative-design">
[29781]17
[29927]18 <div data-role="content">
[29781]19 <div data-role="controlgroup" class="control" data-mini="true">
[29549]20 <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
[29927]21 </div>
[29549]22
23
24 <div class="story-page">
[29530]25
[29549]26 <!-- put custom content here -->
[29530]27 <div class="story-title">
[29787]28 <h1 id="enter-name-header" class="center">Contact Details</h1>
[29927]29
30
[29787]31 <style>
32 input {
33 color: white;
34 }
35 </style>
[29914]36 <form id="publish-data"
37 action="my-design.jsp" method="get"
38 style="width: 400px; margin-left:auto; margin-right:auto;"
39 data-ajax="false"
40 >
41 <input type="hidden" name="action" value="publish"/>
42
[29787]43 <p>
[29914]44 Flag Name:
45 </p>
[29927]46 <input id="myFlagName" type="text" autofocus="autofocus" style="color: white;" name="pub-name" />
47 <p id="nameTaken"
48 class="ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"
49 style="display:none; background-color: #400000; color: white; padding: 10px; font-size: 180%;">
50 <i>
51 This flag name is already taken. <br/> Please enter a different name.
52 </i>
53 </p>
[29914]54
55
[29927]56 <p id="myNameLabel" class="enterNameDisabled">
[29787]57 Your Name:
58 </p>
[29927]59 <input id="myName" type="text" style="color: white;" name="name" disabled="disabled"/>
[29787]60
[29927]61
62 <p id="myEmailLabel" class="enterNameDisabled">
[29787]63 Contact email:
64 </p>
[29927]65 <input id="myEmail" type="text" name="email" disabled="disabled"/>
[29787]66
[29927]67 <p id="myDescLabel" class="enterNameDisabled">
[29914]68 Motivation for your flag design:
69 </p>
[29927]70 <textarea id="myDesc" name="desc" style="height: 250px;" disabled="disabled">Describe your design ...</textarea>
[29914]71
[29787]72
[29914]73 <div style="padding-top: 20px; padding-left: 10px; padding-right: 10px">
[29927]74 <input id="mySubmit" type="submit" value="Submit Flag Design" disabled="disabled" />
[29787]75 </div>
[29767]76 </form>
[29912]77
[29927]78 <style>
79 .enterNameEnabled {
80 color: white;
81 }
82
83 .enterNameDisabled {
84 color: #909090;
85 }
86
87 </style>
88
[29914]89 <script>
[29927]90 var rest_of_form_disabled = true;
91 var submit_button_disabled = true;
92
93 var stage1_input_valid = ["myName","myEmail","myDesc"];
94 var stage1_label_valid = ["myNameLabel","myEmailLabel","myDescLabel"];
95
96 var stage2_input_valid = ["mySubmit"];
97 var stage2_label_valid = [];
98
99 function disableRestOfForm()
100 {
101 for (var i=0; i<stage1_label_valid.length; i++) {
102 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",false)
103 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",true)
104 }
105
106 for (var i=0; i<stage1_input_valid.length; i++) {
107 //$('#'+stage1_input_valid[i]).attr("disabled","disabled")
108 $('#'+stage1_input_valid[i]).textinput("disable")
109 }
110 disableSubmit();
111 rest_of_form_disabled = true;
112
113 }
114
115 function enableAllButSubmit()
116 {
117 for (var i=0; i<stage1_label_valid.length; i++) {
118 $('#'+stage1_label_valid[i]).toggleClass("enterNameDisabled",false);
119 $('#'+stage1_label_valid[i]).toggleClass("enterNameEnabled",true);
120 }
121
122 for (var i=0; i<stage1_input_valid.length; i++) {
123 //$('#'+stage1_input_valid[i]).removeAttr("disabled")
124 //$('#'+stage1_input_valid[i]).prop("disabled",false)
125 $('#'+stage1_input_valid[i]).textinput("enable");
126 }
127 reset_of_form_disabled = false;
128 }
129
130
131 function disableSubmit()
132 {
133 for (var i=0; i<stage2_label_valid.length; i++) {
134 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",false);
135 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",true);
136 }
137
138 for (var i=0; i<stage2_input_valid.length; i++) {
139 //$('#'+stage2_input_valid[i]).attr("disabled","disabled");
140 $('#'+stage2_input_valid[i]).button("disable");
141 }
142
143 submit_button_disabled = true;
144
145 }
146
147
148 function enableSubmit()
149 {
150
151 for (var i=0; i<stage2_label_valid.length; i++) {
152 $('#'+stage2_label_valid[i]).toggleClass("enterNameDisabled",false)
153 $('#'+stage2_label_valid[i]).toggleClass("enterNameEnabled",true)
154 }
155
156 for (var i=0; i<stage2_input_valid.length; i++) {
157 //$('#'+stage2_input_valid[i]).removeAttr("disabled")
158 $('#'+stage2_input_valid[i]).button("enable");
159 }
160
161 submit_button_disabled = false;
162
163 }
164
165
[29914]166 var jsession_id = $.cookie('JSESSIONID') || new Date().getTime();
167 $('#publish-data').append('<input type="hidden" name="myid" value="' + jsession_id + '"/>');
168 //$('#publish-data').append('<input type="hidden" name="png-flag" value="flag-' + jsession_id + '.png"/>');
169 //$('#publish-data').append('<input type="hidden" name="svg-flag" value="flag-' + jsession_id + '.svg"/>');
[29912]170
[29914]171 //$('#publish-data').append('<img src="../render-3d/images/flag-' + jsession_id + '.png"/>');
[29927]172
173 var taken_list = null;
174 var taken_lookup = null;
175 $myFlagName = $('#myFlagName');
176 $myFlagName.keyup(function() {
[29912]177
[29927]178 if (taken_list == null) {
179
180 $.ajax({
181 url: 'published-names.jsp',
182 async: false,
183 success: function(datastr) {
184 var clean_datastr = datastr.replace(/^\s+/,"");
185 //alert("OK:" + clean_datastr);
186 var data = eval("(" + clean_datastr + ")");
187 //alert("OK:" + JSON.stringify(data));
188 taken_list = data;
189 //console.log("****** !!!! taken list = " + JSON.stringify(taken_list));
190 taken_lookup = {};
191 for (var i=0; i<taken_list.length; i++) {
192 var pub_name = taken_list[i];
193 taken_lookup[pub_name] = 1;
194 }
195 //console.log("****** !!!! taken lookup = " + JSON.stringify(taken_lookup));
196
197 },
198 error: function(data) {
199 console.log("Error:" + JSON.stringify(data))
200 }
201 });
202
203
204 }
205
206 var flag_name = $myFlagName.val();
207 flag_name = flag_name.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," ");
208
209 if (flag_name.length==0) {
210 //$('#nameTaken').hide("blind",{duration: 200});
211 $('#nameTaken').hide();
212 disableRestOfForm();
213 }
214 else {
215 if (rest_of_form_disabled) {
216 enableAllButSubmit();
217 }
218 }
219
220 if (taken_lookup != null) {
221 if (taken_lookup[flag_name]) {
222 // current flag_name NOT available
223 if (!submit_button_disabled) {
224 //$('#nameTaken').show("Blind",{duration: 200});
225 $('#nameTaken').show();
226 disableSubmit();
227 }
228 }
229 else {
230 if (submit_button_disabled) {
231 //$('#nameTaken').hide("blind",{duration: 200});
232 $('#nameTaken').hide();
233 enableSubmit();
234 }
235 }
236 }
237
238
239
240 //console.log("entered field: " + $myFlagName.val());
241
242 });
243
[29914]244 </script>
245
[29530]246 </div>
[29549]247 <!-- end of putting custom content -->
[29530]248
249 </div> <!-- end story-page-->
250
251 </div><!-- /content -->
252
[29549]253 </div><!-- /page -->
[29530]254 </body>
255</html>
Note: See TracBrowser for help on using the repository browser.