お世話になっております。
料金表の編集画面についてのお尋ねです。
既存のデータをDBから取得して表示させています。
表示部分のコードは以下です。
lang
1<? for($i=0; $i<$max_cnt; $i++) { ?> 2 3 <div class="stmtbl_var sortcell"> 4 <div><input type="text" name="name" value="<?=$price_tname[$i]?>"></div> 5 <div><input type="text" name="val" value="<?=$price_tval[$i]?>"></div> 6 <div><a class="btn_del" href="price_group_modify.php?DEL=1&ID=<?=$price_tid[$i]?>" onclick="var ok=confirm('削除してよろしいですか?'); if (ok) location.href='price_group_modify.php?DEL=1&ID=<?=$price_tid[$i]?>'; return false;">削除</a></div> 7 </div> 8<? } ?>
変数部分に関しては該当DBから取得し、for文で格納しています。
欄の追加と削除のためにjquery.addInputArea.4.6.1.js
を利用しているのですが、このためか、実際に表示させたもののソースを見ると
lang
1<div><input id="false" name="false" value="60分" type="text"></div> 2<div><input id="false" name="false" value="5,000円" type="text"></div> 3<div><a class="btn_del" href="price_group_modify.php?DEL=1&ID=14" onclick="var ok=confirm('削除してよろしいですか?'); if (ok) location.href='price_group_modify.php?DEL=1&ID=14'; return false;">削除</a></div>
というようにidとnameにfalseが入ってしまいます。
複数データがある際にもすべてのidとnameにfalseが入ってしまうため、既存のデータの編集→保存ができません。
name属性部分にidをいれたく
lang
1<div><input type="text" name="name<?=$price_tid[$i]?>" value="<?=$price_tname[$i]?>"><?=$price_tid[$i]?></div>
のようにしてみたところ結果は
lang
1<div><input id="false" name="name0" value="60分" type="text">14</div> 2<div><input id="false" name="name1" value="90分" type="text">15</div>
となりました。
どのようにすればname属性部分にidを反映させることができますでしょうか?
よろしくお願いします。
=========追記
jquery.addInputArea.4.6.1.js
のコードは以下の通りです。
lang
1/** 2 * jQuery Plugin 3 * jquery.addInputArea.4.6.1 4 * Yuusaku Miyazaki (toumin.m7@gmail.com) 5 * MIT License 6 */ 7(function($) { 8 9$.fn.addInputArea = function(option) { 10 return this.each(function() { 11 Object.create(addInputArea).init(this, option); 12 }); 13}; 14var addInputArea = { 15 /** 16 * 初期化 17 */ 18 init: function(elem, option) { 19 this.elem = elem; 20 return this 21 .setOption(option) 22 .setDelBtnVisibility() 23 .setEventHandler() 24 .setNameAttribute() 25 .saveOriginal(); 26 }, 27 /** 28 * オプションを使用準備 29 */ 30 setOption: function(option) { 31 var id = $(this.elem).attr('id'); 32 this.option = $.extend({ 33 attr_name : (id) ? id + '_%d' : 'aia_%d', 34 area_var : (id) ? '.' + id + '_var' : '.aia_var', 35 area_del : false, 36 btn_del : (id) ? '.' + id + '_del' : '.aia_del', 37 btn_add : (id) ? '.' + id + '_add' : '.aia_add', 38 after_add : false, 39 maximum : false 40 }, option); 41 if (!this.option.area_del) this.option.area_del = this.option.btn_del; 42 return this; 43 }, 44 /** 45 * 削除ボタンの表示状態を決定する 46 */ 47 setDelBtnVisibility: function() { 48 if ($(this.elem).find(this.option.area_var).length == 1) { 49 $(this.elem).find(this.option.area_del).hide(); 50 } 51 return this; 52 }, 53 /** 54 * イベントハンドラ設定 55 */ 56 setEventHandler: function() { 57 var self = this; 58 // -------------------------------- 59 //『追加』ボタンを押した場合の処理 60 // -------------------------------- 61 $(document).on('click', this.option.btn_add, function(ev) { 62 // 品目入力欄を追加 63 var len_list = $(self.elem).find(self.option.area_var).length; 64 var new_list = $(self.option.original).clone(true); 65 66 $(new_list).find('[name]').each(function(idx, obj) { 67 // name, id属性を変更 68 self._changeAttrAlongFormat(obj, len_list, 'name'); 69 self._changeAttrAlongFormat(obj, len_list, 'id'); 70 71 // val, textを空にする。 72 if ($(obj).attr('empty_val') != 'false') { 73 if ( 74 $(obj).attr('type') == 'checkbox' || 75 $(obj).attr('type') == 'radio' 76 ) { 77 obj.checked = false; 78 } else if ( 79 $(obj).attr('type') != 'submit' && 80 $(obj).attr('type') != 'reset' && 81 $(obj).attr('type') != 'image' && 82 $(obj).attr('type') != 'button' 83 ) { 84 $(obj).val(''); 85 } 86 } 87 }); 88 $(new_list).find('[for]').each(function(idx, obj) { 89 // for属性を変更 90 self._changeAttrAlongFormat(obj, len_list, 'for'); 91 }); 92 93 $(self.elem).append(new_list); 94 // 入力欄が2つ以上になるので、削除ボタンを表示する 95 $(self.elem).find(self.option.area_del).show(); 96 97 // 追加上限 98 if ( 99 self.option.maximum !== false && 100 $(self.elem).find(self.option.area_var).length >= self.option.maximum 101 ) { 102 $(self.option.btn_add).hide(); 103 } 104 // 追加後の処理があれば実行する 105 if (typeof self.option.after_add == 'function') self.option.after_add(); 106 }); 107 // -------------------------------- 108 //『削除』ボタンを押した場合の処理 109 // -------------------------------- 110 $(self.elem).on('click', self.option.btn_del, function(ev) { 111 ev.preventDefault(); 112 var check_tmp = confirm('削除してよろしいですか?'); 113 if(check_tmp){ 114 //品目入力欄を削除 115 var idx = $(self.elem).find(self.option.btn_del).index(ev.target); 116 $(self.elem).find(self.option.area_var).eq(idx).remove(); 117 118 var len_list = $(self.elem).find(self.option.area_var).length; 119 120 // 入力欄がひとつになるなら、削除ボタンは不要なので非表示にする 121 if(len_list == 1) $(self.elem).find(self.option.area_del).hide(); 122 123 // 入力欄の番号を振り直す 124 self.setNameAttribute(); 125 126 // 追加上限 127 if ( 128 self.option.maximum !== false && 129 $(self.elem).find(self.option.area_var).length < self.option.maximum 130 ) { 131 $(self.option.btn_add).show(); 132 } 133 } 134 }); 135 return this; 136 }, 137 /** 138 * 入力欄の番号を振り直す 139 */ 140 setNameAttribute: function() { 141 var self = this; 142 $(this.elem).find(this.option.area_var).each(function(idx, obj) { 143 $(obj).find('[name]').each(function(idx_2, obj_2) { 144 // name, id属性を変更 145 self._changeAttrAlongFormat(obj_2, idx, 'name'); 146 self._changeAttrAlongFormat(obj_2, idx, 'id'); 147 }).end() 148 .find('[for]').each(function(idx_2, obj_2) { 149 // for属性を変更 150 self._changeAttrAlongFormat(obj_2, idx, 'for'); 151 }); 152 }); 153 return this; 154 }, 155 /** 156 * クローン元を保管する 157 */ 158 saveOriginal: function() { 159 this.option.original = $(this.elem).find(this.option.area_var).eq(0).clone(true); 160 return this; 161 }, 162 /** 163 * 入力欄の番号を振り直す 164 * @called setEventHandler, setNameAttribute 165 * @params object obj (プラグインを適用するリスト) 166 * @params number idx 通し番号を変更する値 167 * @params string type 属性の名前 168 */ 169 _changeAttrAlongFormat: function(obj, idx, type) { 170 var changed = null; 171 if (/(?:(?![0-9]+$).)+[0-9]+$/.test($(obj).attr(type))) { 172 changed = $(obj).attr(type).replace( 173 /((?:(?![0-9]+$).)+)[0-9]+$/, 174 function() { return arguments[1] + idx; } 175 ); 176 } else { 177 changed = (type == 'name' && $(obj).attr('name_format')) ? 178 $(obj).attr('name_format').replace('%d', idx) : 179 ($(obj).attr('id_format')) ? 180 $(obj).attr('id_format').replace('%d', idx) : false; 181 } 182 $(obj).attr(type, changed); 183 } 184}; 185 186})(jQuery);
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/27 09:04
2015/03/02 06:51