検索バーについてのアドバイスをお願いします| OKWAVE

検索表示について

このようなプルダウン付きの検索バーを作成しています。この検索結果をこの検索バーの下に表示させるためにはどうすればいいでしょうか？よろしくお願いします。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript">  </script> <br> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" name="p" value="" size="50" maxlength=255 > <input type="submit" value="検索"> </form> </body> </html>

記述方法について

よろしくお願いします。前回こちらで教えて頂いたソースを基に表示するテーブルの並び方を変えたいと思っています。理想の並び方は、例としてくまさる　　　　　　　　　　　くま　　さるごりら　　これらを→ごりら　うま　うま　　　　　　　　　　　りすりすというように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){ 　　var tr = document.createElement("tr"); 　　trs[0] = document.createElement("tr"); 　　trs[1] = document.createElement("tr"); 　　trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので大変申し訳ありませんが、ご指導願えればと思います。よろしくお願いします。

POSTすると配列の数がおかしくなる

matとquaとhowtoをそれぞれ4つPOSTしているのですが、POSTされたデータを受け取るとmat4つ、qua5つ、howto5つと数がおかしくなります。なぜかわかりません。とくにインクリメントしていないのに増えます。教えて下さい。 <script type="text/javascript"> function myAdd(obj){ var max=15; var c=count("mat"); if(c>=max) return false; var oTR=document.createElement("tr"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); if(c>=max-1) obj.disabled=true; } function count(name){ var tags=document.getElementsByTagName("input"); var ta=document.getElementsByTagName("textarea"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); if(tags){ for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } } if(ta){ for(var i=0;i<ta.length;i++){ if(ta[i].name.match(reg)){ c++; } } } return c; } function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } </script> </head> <body> <form method="post" enctype="multipart/form-data" action="check.php"> <textarea name="explain"></textarea> <table id="t0" border> <tbody> <tr> <td><input type="text" name="mat1" /></td> <td><input type="text" name="qua1" /></td> </tr> <tr> <td><input type="text" name="mat2" /></td> <td><input type="text" name="qua2" /></td> </tr> <tr> <td><input type="text" name="mat3" /></td> <td><input type="text" name="qua3" /></td> </tr> <tr> <td><input type="text" name="mat4" /></td> <td><input type="text" name="qua4" /></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd(this)"> <br /> <span id="area"> <textarea name="howto1"></textarea> <textarea name="howto2"></textarea> <textarea name="howto3"></textarea> <textarea name="howto4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd(this)"> <input type="submit" value="送る"> </form>

greasemonkeyでfunction動かない

greasemonkeyでスクリプトを作成したいのですが、テスト用に書いたjavascriptをぐれもんに設定したところ、スクリプトが起動しなくなりました。 ※javascript、greasemonkey共に初心者です。ご指摘いただけると幸いです。 HTML部分は、既存のサイトにつき変更できないため、ぐれもん（JS）にて、追加機能を持たせたい。＝＝＝＝＝＝＝作成したサンプルソース JSで作成した、最下部の入力文字を発送日窓複数に一括反映するためのスクリプトです。＝＝＝＝＝＝＝ <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <body> <form name="rjForm2"> <table> <tr> <td> <input type="text" name="shipping_date_123456-12345678-123456781">発送日 </td> </tr> <tr> <td> <input type="text" name="pay_date_123456-12345678-123456781">振込日 </td> </tr> </table> <table> <tr> <td> <input type="text" name="shipping_date_123456-12345678-123456785">発送日 </td> </tr> <tr> <td> <input type="text" name="pay_date_123456-12345678-123456785">振込日 </td> </tr> </table> </form> </body> ＝＝＝＝＝＝上記JS部分を以下のようにgreasemonkeyに反映した経緯と、結果・サイトで見つけたサンプルを元にwindow.onloadの前後は、（）を使ったら、この部分は、実行できた。・しかし、function test部分は、（）を使ってもできず、firebugでは、「test is not defined」と出て、発送日窓に一括登録ができない。＝＝＝＝＝＝以下、greasemonkeyに設定したスクリプト ( window.onload=function(){ var myForm=document.createElement('form'); myForm.setAttribute("name","frm_test2"); var inps=new Object; inps[0]=document.createElement('input'); inps[0].setAttribute("type","text"); inps[0].setAttribute("name","atai"); inps[0].setAttribute("value",""); inps[1]=document.createElement('input'); inps[1].setAttribute("type","button"); inps[1].setAttribute("onClick",'test()'); inps[1].setAttribute("value","実行"); for(var i in inps){ myForm.appendChild(inps[i]); } document.body.appendChild(myForm); }()); function test(){ num = document.rjForm2.length for (var i=0; i<num; i++){ formname = document.rjForm2[i].name; formname=formname.substring(0,13); if (formname=="shipping_date"){ document.rjForm2[i].value = document.frm_test2.atai.value; } } } ＝＝＝＝＝＝＝何卒よろしくお願いいたします。

