• 締切済み

javascriptについて

Javascriptを使用して簡単なツールを作りたいのですが、初心者なので分からず困っています。詳しく教えて頂けると助かります！ 現状このような感じで、機能していない状態です。ここにjavascriptで、プルダウンで選択したものによって表示する内容を変えるためにはどのような文にしたら良いのでしょうか？ 例えば、プルダウンで【卵】【焼く】を選択した時には、【目玉焼き】 【ゆでる】に変えると、【ゆで卵】といったように、組み合わせこどに表示される内容を変えたいです。 また、検索ボタンやリセットボタンを連動させたいです。検索ボタンを押すと結果が余っているスペースに表示されるようにしたいです。色々と申し訳ありませんが、教えて頂けると助かります！ <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> </head> <body> <h1>見出し</h1> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="材料"> <option value="1">卵</option> <option value="2" selected>じゃがいも</option> <option value="3">にんじん</option> </select> </form><br> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <select name="調理"> <option value="1">焼く</option> <option value="2" selected>ゆでる</option> <option value="3">蒸す</option> </select> </form> <form><input type="hidden" id="auth_token" name="auth_token" value="06482d99b3270c4fe048edc8a8d1ea38f2411567"> <input type=" submit" name="search" value=" 検索" /> <input type="reset" value="リセット"> </form> </body> </html>

みんなの回答

  • lefty17
  • ベストアンサー率21% (46/214)
回答No.1

いろいろと直すところがあります。 ・<form>タグを３つ記載しているようですが、分ける必要がないので１つでOKです。　 ・<select>タグのname属性に全角マルチバイト文字を使っていますが、javascriptで扱うには半角文字にしないと不都合があります。 ・検索ボタンsubmit時に javascriptで扱うにはonclickイベントなどを使う必要が有ります。

ssaauk
質問者

お礼

