teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

コードの修正

2020/02/20 05:13

投稿

GenkiSugiyama
GenkiSugiyama

スコア86

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,32 @@
1
1
  ECサイトの送付先選択画面にて下記のようなラジオボタンを用意しています。
2
2
  ![イメージ説明](f814c01fa3b39d31a86e2c14987e7631.png)
3
3
 
4
+ ```HTML
5
+ <div class="info addr_info">
6
+ <h2>お届け先の入力</h2>
7
+ <ul class="addr_choice radio_list">
8
+ <li>
9
+ <label id="optionLbl01">
10
+ <input type="radio" name="receiver_user_type" id="receiver_user_type_X" value="X" onclick="copydata()">
11
+ <span class="radioLabel">注文者の住所にお届けする</span>
12
+ </label>
13
+ </li>
14
+ <li>
15
+ <label id="optionLbl01">
16
+ <input type="radio" name="receiver_user_type" id="receiver_user_type_E" value="E" onclick="javscript:copydata();showReceiverForm();">
17
+ <span class="radioLabel">注文者の情報を元にお届け先を編集する</span>
18
+ </label>
19
+ </li>
20
+ <li>
21
+ <label id="optionLbl01">
22
+ <input type="radio" name="receiver_user_type" id="receiver_user_type_N" value="N" onclick="addrclick()">
23
+ <span class="radioLabel">新しいお届け先を入力する</span>
24
+ </label>
25
+ </li>
26
+ </ul>
27
+ </div>
28
+ ```
29
+
4
30
  ##実現したいこと
5
31
 
6
32
  下二つの選択肢をチェックすると送付先入力フォームが表示され、編集・新規入力ができるようになっています。

1

ソースの追記

2020/02/20 05:13

投稿

GenkiSugiyama
GenkiSugiyama

スコア86

title CHANGED
File without changes
body CHANGED
@@ -1,32 +1,6 @@
1
1
  ECサイトの送付先選択画面にて下記のようなラジオボタンを用意しています。
2
2
  ![イメージ説明](f814c01fa3b39d31a86e2c14987e7631.png)
3
3
 
4
- ```HTML
5
- <div class="info addr_info">
6
- <h2>お届け先の入力</h2>
7
- <ul class="addr_choice radio_list">
8
- <li>
9
- <label id="optionLbl01">
10
- <input type="radio" name="receiver_user_type" id="receiver_user_type_X" value="X" onclick="copydata()">
11
- <span class="radioLabel">注文者の住所にお届けする</span>
12
- </label>
13
- </li>
14
- <li>
15
- <label id="optionLbl01">
16
- <input type="radio" name="receiver_user_type" id="receiver_user_type_E" value="E" onclick="javscript:copydata();showReceiverForm();">
17
- <span class="radioLabel">注文者の情報を元にお届け先を編集する</span>
18
- </label>
19
- </li>
20
- <li>
21
- <label id="optionLbl01">
22
- <input type="radio" name="receiver_user_type" id="receiver_user_type_N" value="N" onclick="addrclick()">
23
- <span class="radioLabel">新しいお届け先を入力する</span>
24
- </label>
25
- </li>
26
- </ul>
27
- </div>
28
- ```
29
-
30
4
  ##実現したいこと
31
5
 
32
6
  下二つの選択肢をチェックすると送付先入力フォームが表示され、編集・新規入力ができるようになっています。
@@ -58,4 +32,108 @@
58
32
 
59
33
  リロードしても保存できる方法についてご教示いただけると大変助かります。
60
34
 