いつも参考にさせて頂いています。

いつも参考にさせて頂いています。 javascriptでセレクトメニューを作っているのですがうまく出来ないのでどなたか教えて下さい。宜しくおねがいします。３連動するセレクトメニューで３つ目のセレクトメニューを選ぶと選ばれた項目に対応するURLに飛ぶように作っています。ここからが質問なのですが、ページに飛んだ時にセレクトメニューで選択した内容が消えてしまいます・・・飛んだ先のページでも、選択した内容を表示させるにはどのようにすればいいのでしょうか？ご存知の方がいましたら教えて下さい。 ---html部分---- <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <form id="f0"> <select id="s0"> <option value="">----------------</option> </select> <select id="s1"> <option value="">----------------</option> </select> <select id="s2"> <option value="">----------------</option> </select> </form> </body> </html> ---外部javascriptファイル---- var data= { 吉野家: { "牛丼(並)":{0:"380円"}, "牛丼(大盛)":{1:"480円"}, "牛丼(特盛)":{2:"630円"} } ,松屋: { "牛丼(並)":{3:"320円"}, "牛丼(大盛り)":{4:"420円"}, "牛丼(特盛)":{5:"520円"} } ,すき家: { "牛丼(並)":{6:"280円"}, "牛丼(大盛)":{7:"380円"}, "牛丼(特盛)":{8:"480円"} }; window.onload=function(){ s0=document.getElementById("s0"); s1=document.getElementById("s1"); s2=document.getElementById("s2"); setSelect(data,s0); s0.onchange=function(){ clearSelect(s2); if(this.value==""){ clearSelect(s1); }else{ setSelect(data[this.value],s1); } } s1.onchange=function(){ if(this.value==""){ clearSelect(s2); }else{ setSelect(data[s0.value][this.value],s2); } } s2.onchange=function(){ location.href="/////////"; } } function setSelect(obj,sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.setAttribute("value",""); op.appendChild(document.createTextNode("----------------")); sel.appendChild(op); for(var i in obj){ var txt=(typeof obj[i]=="object")?i:obj[i]; var op=document.createElement("option"); op.setAttribute("value",i); op.appendChild(document.createTextNode(txt)); sel.appendChild(op); } } function clearSelect(sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.appendChild(document.createTextNode("----------------")); sel.appendChild(op); };

選択されたラジオボタンの値が取り出せない

フォームを使って普通のHTMLで記述すれば選択された値が送られてくると思うのですが、エレメントを作って次のようなやり方だと、「2」を選択したとしてもvalueが「1」しか返ってきません。どうすれば適切に値を取り出すことができるのでしょうか？ var element1 = document.createElement("span"); element1.innerHTML = "<input type='radio' name='a' value=1>"; document.body.appendChild(element1); var element2 = document.createElement("span"); element2.innerHTML = "<input type='radio' name='a' value=2>"; document.body.appendChild(element2); ～何かクリックした先でidが「a」のオブジェクトを取得し、選択されてた値を取り出したい～ var ele = document.getElementById("a"); alert(ele.value);←1しか表示されない

javascript でリンクを動的に変更する方法

下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript">  </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&no=[]','search_store1','width=540,height=540')">検索</a>] </td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>