回答ありがとうございます！ いろいろ思考錯誤していこうと思います！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>１</OPTION> <OPTION value=2>２</OPTION> <OPTION value=3>３</OPTION> <OPTION value=4>４</OPTION> <OPTION value=5>５</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で１・２・３・４・５のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">１袋<BR> <INPUT type="radio" name="name1" value="3900">２袋<BR> <INPUT type="radio" name="name1" value="5800">３袋<BR> <INPUT type="radio" name="name1" value="7500">４袋<BR> <INPUT type="radio" name="name1" value="8500">５袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • select値をhiddenのvalueに渡したい

    selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して、 hiddenのvalue値(id)がselectで選択されたvalue値になるような フォームを作りたいのですが、作り方をお教え頂ければ幸いです。 <form name="form" method="get" action="index.cgi"> <select name="mode"> <option value="100023">和書</option> <option value="100241">洋書</option> <option value="100524">エレクトロニクス</option> </select> <input type="hidden" name="serch_janru" value="id" /> <input type="text" name="keyword" value="keyword" /><input type="submit" name="submit" value="商品を検索" /> </form> ソース等、具体的にお教え頂けると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • javascriptについての質問です。複数の一つのselect等で選

    javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　a">a</OPTION> <OPTION VALUE="　b">b</OPTION> <OPTION VALUE="　c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　壱">壱</OPTION> <OPTION VALUE="　弐">弐</OPTION> <OPTION VALUE="　参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?

  • smarty テンプレートにうめこんだjavascriptが、エラーになってしまいます。

    HTMLでは動いたjavascriptが、smartyのテンプレートに埋め込んだところ、"document.wakareru.wakare.valueはNullまたはオブジェクトではありません"　というエラーが出て動かなくなりました。 理由がさっぱりわからないのですが、なにが原因なのでしょうか・・・ ソースは以下のようにかいています。 {literal} <script type="text/javascript"> <!-- function tobu(){ var obj=document.wakareru.wakare.value; document.wakareru.action=obj; document.wakareru.submit(); } // --> </script> {/literal} ------------------------------------------------------------ <form name="wakareru" method="post"> <select name="wakare" onchange="tobu()"> <option value="ent.php" selected="selected">選択して下さい</option> <option value="flier_input.php">かきく</option> <option value="coupon_ud.php">あいう</option> <option value="job_list.php">すせそ</option> </select> <input name="kid" type="hidden" value="{$koary[nloop].kid}" /> <input name="did" type="hidden" value="{$koary[nloop].did}" /> </form>

    • 締切済み
    • PHP
  • セレクトボックスとチェックボックスを使った絞込み検索

    Yomi-Searchについての質問なのですがタイトルの通りの質問でチェックボックスを使った絞り込み検索では 01_03 04_01 と検索結果に表示されるのですがセレクトボックスとチェックボックスを組み合わせて絞り込み検索をしてみると 01_0304_01 とこのようにカテゴリとカテゴリの間にスペースが入らず絞り込み検索が出来ません‥ タグはこのように書きました。 <FORM action="http://www..." method="get" target="" name="form1"> <INPUT type="hidden" name="mode" value="search"> <INPUT type="hidden" name="page" value="1"> <INPUT type="hidden" name="sort" value="mark"> <INPUT type="hidden" name="engine" value="pre"> <INPUT type="hidden" name="kn" value="30"> <SELECT size="1" name="word"> <OPTION type="selected" value="">--------</OPTION> <option value="01_01" name="word1">○○○</option> <option value="01_02" name="word2">○○○</option> <option value="01_03" name="word3">○○○</option> </SELECT><BR> <BR> <INPUT type="checkbox" name="word4" value="04_01">○○○<BR> <INPUT type="checkbox" name="word5" value="04_02">○○○<BR> <INPUT type="checkbox" name="word6" value="04_03">○○○<BR> <BR> <INPUT type="submit" value=" 検 索 "> <INPUT type="reset" value="リセット"> &nbsp; </FORM> 全くの初心者ですいませんが良きアドレスなどをお願いします。

  • php ハイパーリンクについて

    php ハイパーリンクについて質問ですが、 <form action="<?=$_SERVER["SCRIPT_NAME"] ?>" method="get"> </select> <input type="hidden" name="word" value="<?php print(htmlspecialchars($word, ENT_QUOTES)); ?>"> <input type="hidden" name="ger" value="<?php print(htmlspecialchars($ger, ENT_QUOTES)); ?>"> <select name="sort"> <option value="stand">新着</option> <option value="lowPrice">安い</option> <input type="submit" value="検索"> </select> </form> 上記のform actionと同じ機能をハイパーリンクで表示させるにはどのようにしたらよいのでしょうか？

    • ベストアンサー
    • PHP
  • 複数選択した情報をそのまま次のステップに移行させる方法

    PHP5.2.4を使用しています。 ちょっとPHPと直接関係があるかは分かりませんがお願いします。 選択メニューで複数選択できるようにnameをkey[]として設定して、 例えばこの場合はaとbを選択します。 送信ボタンを押して次の[form2.php]に移ったとします。 そこでprint_r($_POST['key']);とすると、 Array([0] => 'a' [1] => 'b') と表示されるのですが、この$_POST['key']をhiddenで <input type="hidden" name="key[]" value="{$_POST['key']}"> ともたせたいのですが、このやり方だと次の[form3.php]に 移ったときにはprint_r($_POST['key']);とすると Array としか表示されません（当たり前かもしれませんが・・・） これをなんとかして <input type="hidden" name="key[]" value="{$_POST['key']}"> このような持たせ方で移行させる方法はないでしょうか？ つまり、 <input type="hidden" name="key1" value="{$_POST['key'][0]}"> <input type="hidden" name="key2" value="{$_POST['key'][1]}"> とはしたくないのです。 [form1.php] <select name="key[]" size="3" multiple> <option value="a">あ</option> <option value="b">い</option> <option value="c">う</option> </select> [form2.php] <input type="hidden" name="key[]" value="{$_POST['key']}">

    • ベストアンサー
    • PHP
  • 他フォームの入力データの引継ぎ

    入力フォームを2つ用意し 第1フォームの入力欄の1部を第2フォームの入力欄のデータとして submitさせたいのですが <INPUT TYPE="radio">と<SELECT>の入力値がうまく引継げません。 下記のようなJavaスクリプトとHTMLなのですが Javaスクリプトで「value」を＝にすると 「radio」のほうはundefin、 「SELECT」で複数選択した場合は、一つ目の選択肢のみしか 引継げませんでした。 Javaスクリプトでうまくいく方法がありましたら ご教示ください。 ----Javaスクリプト-------------------------------- function aaa() { document.FROM2.A.value = document.FROM1.A.value; document.FROM2.B.value = document.FROM1.B.value; document.FROM2.C.value = document.FROM1.C.value; document.FROM2.submit(); } ----HTML-------------------------------- <FORM NAME="FROM1" METHOD="POST" ACTION="***"> <SELECT NAME="A" MULTIPLE> <OPTION VALUE="aa">セレクトa <OPTION VALUE="bb">セレクトb <OPTION VALUE="cc">セレクトc <OPTION VALUE="dd">セレクトd </SELECT> <INPUT TYPE="radio" NAME="B" VALUE="" CHECKED>選択なし <INPUT TYPE="radio" NAME="B" VALUE="1" CHECKED>ラジオ1 <INPUT TYPE="radio" NAME="B" VALUE="2" CHECKED>ラジオ2 <INPUT TYPE="text" NAME="C"> <INPUT TYPE="text" NAME="D"> <INPUT TYPE="submit" NAME="OK_BTN" VALUE="ＯＫ"> </FORM> <FORM NAME="FROM2" METHOD="POST" ACTION="***"> <INPUT TYPE="hidden" NAME="A"> <INPUT TYPE="hidden" NAME="B"> <INPUT TYPE="hidden" NAME="C"> <INPUT type="button" onClick="JavaScript:aaa();" name="OK_BTN" value="ＯＫ"> </FORM>

  • ショッピングカートの精算

    今、簡単なショッピングカートを作成しているのですが、品物の個数を プルダウンメニューで選択して、確認ボタンを押した時に品物の個数と その金額を精算するというスクリプトで悩んでいます。データベースなどは使わずにＰＨＰだけで今進めています。 なにか例などを上げていただけますでしょうか？ スクリプトは下記のような感じで作っています。 <form method = "post" action = "syoppingkakunin.php"> <select name = "ringo"> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> </select> <input type = "submit" name = "submit" value = "確認"> <input type = "hidden" name = "Fruit" value = "ringo"> <input type = "hidden"name = "ringo" value = "100"> </form>

    • ベストアンサー
    • PHP
  • プルダウンを選択していないときは、初期値(selected)の値を、選

    プルダウンを選択していないときは、初期値(selected)の値を、選択したときは選択値を、hiddenで渡したい。 ▽プルダウン例 <form> <select> <option value="0" selected>A</option> <option value="4">B</option> <option value="6">C</option> </select> </form> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="category_name" value="hoge" type="hidden"> ※formとかselectにid振っても構いません。 ※javascriptでやりたいです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する