61
- よろしくお願いいたします。
35
+ よろしくお願いいたします。
36
+
37
+ 2019/02/20追記
38
+ ユーザー関数を記述しているjsファイルの内容を記載します。
39
+
40
+ ```JavaScript
41
+ function copydata() {
42
+ var copydata_value = "";
43
+ for(i=0;i<document.form1.receiver_user_type.length;i++){
44
+ if(document.form1.receiver_user_type[i].checked == true){
45
+ copydata_value = document.form1.receiver_user_type[i].value;
46
+ }
47
+ }
48
+ if (copydata_value == 'X' || copydata_value == 'E') {
49
+ document.form1.receiver.value=document.form1.sender.value;
50
+ document.form1.receiver_kana.value=document.form1.sender_kana.value;
51
+
52
+ document.form1.receiver_office_name.value = document.form1.office_name.value;
53
+ document.form1.receiver_office_name_kana.value = document.form1.office_name_kana.value;
54
+ document.form1.receiver_office_dept_name.value = document.form1.office_dept_name.value;
55
+
56
+ document.form1.emergency2_1.value=document.form1.emergency1_1.value;
57
+ document.form1.emergency2_2.value=document.form1.emergency1_2.value;
58
+ document.form1.emergency2_3.value=document.form1.emergency1_3.value;
59
+
60
+ document.form1.post1.value=document.form1.sender_post1.value;
61
+ document.form1.post2.value=document.form1.sender_post2.value;
62
+ changeReceiverArea(document.form1.sender_area.value);
63
+ document.form1.address.value=document.form1.sender_addr.value;
64
+ document.form1.address2.value=document.form1.sender_addr2.value;
65
+ }else {
66
+ document.form1.receiver.value="";
67
+ document.form1.receiver_kana.value="";
68
+ document.form1.receiver_office_name.value = '';
69
+ document.form1.receiver_office_name_kana.value = '';
70
+ document.form1.receiver_office_dept_name.value = '';
71
+ set_null_emergency(2);
72
+ // set_null_emergency(3);
73
+ document.form1.post1.value="";
74
+ document.form1.post2.value="";
75
+ changeReceiverArea(0);
76
+ document.form1.address.value="";
77
+ document.form1.address2.value="";
78
+ }
79
+ }
80
+ ```
81
+ ```Javascript
82
+ function addrclick() {
83
+ var addrclick_value = "";
84
+ for(i=0;i<document.form1.receiver_user_type.length;i++){
85
+ if(document.form1.receiver_user_type[i].checked == true){
86
+ addrclick_value = document.form1.receiver_user_type[i].value;
87
+ }
88
+ }
89
+
90
+ if (addrclick_value == "A") {
91
+ // $('.js_modal').fadeIn();
92
+ document.form1.receiver.value = "";
93
+ document.form1.receiver_kana.value = "";
94
+ set_null_emergency(2);
95
+ document.form1.address.value = "";
96
+ document.form1.address2.value = "";
97
+ changeReceiverArea(0);
98
+ document.form1.post1.value = "";
99
+ document.form1.post2.value = "";
100
+
101
+ return false;
102
+ } else {
103
+ document.form1.receiver.value = "";
104
+ document.form1.receiver_kana.value = "";
105
+ set_null_emergency(2);
106
+ document.form1.address.value = "";
107
+ document.form1.address2.value = "";
108
+ changeReceiverArea(0);
109
+ document.form1.post1.value = "";
110
+ document.form1.post2.value = "";
111
+ }
112
+
113
+ document.form1.receiver_office_name.value = '';
114
+ document.form1.receiver_office_name_kana.value = '';
115
+ document.form1.receiver_office_dept_name.value = '';
116
+ }
117
+ ```
118
+ ```JavaScript
119
+ function showReceiverForm() {
120
+ jQuery('.receiver_address').show();
121
+ }
122
+ ```
123
+ ```JavaScript
124
+ jQuery(function(){
125
+ jQuery('input[name="receiver_user_type"]').click(function(){
126
+ if(this.value == 'X'){
127
+ jQuery('.receiver_address').hide();
128
+ }else{
129
+ jQuery('.receiver_address').show();
130
+ }
131
+ });
132
+
133
+ jQuery('#receiver_user_type_X').trigger('click');
134
+ jQuery.fn.autoKana('#sender_name', '#sender_kana', {katakana : true});
135
+ jQuery.fn.autoKana('#receiver_name', '#receiver_kana', {katakana : true});
136
+ jQuery.fn.autoKana('#sender_office_name', '#sender_office_name_kana', {katakana : true});
137
+ jQuery.fn.autoKana('#receiver_office_name', '#receiver_office_name_kana', {katakana : true});
138
+ });
139
+ ```