質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

3306閲覧

inputのnameとidがfalseになる

ao_love

総合スコア441

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2015/02/27 06:05

編集2015/02/27 06:40

お世話になっております。

料金表の編集画面についてのお尋ねです。
既存のデータを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&amp;ID=14" onclick="var ok=confirm('削除してよろしいですか?'); if (ok) location.href='price_group_modify.php?DEL=1&amp;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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

リアルタイムでDBを書き換えています。

そのような機能はそのライブラリにはないと思うので、(そのような機能が本当にあるとしたら)おそらく別の部分に書いてあると思いますよ。

一応、このライブラリを利用したままの解決案を示しますが…… うーん……

lang

1<input type="text" name="name" value="<?=$price_tname[$i]?>" data-orignalName="name">

などと出力しておいて、submitイベントを拾って name属性を data-orignalName属性で上書きしてしまえばいいと思います。

lang

1targetForm.on('submit',function(){ 2 $(this).find('[name]').each(function(){ 3 $(this).attr( 'name', $(this).attr('data-orignalName') || $(this).attr('name') ) 4 }); 5})

みたいな感じ? コードは適当ですのでよろしくお願いします。

投稿2015/02/27 08:43

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ao_love

2015/02/27 09:04

ありがとうございます。 DB書き換えの部分はPHP内に記載されていて、削除ボタンを押すことでGETで値を渡して実行しています。 JavaScriptが分かっておらず、的を得ない質問と捕捉にお付き合いいただいて大変ありがとうございます。 頂いたコードを試してみたいと思います。
ao_love

2015/03/02 06:51

Lhankor_Mhy様に頂いたコードを試してみましたが、結果が変わらず、試行錯誤して編集部分と削除&追加部分を切り離すことに成功しました。 ある意味自己解決ですが、的を得ない質問にお付き合いいただき、コードまで提示してくださったLhankor_Mhyさんをベストアンサーとさせていただきました。 moeru_gomi様、Guu様も拙い質問にお付き合い下さりありがとうございました。
guest

0

コードに不明な点が多いので分かる範囲での回答をいたします。

https://github.com/sutara79/jquery.add-input-area
↑を見る限り、

lang

1<input type="text" name_format="name%d" name="name<?=$price_tid[$i]?>" value="<?=$price_tname[$i]?>"><?=$price_tid[$i]?>

とすればいいのではないかと思いますが、idが必ず連番になる保証があるのかどうか疑問でありますし、そもそもPHPでDBからidを引いて出力しているのであれば何故フォームを増やすのか不明です。
質問者は jquery.addInputArea の使い方を何かしら間違っているような気がします。
PHPで出力するフォーム部分は jquery.addInputArea を動作させずに、追加フォームの部分にだけ動作させるのがよさそうですが、それでもnameが連番でいいのかどうか他人事ながら不安です。
その実装で大丈夫ですか?

投稿2015/02/27 07:07

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2015/02/27 07:11

あ、先に回答がはいってたか。
ao_love

2015/02/27 07:52

ありがとうございます。 的を得ない質問で申し訳ありません。 既存のシステムの修正依頼を受けたものの、jsが全く分からず質問させていただきました。 既存の部分の削除も jquery.addInputAreaで行っているため、動作させない、というのは難しいと思います。 現状では編集のページを開くと既存のデータがinput text内にvalueで表示されるため、そのページ内でも編集は可能です。 該当欄の削除ボタンは各々の隣にあり、リアルタイムでDBを書き換えています。 料金のほかに全体としての備考欄もあり、そちらも編集ができる仕様になっています。 最終的にページの下部に修正登録のボタンがあり、そちらを押すことで備考欄の修正は反映されるのですが、料金や時間の変更は反映されません。 そもそもはこちらが問題でして、ユーザ目線で見ると、修正したところは一括で反映してほしい(し、それができるように見える)ので、なぜ変更が反映しないのか見ていったところこのjqueryのせいではないかというところに行きつきました。
guest

0

jquery.addInputArea.4.6.1.jsとは以下のライブラリでしょうか?

sutara79/jquery.add-input-area

上記ライブラリでしたら、READMEとソースをざっと読んだ限り、
name属性やid属性に連番を降る際、スタートの値を設定するところはありませんでした。

このライブラリを利用しつつ、ao_loveさんが実現しようとしている事はマッチしていないように感じます。
(新規登録部分にのみライブラリを適用し、編集部分は上記ライブラリを除外するなど)

投稿2015/02/27 07:05

編集2015/02/27 07:08
moeru_gomi

総合スコア42

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ao_love

2015/02/27 07:54

ありがとうございます。 Lhankor_Mhy様にもお伝えしましたが、該当部分の削除も同ライブラリで行っているので、除外は難しいです。 削除ボタンと併せて編集、ボタンなどを作成してリアルタイムで一つずつ書き換えるのが現実的なのでしょうか…?
moeru_gomi

2015/02/27 09:05

> そもそもはこちらが問題でして、ユーザ目線で見ると、修正したところは一括で反映してほしい(し、それができるように見える)ので、なぜ変更が反映しないのか見ていったところこのjqueryのせいではないかというところに行きつきました。 > 削除ボタンと併せて編集、ボタンなどを作成してリアルタイムで一つずつ書き換えるのが現実的なのでしょうか…? 恐らく楽なのは、修正登録ボタン押下時にDBも更新する、と言う仕組みに作り変える事かと思います。 `jquery.addInputArea.4.6.1.js`で編集する部分は毎回DELETE、INSERTを行えるなら更に楽さは倍増する気がします。
ao_love

2015/02/27 09:38

ありがとうございます。 やはり一括ですべて更新の方がユーザも使いやすいし、処理もわかりやすくなりますよね。 また色々模索してみたいと思います。 ありがとうございます。
guest

0

jquery.addInputAreaがどのような働きをするかは知らないのですが

id="name<?=$price_tid[$i]?>"

は、試したのでしょうか?

投稿2015/02/27 06:17

Guu

総合スコア142

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ao_love

2015/02/27 06:29

ありがとうございます。 元々id属性はつけていないのですがjsが自動で付加しているようなのです。 念のため id="name<?=$price_tid[$i]?>" を追加して実行してみたところ結果は <div><input id="name0" name="name0" value="60分" type="text">14</div> となりました…
Guu

2015/02/27 06:57

なるほど。IDが無ければjsが勝手につけると言うことなのですね。 2つ教えてください この出力ソースはどうやって確認しましたか? ブラウザのソース表示ですか? 最終的にどういう出力になることを希望しているのですか? 概念では無く、HTMLソース例で示していただけると判りやすいです
ao_love

2015/02/27 07:58

ありがとうございます。 PHP内にはidを付加する記載がないので、おそらくそうだと思います。 ・ソースの確認はブラウザのソース表示を利用しています。 希望する出力は <div><input name="name14" value="60分" type="text">14</div> <div><input name="name15" value="90分" type="text">15</div> というように、データのidと同じ番号がname属性に入ってくれることになります。 (idはなくても構いません)
Guu

2015/02/27 09:54

なるほど。ならばPHPの世界の話ですね HTMLをはきだす前に print_r($price_tid); で配列の中身を確認してみてはどうでしょう? それとinputタグ中のidはブラウザのソースで見ているなら、jsで書き加えることができるのが理解できません。 ただjqueryってエレメントにはidが無いとまずいんじゃありませんでしたっけ? 最後に使ったのが1年以上前なので信ぴょう性は低いです。確認してみてください。 今日はもう帰社しますのでここまでですが、お役に立てずに申し訳ありません。 頑張ってください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問