• 締切済み

PERL Ajax JSON 付随情報

恐れ入ります。 perl 上でJSON出力された情報を、 別ファイルのinput フィールド上に付随情報を表示したいのですが、苦戦しています。 例)Mysql上に以下のデータがあり、 0001|花|ガーベラ 0002|酒 | ビール 0003|菓子|ピーナッツ {"pro_code":"0001",bunrui":"花","pro_name":"ガーベラ"}, {"pro_code":"0002",bunrui":"酒","pro_name":"ビール"}, {"pro_code":"0004",bunrui":"菓子","pro_name":"ピーナッツ"} と、JSONにより出力したデータを、 別ファイルから読み込み、 input フィールドに0001を入力すると、別フィールドに花、ガーベラと表示されるイメージです。 よろしくお願いします。

  • Perl
  • 回答数1
  • ありがとう数1

みんなの回答

回答No.1

表示がくずれるので空白2文字を全角空白にしていることに注意。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />   <title>Choice</title>   <script type="text/javascript">    <!--     function addListener(elem, ev, listener) {      if (elem.addEventListener) {       elem.addEventListener(ev, listener, false);      }      else if (elem.attachEvent) {       elem.attachEvent('on' + ev, listener);      }      else {       throw new Error('Not support event listener');      }     }     function fillInput() {      var code = document.getElementById('code');      var type = document.getElementById('type');      var name = document.getElementById('name');      var json = '[ \             {"code":"1", "type":"花", "name":"ガーベラ"},\             {"code":"2", "type":"酒", "name":"ビール"},\             {"code":"3", "type":"菓子", "name":"ピーナッツ"}\            ]';      var goods = eval(json);      var i;      for (i = 0; i < goods.length; i++) {        if (goods[i].code == code[code.selectedIndex].value) {          type.value = goods[i].type;          name.value = goods[i].name;          break;        }      }      if (i >= goods.length) {        alert('Unknown code : ' + code[code.selectedIndex].value);        type.value = '';        name.value = '';      }     }     function init() {      fillInput();      addListener(document.getElementById('code'), 'change', fillInput);     }     addListener(window, 'load', init);    //-->   </script>  </head>  <body>   <form id="form1">    code :    <select id="code">     <option value="1" selected>option1</option>     <option value="2">option2</option>     <option value="3">option3</option>    </select><br>    type : <input type="text" id="type" value=""/><br>    name : <input type="text" id="name" value=""/><br>   </form>  </body> </html>

spider32
質問者

お礼

ありがとうございます。大変参考になりました。

関連するQ&A

  • ActionScript JSON

    FLASHのActionScriptから、JSONデータを読み込んで、表示をさせたいのですが、 やり方が分かりません。よろしくお願いします。 JSONにより出力されたデータで、例えば  {001:apple}があった場合、 FLASH上のインプットフィールド上にに001を入力すると、別インプットフィールド上にappleが表示されるようにしたいのですが、方法はありますか? よろしくお願いします。

  • JSON input 一覧表示

    恐れ入ります。 MySQLから、JSON形式で出力された別ファイルのデータを、 javascript にて、input フィールドに記入されたワードにマッチしたデータを一覧表示させる方法を探しています。Googleの検索のように、表示したいのです。 よろしくお願いします。

  • AJAXでのinputもしくはoptionなどのテキスト取得

    お知恵を貸して下さい。。。 今、フォームの各項目を選択してる場合(たとえば、checkedがついてる場合)その要素のテキスト部分を別部分に出力してーというのをjQueryで作ってます。 inputのvalue値やnameは取ってこれるんですが、<input>タグの後のテキスト部分がなかなか思うように取得出来ませんでした。 PHPでのフォームで下記のようにしてるので、どうしてもinputの後のテキストを取りたいのです。(下記の場合、パソコンという部分) ↓ <input type=checkbox name="NAM[1]" value="1">パソコン <input type=checkbox name="NAME[2]" value="1">パソコン <input type=checkbox name="NAME[3]" value="1">パソコン いろいろ試してみたんですけど、そもそのやろうとしてる事は可能なのでしょうか? 説明が下手でごめんなさい、どうぞよろしくお願いします。

    • ベストアンサー
    • AJAX
  • 受け渡した変数が、プログラム実行後に消えてしまう?!

    いつもありがとうございますm(_ _)m。入力画面test1.phpをlocation.replaceを使って[リロードしない為]切り替えて、別の画面test2.phpと連携させています。JSのwindow.openは顧客環境では使えません(大泣) test1.php→test2.php→test1.phpという流れで二つの変数を受け渡ししたいのですが。。。 (1)test1.phpにある変数 $row1[code] $row1[name] inputボタンをクリックすることで、URLを使って次のファイルに渡す <input type="button" value="go2" onClick='location.replace ("http://********/test2.php?row1[code]=<? echo $row1[code];?>&row1[name]=<? echo $row1[name];?>")' name="button"> (2)test2.php フォームのテキストフィールドが用意されている <input name="code" type="text" value="<? echo $row1[code]; ?>"> <input name="name" type="text" value="<? echo $row1[name]; ?>"> test1.phpから、test2.phpの画面に切り替わった瞬間には、2つのの値がキチンと表示されている。 ここでnameに入った値を元に、サブミットボタンで処理。 <input type="submit" name="read" value="読み込み"> この時name部分に関しては、DB読込・結果をname&その他の項目と共にフォーム上にちゃんと再表示できるが、codeの値が消えてしまう。。 PHPの処理部$read部に以下のように2通り、書き加え試しましたが、だめでした。 $row1[code] = $row1[code]; $row1[code] = $_GET['$row1[code]']; なぜ消えてしまうのか? 変数をキープするにはどうしたらいいでしょうか? あるいは、他に良いアイディアなどありましたら、教えて下さい。よろしくお願いいたします。。。

    • ベストアンサー
    • PHP
  • <form>タグに2つのボタン

    <form>タグで2つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか? できればHTMLで、できなければJavaScriptでできますでしょうか? ・button1を押したときは  フィールド「CASE」に1を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは  フィールド「CASE」に2を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • json ajax

    jQueryの話なのですが JSONとajaxって違うものなのですか?

    • ベストアンサー
    • AJAX
  • javascriptからラジオボタンへのアクセス

    cakephpで以下のソースを書き、ラジオボタンタグを出力しました。 $form->create('name' => 'form') $form->radio('TestModel.field',array('指定なし', '無', '有'), 'value' => 0)); $form->end(); ----出力されたHTML(formタグなどは省略しています)------ <input type="radio" name="data[TestModel][field]" id="TestModelField0" value="0" checked="checked" > <label for="TestModelField0">指定なし</label> <input type="radio" name="data[TestModel][field]" id="TestModelField1" value="1" > <label for="TestModelField1">無</label> <input type="radio" name="data[TestModel][field]" id="TestModelField2" value="2" > <label for="TestModelField2">有</label> -------------------------------- [リセット]ボタンのようなのを押した時に、'指定なし'の初期値を選択するようにしたいので、 javascriptでしようとしているのですが、 name属性が"data[TestModel][field]"のためか、 document.form.data[ModelTest][field].value = 0とするとエラーになってしまいます。 (TestModelは宣言されていません。というエラー) ラジオボタンのグループは複数あります。 ラジオボタンにアクセスするにはどうしたらよいでしょうか。

  • perlでAjax

    perlでリアルタイム画面書き換えをしようとおもったら、 Ajaxなどを使うしかないのでしょうか?

    • ベストアンサー
    • CGI
  • struts iterateタグ内のデータ取得方法

    DynaActionFormと、iterateタグを用いて、 複数レコードのデータをTEXTフィールドに設定しています(下記参照)。 入力画面(input.jsp)の次に実行されるActionクラスで、 Textフィールドに表示した配列の項目(sckForm[0].sck_no)の値を取得したいのですが、 記述方法がわからず困っています。 どなたかご存知の方がいらっしゃいましたら、教えてください。 (ソース) ■struts-config.xml <form-beans> <form-bean name="sckForm" type="org.apache.struts.action.DynaActionForm"> <form-property name="sck_no" type="java.lang.String" /> <form-property name="sck_nm" type="java.lang.String" /> </form-bean> ■入力画面(input.jsp) <html:form action="/sck_result.do"> <logic:iterate id="sckForm" name="sck.search" scope="application" indexId="index"> <html:text name="sckForm" property="sck_no" indexed="true"/> <html:text name="sckForm" property="sck_nm" indexed="true"/> </logic:iterate> <html:submit property="submit" value="CSV出力" ></html:submit> </html:form> 実際のHTMLは、下記のように変換されています。 <form name="sckForm" method="post" action="/sample/sck/sck_result.do"> <input type="text" name="sckForm[0].sck_no" value="2005-01-002"> <input type="text" name="sckForm[0].sck_nm" value="A"> <input type="text" name="sckForm[1].sck_no" value="2005-01-003"> <input type="text" name="sckForm[1].sck_nm" value="B"> <input type="submit" name="submit" value="CSV出力"> </form>

  • 同一nameの input type="text" の合計を計算したい

    初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。(inputは1個以上で上限は無し) CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); ( var subtotal = ~~~; ここに上で得た数字を合計するみたいなものがくるのかなと・・・) var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>

専門家に質問してみよう