DOMで作ったラジオボタンが選択できない

JavaScript DOM で作成したラジオボタンが選択できません。 Sleipnirの「選択部分のソースを表示」で確認したところ、 name属性だけがセットされていないようで、選択できない原因はそれだと思いますが、セットできない理由が分かりません。どなたか解決策を教えて頂けないでしょうか。なお、下記の何れの方法でもダメなようです。 obj.name = "hogehoge" obj.setAttribute("name", "hogehoge"); 念のため、現象確認用のソースも貼っておきます。 <html> <head> <script type="text/javascript"> function create1() { var rObj = document.createElement("input"); rObj.type = "radio"; rObj.name = "rd"; rObj.value = 5; var divObj = document.getElementById("box"); divObj.appendChild(rObj); } function create2() { var rObj = document.createElement("input"); rObj.setAttribute("type", "radio"); rObj.setAttribute("name", "rd"); rObj.setAttribute("value", "3"); var divObj = document.getElementById("box"); divObj.appendChild(rObj); } </script> </head> <body> <input type="button" value="create1" onClick="create1()"> <input type="button" value="create2" onClick="create2()"> <div id="box"></div> </body> </html>

flickrのAPIを用い、任意の写真を表示する方法

flickrのAPIを用いて、個人のページに、指定した写真を表示させたいと思っています。こちらのページを、参考にして（そのままのソースで）、flickrにアップロードされた最新の写真の中から、「HDR」というタグが付いた写真は表示させられるようになりました。 http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/?ST=swd-tech これを、写真を“撮影した時の時間”で表示させたいと思っています。たとえば、2004年1月16日に撮った写真を表示、といった具合です。 flickrは、HPを見ると、taken on～　と写真を撮った時のデータも表示されており、撮影した時間もAPIから取ってこれると思うのですが、以下のソースをどのように変えたらよいでしょうか。よろしくお願いいたします。 flickr-search.js -------------------------- // 画像検索を行う関数 function photo_search ( param ) { // APIリクエストパラメタの設定 param.api_key = 'APIキー'; param.method = 'flickr.photos.search'; param.per_page = 9; param.sort = 'date-posted-desc'; param.format = 'json'; param.jsoncallback = 'jsonFlickrApi'; // APIリクエストURLの生成(GETメソッド) var url = 'http://www.flickr.com/services/rest/?'+ obj2query( param ); // script 要素の発行 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); }; // 現在の表示内容をクリアする function remove_children ( id ) { var div = document.getElementById( id ); while ( div.firstChild ) { div.removeChild( div.lastChild ); } }; // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list2 = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list2[list2.length] = k+'='+v; } var query = list2.join( '&' ); return query; } // Flickr検索終了後のコールバック関数 function jsonFlickrApi ( data ) { // データが取得できているかチェック if ( ! data ) return; if ( ! data.photos ) return; var list = data.photos.photo; if ( ! list ) return; if ( ! list.length ) return; // 現在の表示内容（Loading...）をクリアする remove_children( 'photos_here' ); // 各画像を表示する var div = document.getElementById( 'photos_here' ); for( var i=0; i<list.length; i++ ) { var photo = list[i]; // a 要素の生成 var atag = document.createElement( 'a' ); atag.href = 'http://www.flickr.com/photos/'+ photo.owner+'/'+photo.id+'/'; // img 要素の生成 var img = document.createElement( 'img' ); img.src = 'http://static.flickr.com/'+photo.server+ '/'+photo.id+'_'+photo.secret+'_s.jpg'; img.style.border = '0'; atag.appendChild( img ); div.appendChild( atag ); } } search-hdr.html ------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Flickr APIによる画像検索 (text)</title> <script type="text/javascript" src="flickr-search.js"></script> <script type="text/javascript"></script> </head> <body> <hr> <div id="photos_here">Loading...</div> <hr> </body> </html>

javascript マウスイベント

動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。

