質問編集履歴

4

文章を省略のため

2018/05/15 12:11

投稿

whitedoragon
whitedoragon

スコア12

test CHANGED
File without changes
test CHANGED
@@ -244,216 +244,126 @@
244
244
 
245
245
  <script>
246
246
 
247
+
248
+
247
249
  /**
248
250
 
249
- コード.jsのgetSelectListFromSS()をんで、スプレッドシートのデータをもと、セレクトボックスを構築する
251
+ コード.jsのregisterSSByFormData()をんで、フォームの内容をスプレッドシートに登録する
250
252
 
251
253
  */
252
254
 
253
- function getSelectList() {
255
+ function sendData() {
256
+
257
+
254
258
 
255
259
  try {
256
260
 
261
+
262
+
263
+ processing(true);
264
+
265
+
266
+
267
+ var elemntIFrame = window.parent.document.getElementById('userHtmlFrame');
268
+
269
+ elemntIFrame.setAttribute('scrolling', 'no');
270
+
271
+ elemntIFrame.setAttribute('frameborder', '0');
272
+
273
+
274
+
275
+ console.log("document.getElementById('select_id2').selectedIndex)", document.getElementById('select_id2').selectedIndex);
276
+
277
+
278
+
279
+ var data = [];
280
+
281
+ data[0] = 'dummy';
282
+
283
+ data[1] = document.getElementById('input_id1').value;
284
+
285
+ data[2] = document.getElementById('input_id2').value;
286
+
287
+ data[3] = document.getElementById('input_id3').checked;
288
+
289
+
290
+
291
+ console.log("data", data);
292
+
293
+
294
+
295
+
296
+
257
297
  google.script.run
258
298
 
259
299
  .withSuccessHandler(function(result) {
260
300
 
261
-
301
+ processing(false);
262
-
302
+
263
- console.log("result", result);
303
+ if (result.data) {
264
-
265
-
266
-
267
- var select = document.getElementById('select_id3');
304
+
268
-
269
- var option = document.createElement('option');
270
-
271
- option.setAttribute('value', '');
272
-
273
- option.setAttribute('selected', true);
274
-
275
- option.innerHTML = '未選択';
305
+ toastr.info('送信完了');
276
-
306
+
277
- select.appendChild(option);
307
+ } else {
278
-
279
-
280
-
281
- for (var i = 0; i < result.data.length; i++) {
308
+
282
-
283
- option = document.createElement('option');
284
-
285
- option.setAttribute('value', i + 1);
309
+ toastr.error('送信失敗しました');
286
-
287
- option.innerHTML = result.data[i];
288
-
289
- select.appendChild(option);
290
310
 
291
311
  }
292
312
 
293
-
294
-
295
-
296
-
297
313
  })
298
314
 
299
315
  .withFailureHandler(function(result) {
300
316
 
317
+ processing(false);
318
+
301
- toastr.error('リストの取得に失敗しました。', result);
319
+ toastr.error('データ送信に失敗しました。', result);
302
320
 
303
321
  })
304
322
 
305
- .getSelectListFromMasterSS();
323
+ .registerSSByFormData(data);
306
324
 
307
325
 
308
326
 
309
327
  } catch (e) {
310
328
 
329
+ processing(false);
330
+
311
331
  toastr.error(e);
312
332
 
313
333
  }
314
334
 
335
+
336
+
315
337
  }
316
338
 
317
339
 
318
340
 
341
+
342
+
343
+
344
+
319
- /**
345
+ // 処理中アイコン表示・非表示
320
-
321
- コード.jsのregisterSSByFormData()を呼んで、フォームの内容をスプレッドシートに登録する
346
+
322
-
323
- */
324
-
325
- function sendData() {
347
+ function processing(processing) {
326
-
327
-
328
-
329
- try {
348
+
330
-
331
-
332
-
333
- processing(true);
334
-
335
-
336
-
337
- var elemntIFrame = window.parent.document.getElementById('userHtmlFrame');
338
-
339
- elemntIFrame.setAttribute('scrolling', 'no');
340
-
341
- elemntIFrame.setAttribute('frameborder', '0');
342
-
343
-
344
-
345
- console.log("document.getElementById('select_id2').selectedIndex)", document.getElementById('select_id2').selectedIndex);
346
-
347
-
348
-
349
- var data = [];
350
-
351
- data[0] = 'dummy';
352
-
353
- data[1] = document.getElementById('input_id1').value;
354
-
355
- data[2] = document.getElementById('input_id2').value;
356
-
357
- data[3] = document.getElementById('input_id3').checked;
358
-
359
-
360
-
361
- console.log("data", data);
362
-
363
-
364
-
365
-
366
-
367
- google.script.run
368
-
369
- .withSuccessHandler(function(result) {
370
-
371
- processing(false);
372
-
373
- if (result.data) {
349
+ if (processing) {
374
-
350
+
375
- toastr.info('送信完了');
351
+ document.getElementById('processing').style.visibility = "visible";
352
+
376
-
353
+ document.getElementById('send_button').setAttribute("disabled", true);
354
+
377
- } else {
355
+ } else {
378
-
356
+
379
- toastr.error('送信失敗しました');
357
+ document.getElementById('processing').style.visibility = "hidden";
380
-
381
- }
358
+
382
-
383
- })
384
-
385
- .withFailureHandler(function(result) {
386
-
387
- processing(false);
388
-
389
- toastr.error('データ送信に失敗しました。', result);
359
+ document.getElementById('send_button').removeAttribute("disabled");
390
-
391
- })
392
-
393
- .registerSSByFormData(data);
394
-
395
-
396
-
397
- } catch (e) {
398
-
399
- processing(false);
400
-
401
- toastr.error(e);
402
360
 
403
361
  }
404
362
 
405
-
406
-
407
363
  }
408
364
 
409
365
 
410
366
 
411
- // multipeセレクトをカンマ区切りのテキストにして取得
412
-
413
- function getMultipleSelectedText(selectOptions){
414
-
415
- console.log(selectOptions, selectOptions.length);
416
-
417
- var arr = [];
418
-
419
- for(var i = 0; i < selectOptions.length; i++) {
420
-
421
- if(selectOptions[i].selected){
422
-
423
- arr.push(selectOptions[i].value);
424
-
425
- }
426
-
427
- }
428
-
429
- return arr.join(',');
430
-
431
- }
432
-
433
-
434
-
435
- // 処理中アイコン表示・非表示
436
-
437
- function processing(processing) {
438
-
439
- if (processing) {
440
-
441
- document.getElementById('processing').style.visibility = "visible";
442
-
443
- document.getElementById('send_button').setAttribute("disabled", true);
444
-
445
- } else {
446
-
447
- document.getElementById('processing').style.visibility = "hidden";
448
-
449
- document.getElementById('send_button').removeAttribute("disabled");
450
-
451
- }
452
-
453
- }
454
-
455
-
456
-
457
367
  // ロード完了後の処理
458
368
 
459
369
  $(function() {

3

初心者マーク追加

2018/05/15 12:11

投稿

whitedoragon
whitedoragon

スコア12

test CHANGED
File without changes
test CHANGED
File without changes

2

文法・余分箇所の修正

2018/05/15 11:52

投稿

whitedoragon
whitedoragon

スコア12

test CHANGED
File without changes
test CHANGED
@@ -194,62 +194,24 @@
194
194
 
195
195
 
196
196
 
197
+
198
+
199
+
200
+
197
201
  <div class="form-group">
198
202
 
199
- <label class="control-label col-xs-3">セレクトボックス(multiple)</label>
200
-
201
- <div class="col-xs-9">
203
+ <div class="col-xs-offset-3 col-xs-9">
202
-
204
+
203
- <select id="select_id2" class="selectpicker form-control" multiple >
205
+ <button id="send_button" type="submit" class="btn btn-primary btn-large">
204
-
206
+
205
- <option selected>ガリガリ君(ソーダ味)</option>
207
+ <i class="fa fa-send fa-lg"></i>送信
206
-
207
- <option>ハーゲンダッツ</option>
208
+
208
-
209
- <option>ピノ</option>
210
-
211
- <option>ガリガリ君(コーラ味)</option>
212
-
213
- </select>
209
+ </button>
214
-
215
- <div class="help-block with-errors"></div>
216
210
 
217
211
  </div>
218
212
 
219
213
  </div>
220
214
 
221
-
222
-
223
- <div class="form-group">
224
-
225
- <label class="control-label col-xs-3">セレクトボックス(動的)</label>
226
-
227
- <div class="col-xs-9">
228
-
229
- <select class="form-control" id="select_id3"></select>
230
-
231
- <div class="help-block with-errors"></div>
232
-
233
- </div>
234
-
235
- </div>
236
-
237
-
238
-
239
- <div class="form-group">
240
-
241
- <div class="col-xs-offset-3 col-xs-9">
242
-
243
- <button id="send_button" type="submit" class="btn btn-primary btn-large">
244
-
245
- <i class="fa fa-send fa-lg"></i>送信
246
-
247
- </button>
248
-
249
- </div>
250
-
251
- </div>
252
-
253
215
  </form>
254
216
 
255
217
  <i id="processing" class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

1

誤表記・不足箇所の追加

2018/05/15 11:45

投稿

whitedoragon
whitedoragon

スコア12

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
 
26
26
 
27
- 【コード.gs】
27
+ 【コード.js】
28
28
 
29
29
  ```
30
30
 
@@ -66,27 +66,9 @@
66
66
 
67
67
  datasheet.getRange(i, 3).setValue(data[ 3]);
68
68
 
69
- datasheet.getRange(i, 4).setValue(data[ 4]);
70
-
71
- datasheet.getRange(i, 5).setValue(data[ 5]);
72
-
73
- datasheet.getRange(i, 6).setValue(data[ 6]);
74
-
75
- datasheet.getRange(i, 7).setValue(data[ 7]);
76
-
77
- datasheet.getRange(i, 8).setValue(data[ 8]);
78
-
79
- datasheet.getRange(i, 9).setValue(data[ 9]);
80
-
81
- datasheet.getRange(i, 10).setValue(data[10]);
82
-
83
- datasheet.getRange(i, 11).setValue(data[11]);
84
-
85
- datasheet.getRange(i, 12).setValue(Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss'));
86
-
87
- result = true;
69
+ result = true;
70
+
88
-
71
+ //省略
89
-
90
72
 
91
73
  return {data: true};
92
74
 
@@ -210,21 +192,25 @@
210
192
 
211
193
  </div>
212
194
 
195
+
196
+
213
197
  <div class="form-group">
214
198
 
215
- <label class="control-label col-xs-3">ラジオタン</label>
199
+ <label class="control-label col-xs-3">セレクトックス(multiple)</label>
216
200
 
217
201
  <div class="col-xs-9">
218
202
 
219
- <div class="radio" id="radiobutton1">
203
+ <select id="select_id2" class="selectpicker form-control" multiple >
220
-
204
+
221
- <label><input type="radio" name="radio1" id="input_id6" required>radio11</label>
205
+ <option selected>ガリガリ君(ソーダ味)</option>
206
+
222
-
207
+ <option>ハーゲンダッツ</option>
208
+
209
+ <option>ピノ</option>
210
+
223
- <label><input type="radio" name="radio1" id="input_id7" required>radio12</label>
211
+ <option>ガリガリ君(コーラ味)</option>
224
-
225
- <label><input type="radio" name="radio1" id="input_id8" required>radio13</label>
212
+
226
-
227
- </div>
213
+ </select>
228
214
 
229
215
  <div class="help-block with-errors"></div>
230
216
 
@@ -232,25 +218,15 @@
232
218
 
233
219
  </div>
234
220
 
221
+
222
+
235
223
  <div class="form-group">
236
224
 
237
- <label class="control-label col-xs-3">セレクトボックス(search)</label>
225
+ <label class="control-label col-xs-3">セレクトボックス(動的)</label>
238
226
 
239
227
  <div class="col-xs-9">
240
228
 
241
- <select id="select_id1" class="selectpicker form-control" data-live-search="true" width="auto">
229
+ <select class="form-control" id="select_id3"></select>
242
-
243
- <option selected>選択肢1</option>
244
-
245
- <option>選択肢2</option>
246
-
247
- <option>選択肢3</option>
248
-
249
- <option>テストA</option>
250
-
251
- <option>テストB</option>
252
-
253
- </select>
254
230
 
255
231
  <div class="help-block with-errors"></div>
256
232
 
@@ -262,60 +238,18 @@
262
238
 
263
239
  <div class="form-group">
264
240
 
265
- <label class="control-label col-xs-3">セレクトボックス(multiple)</label>
266
-
267
- <div class="col-xs-9">
241
+ <div class="col-xs-offset-3 col-xs-9">
268
-
242
+
269
- <select id="select_id2" class="selectpicker form-control" multiple >
243
+ <button id="send_button" type="submit" class="btn btn-primary btn-large">
270
-
244
+
271
- <option selected>ガリガリ君(ソーダ味)</option>
245
+ <i class="fa fa-send fa-lg"></i>送信
272
-
273
- <option>ハーゲンダッツ</option>
246
+
274
-
275
- <option>ピノ</option>
276
-
277
- <option>ガリガリ君(コーラ味)</option>
278
-
279
- </select>
247
+ </button>
280
-
281
- <div class="help-block with-errors"></div>
282
248
 
283
249
  </div>
284
250
 
285
251
  </div>
286
252
 
287
-
288
-
289
- <div class="form-group">
290
-
291
- <label class="control-label col-xs-3">セレクトボックス(動的)</label>
292
-
293
- <div class="col-xs-9">
294
-
295
- <select class="form-control" id="select_id3"></select>
296
-
297
- <div class="help-block with-errors"></div>
298
-
299
- </div>
300
-
301
- </div>
302
-
303
-
304
-
305
- <div class="form-group">
306
-
307
- <div class="col-xs-offset-3 col-xs-9">
308
-
309
- <button id="send_button" type="submit" class="btn btn-primary btn-large">
310
-
311
- <i class="fa fa-send fa-lg"></i>送信
312
-
313
- </button>
314
-
315
- </div>
316
-
317
- </div>
318
-
319
253
  </form>
320
254
 
321
255
  <i id="processing" class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
@@ -330,102 +264,278 @@
330
264
 
331
265
  ```
332
266
 
333
- コード.js】
267
+ 【javascript.html
334
268
 
335
269
  ```
336
270
 
337
- function doGet() {
338
-
339
- return HtmlService.createTemplateFromFile('index')
340
-
341
- .evaluate()
342
-
343
- .setSandboxMode(HtmlService.SandboxMode.IFRAME)
344
-
345
- .addMetaTag('viewport', 'width=device-width, initial-scale=1')
346
-
347
- .setTitle('gas入力フォームサンプル');
348
-
349
- }
350
-
351
-
352
-
353
- function registerSSByFormData(data) {
354
-
355
-
356
-
357
- Logger.log("data = %s", data);
358
-
359
-
360
-
361
- var datasheet = SpreadsheetApp.openById('送信データを登録するスプレッドシートのID').getSheetByName('シート名');
362
-
363
- var now = new Date();
364
-
365
-
366
-
367
- var i = datasheet.getLastRow() + 1;
368
-
369
- datasheet.getRange(i, 1).setValue(data[ 1]);
370
-
371
- datasheet.getRange(i, 2).setValue(data[ 2]);
372
-
373
- datasheet.getRange(i, 3).setValue(data[ 3]);
374
-
375
- datasheet.getRange(i, 4).setValue(data[ 4]);
376
-
377
- datasheet.getRange(i, 5).setValue(data[ 5]);
378
-
379
- datasheet.getRange(i, 6).setValue(data[ 6]);
380
-
381
- datasheet.getRange(i, 7).setValue(data[ 7]);
382
-
383
- datasheet.getRange(i, 8).setValue(data[ 8]);
384
-
385
- datasheet.getRange(i, 9).setValue(data[ 9]);
386
-
387
- datasheet.getRange(i, 10).setValue(data[10]);
388
-
389
- datasheet.getRange(i, 11).setValue(data[11]);
390
-
391
- datasheet.getRange(i, 12).setValue(Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss'));
392
-
393
- result = true;
394
-
395
-
396
-
397
- return {data: true};
398
-
399
- }
400
-
401
-
402
-
403
- function getSelectListFromMasterSS() {
404
-
405
- var selectList = [];
406
-
407
-
408
-
409
- // マスタデータシートを取得
410
-
411
- var datasheet = SpreadsheetApp.openById('マスタデータのスプレッドシートのID').getSheetByName('シート名');
412
-
413
- // B列2行目のデータからB列の最終行までを取得
414
-
415
- var lastRow = datasheet.getRange("B:B").getValues().filter(String).length - 1;
416
-
417
- Logger.log("lastRow = %s", lastRow);
418
-
419
- // B列2行目のデータからB列の最終行までを1列だけ取得
420
-
421
- selectList = datasheet.getRange(2, 2, lastRow, 1).getValues();
422
-
423
- Logger.log("selectList = %s", selectList);
424
-
425
-
426
-
427
- return {data: selectList};
428
-
429
- }
271
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
272
+
273
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
274
+
275
+ <script src="https://use.fontawesome.com/7bcbed1321.js"></script>
276
+
277
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
278
+
279
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
280
+
281
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script>
282
+
283
+ <script>
284
+
285
+ /**
286
+
287
+ コード.jsのgetSelectListFromSS()を読んで、スプレッドシートのデータをもとに、セレクトボックスを構築する
288
+
289
+ */
290
+
291
+ function getSelectList() {
292
+
293
+ try {
294
+
295
+ google.script.run
296
+
297
+ .withSuccessHandler(function(result) {
298
+
299
+
300
+
301
+ console.log("result", result);
302
+
303
+
304
+
305
+ var select = document.getElementById('select_id3');
306
+
307
+ var option = document.createElement('option');
308
+
309
+ option.setAttribute('value', '');
310
+
311
+ option.setAttribute('selected', true);
312
+
313
+ option.innerHTML = '未選択';
314
+
315
+ select.appendChild(option);
316
+
317
+
318
+
319
+ for (var i = 0; i < result.data.length; i++) {
320
+
321
+ option = document.createElement('option');
322
+
323
+ option.setAttribute('value', i + 1);
324
+
325
+ option.innerHTML = result.data[i];
326
+
327
+ select.appendChild(option);
328
+
329
+ }
330
+
331
+
332
+
333
+
334
+
335
+ })
336
+
337
+ .withFailureHandler(function(result) {
338
+
339
+ toastr.error('リストの取得に失敗しました。', result);
340
+
341
+ })
342
+
343
+ .getSelectListFromMasterSS();
344
+
345
+
346
+
347
+ } catch (e) {
348
+
349
+ toastr.error(e);
350
+
351
+ }
352
+
353
+ }
354
+
355
+
356
+
357
+ /**
358
+
359
+ コード.jsのregisterSSByFormData()を呼んで、フォームの内容をスプレッドシートに登録する
360
+
361
+ */
362
+
363
+ function sendData() {
364
+
365
+
366
+
367
+ try {
368
+
369
+
370
+
371
+ processing(true);
372
+
373
+
374
+
375
+ var elemntIFrame = window.parent.document.getElementById('userHtmlFrame');
376
+
377
+ elemntIFrame.setAttribute('scrolling', 'no');
378
+
379
+ elemntIFrame.setAttribute('frameborder', '0');
380
+
381
+
382
+
383
+ console.log("document.getElementById('select_id2').selectedIndex)", document.getElementById('select_id2').selectedIndex);
384
+
385
+
386
+
387
+ var data = [];
388
+
389
+ data[0] = 'dummy';
390
+
391
+ data[1] = document.getElementById('input_id1').value;
392
+
393
+ data[2] = document.getElementById('input_id2').value;
394
+
395
+ data[3] = document.getElementById('input_id3').checked;
396
+
397
+
398
+
399
+ console.log("data", data);
400
+
401
+
402
+
403
+
404
+
405
+ google.script.run
406
+
407
+ .withSuccessHandler(function(result) {
408
+
409
+ processing(false);
410
+
411
+ if (result.data) {
412
+
413
+ toastr.info('送信完了');
414
+
415
+ } else {
416
+
417
+ toastr.error('送信失敗しました');
418
+
419
+ }
420
+
421
+ })
422
+
423
+ .withFailureHandler(function(result) {
424
+
425
+ processing(false);
426
+
427
+ toastr.error('データ送信に失敗しました。', result);
428
+
429
+ })
430
+
431
+ .registerSSByFormData(data);
432
+
433
+
434
+
435
+ } catch (e) {
436
+
437
+ processing(false);
438
+
439
+ toastr.error(e);
440
+
441
+ }
442
+
443
+
444
+
445
+ }
446
+
447
+
448
+
449
+ // multipeセレクトをカンマ区切りのテキストにして取得
450
+
451
+ function getMultipleSelectedText(selectOptions){
452
+
453
+ console.log(selectOptions, selectOptions.length);
454
+
455
+ var arr = [];
456
+
457
+ for(var i = 0; i < selectOptions.length; i++) {
458
+
459
+ if(selectOptions[i].selected){
460
+
461
+ arr.push(selectOptions[i].value);
462
+
463
+ }
464
+
465
+ }
466
+
467
+ return arr.join(',');
468
+
469
+ }
470
+
471
+
472
+
473
+ // 処理中アイコン表示・非表示
474
+
475
+ function processing(processing) {
476
+
477
+ if (processing) {
478
+
479
+ document.getElementById('processing').style.visibility = "visible";
480
+
481
+ document.getElementById('send_button').setAttribute("disabled", true);
482
+
483
+ } else {
484
+
485
+ document.getElementById('processing').style.visibility = "hidden";
486
+
487
+ document.getElementById('send_button').removeAttribute("disabled");
488
+
489
+ }
490
+
491
+ }
492
+
493
+
494
+
495
+ // ロード完了後の処理
496
+
497
+ $(function() {
498
+
499
+ // トースト通知の位置指定
500
+
501
+ toastr.options.positionClass = "toast-bottom-left";
502
+
503
+ // バリデーションチェック有効化
504
+
505
+ $('#myForm').validator();
506
+
507
+ // 処理中アイコン非表示
508
+
509
+ processing(false);
510
+
511
+ // セレクトボックスのリストを動的に取得する
512
+
513
+ getSelectList();
514
+
515
+
516
+
517
+ // submit時のイベント登録
518
+
519
+ $('#myForm').validator().on('submit', function(e) {
520
+
521
+ if (document.getElementById('send_button').className.indexOf("disabled") != -1) {
522
+
523
+ // submit用のボタンのスタイルにdisabledが設定されていればバリデーションエラー
524
+
525
+ } else {
526
+
527
+ // バリデーションエラーでなければ送信
528
+
529
+ sendData();
530
+
531
+ }
532
+
533
+ })
534
+
535
+ });
536
+
537
+ </script>
538
+
539
+
430
540
 
431
541
  ```