テーブルにおける行(セルにプルダウン含む）の追加方法

追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．1行には，テキストボックスとプルダウンメニューの２つのセルが含まれます．テキストボックスのみであれば，追加に成功します．プルダウンのメニュー項目の追加方法ではなく，プルダウン自体を複製して追加していきたいのですが，参考サイトが見つかりませんでした．また，各行を識別する為一意の名前をつけたいのですが，どう記述したらよろしいでしょうか．お手数おかけしますが，下記ソースのどこが間違っているのか，どう処理すべきなのかを，ご教示頂けますでしょうか．お願い致します． <BODY> <TABLE id="Table1"> <TR> <td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td> <td bgcolor="#5096C9" width="113px"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select></td></tr></TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <script language="JavaScript"> function addRow() { 　var tbl = document.getElementById("Table1").firstChild; 　if (!tbl.tagName) { 　　　tbl = document.getElementById("Table1");} 　var tr = document.createElement("tr"); 　var td1 = document.createElement("td"); 　td1.setAttribute("class","cellWhite"); 　var tx1 = document.createElement("input"); 　tx1.setAttribute("type","text"); 　tx1.setAttribute("value","単語入力"); 　tx1.setAttribute("onFocus","cText(this)"); 　tx1.setAttribute("onBlur","sText(this)"); 　tx1.setAttribute("style","color:#999"); 　td1.appendChild(tx1); 　var td2 = document.createElement("td"); 　var selectName="column";//selectの名前　var options={0:"赤",1:"青",2:"黄"}; 　var c=sel.firstChild; 　while(c){ 　　if(c.name==selectName) sel.removeChild(c); 　　　　c=c.nextSibling;} 　　var e=document.createElement("select"); 　　e.setAttribute("name",selectName); 　　for(var i in options){ 　　　　var o=document.createElement("option"); 　　　　o.setAttribute("value",options[i]); 　　　　o.appendChild(document.createTextNode(options[i])); 　　　　e.appendChild(o);} 　　sel.appendChild(e); 　　tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script> 参考にしたサイトです： http://oshiete1.watch.impress.co.jp/qa4074195.html http://okwave.jp/qa299889.html

javascriptでフォームの値の計算

javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均（最後には標準偏差）を計算しようと思ってます。以下のように考えましたが、うまくいきません。 strが文字列として？扱われてしまっているようです。 strをevalで囲んでみてもダメです。詳しい方教えてください。  <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>

borderの指定方法

var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか？どなたか教えてください。よろしくお願いします。

追加したテキストボックスとテキストエリアの数の制御

下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>

appendChildとinnerHTMLを短く

テーブルのthタグと内容を追加したい・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……

javascriptで困っています。教えてください

JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

javascriptでカレンダーを作る方法

下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>

テーブルの行削除について

以前、テーブルの行追加について教えてもらい出来ましたが逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

PHPのjson_encode()

御世話になります。 PHPからjson_encode() した配列をJavascriptに送って、javascript側ではJSON.parse()でデータを戻して使おうとしていますが、上手く行きません。これは自作のカラオケシステムのプログラムで、歌手の名前を入力してボタンを押すと、MySQLデータベースに登録されたその歌手の曲がすべてセレクトリストに表示され、その中から一曲選択してその曲のカラオケが始まるという仕組みです。以前には働いていたのですが、何かのきっかけでソースコードをいじっている間に働かなくなり、原因がわからないままいろやってみましたが（PHP側でjson-encode なしでやってみたり、javascript側でJSON.parse なしでやってみたり）、PHPの配列データをjavascript側にうまく渡せてないようです。ソースコードを添付しますので、どこがおかしいのかチェックして頂ける方がいらっしゃれば有難く思います、どうかよろしくお願いいたします。ちなみに、曲を選択するには他にもう一つの方法があり、曲の識別番号(Number)を入力する方法でこれはちゃんと働いています。プログラムを走らせた、画面ショットも添付しておきます。 <!DOCTYPE HTML> <html> <head> <title> select_song.php</title> <?php $host = "localhost"; $user = "root"; $pass = "rsi2018"; $database = "karaoke"; $connection = mysqli_connect($host, $user, $pass, $database) or die("cannot connect to database"); //================ for all data ============= $numbers = array(); $titles = array(); $singers = array(); $query ="select number, title, singer from num2song where test<>'redundant' order by title"; // avoid redundant data $result= mysqli_query($connection, $query) or die("fail-1"); $i=0; while($row=mysqli_fetch_assoc($result)) { $numbers[$i]=$row['number']; $titles[$i] =$row['title']; $singers[$i]=$row['singer']; $i++; } $dataCount = $i; $JSnumber = json_encode($numbers); $JStitles = json_encode($titles); $JSsingers = json_encode($singers); ?> <script type="text/javascript"> var totalData = <?php echo $totalCount; ?>; var allNumbers = JSON.parse('<?php echo $JSnumbers; ?>'); var allTitles = JSON.parse('<?php echo $JStitles; ?>'); var allSingers = JSON.parse('<?php echo $JSsingers; ?>'); //============================ function showAllSongs(){ //============================= if(document.getElementById("songNumber").value){ document.getElementById("songNumber").value=""; } if(document.getElementById("mySelect")){ document.getElementById("selectSpace").innerHTML=""; } alert("inside showAllSongs"); alert(totalData); var kashu = document.getElementById("singer").value; alert(kashu); var myParent = document.getElementById("selectSpace"); var selectList = document.createElement("select"); selectList.id ="mySelect"; selectList.name ="mySelect"; myParent.appendChild(selectList); var opt = document.createElement("option"); opt.text = "==== 曲を選ぶ ===`"; opt.value = "dummy"; selectList.appendChild(opt); for(var i=0; i<totalData; i++){ if( allSingers[i].indexOf(kashu) >= 0){ var opt = document.createElement("option"); opt.text = allTitles[i]; opt.value = allNumbers[i]; selectList.appendChild(opt); }else{ continue; } }//for var select = document.getElementById("mySelect"); select.onchange=function(){ document.getElementById("selectNumber2").value = document.getElementById("mySelect").value; } }// function </script> </head> <body style="background-color:navy; color:white ;font-size:14pt"> <form method="POST" action="findsong.php" target="main"> Input song number <br> <input type="text" size="8" name="songnum" id="songNumber" style="font-size:12pt"> <input type="submit" value="Play music" style="font-size:12pt"> </form> <BR> <hr> <form method="POST" action="findsong.php" target="main"> Input singer name <BR> <input type="text" size="26" id="singer" name="singer" style="font-size:16pt"><br> <input type="hidden" name="songnum2" id="selectNumber2"> <input type="button" value="Show songs" onclick="showAllSongs()" style="height:40px;font-size:10pt"> <input type="submit" value="Play Music" style="height:40px;font-size:10pt"> </form> </body> </html>

Jsonpのコールバック関数に内に引数を渡すには？

APIで返されたJsonpコールバック関数に引数を渡したいのですが、やり方が判りません。それともそもそも、間違っていて１．引数を渡さない２．コールバック関数内のデータを一旦変数にいれてコールバック関数内から取り出す。３．　２で取り出したコールバック関数内のデータと１で渡そうとしていた引数を使う。とやったほうがいいのでしょうか。当方経験が浅いためよくわかっていません。基本的な間違いの可能性が高いと思います。識者の方ご教授下さい。お願いします。 function start(){ var str = "渡したい引数"; var param = new Object(); param.keyword = '東京'; param.inputcharset = 'utf8'; param.outputcharset = 'utf8'; param.format = 'jsonp'; param.callback = 'jsonp4travelAPI'; var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?'+obj2query( param ); // script 要素の発行//ここでAPIへリクエストを送る。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); } // 4travel検索終了後のコールバック関数 function jsonp4travelAPI ( data ) { // データが取得できているかチェック // //ここに渡したい引数も持ってきたい。でも str is not definedになります。 alert(str); } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } window.onload =start;

検索バーについてのアドバイスをお願いします

検索バーについて

質問者が選んだベストアンサー

補足 2009/10/23 22:16

その他の回答 (1)

補足 2009/10/23 22:18

関連するQ&A