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

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

ただいまの
回答率

90.50%

  • JavaScript

    20431questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    8943questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8163questions

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

JavaScript 疑似的プルダウンからのフォーム送信について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 363

MyQuestioner

score 36

過去の記事に以下のようなものがあったのですが、
WordPressのタクソノミーのドロップダウン表示を親と子で分けたい

上記サイトでは以下のコードでwp_list_categoriesのプルダウン表示を実現していました。

***************************************/
// グローバル
var childListArray = [];
/***************************************
    listToSelect
    ulリストをプルダウンリストへ書き換え、DOM差し替え
    親カテゴリ取得&プルダウン作成
***************************************/
function listToSelect(id){
    var elm = [];
    var title ='カテゴリ選択';

    // 親取得
    jQuery(id+">ul:not([class='children'])>li>a").each(
        function(i){
        elm[i]=jQuery(this);
    });

    var ct='<form>'+"\n"+
        '<select onChange="viewChildLists(value);">'+"\n"+
        '<option value="">'+title+'</option>'+"\n";

    // 親カテゴリプルダウン
    jQuery(elm).each(
        function(i){
            ct += '<option value="'+i+'">'+
                    jQuery(elm[i]).parent().text().substring(0,(jQuery(elm[i]).parent().text().length-jQuery(elm[i]).siblings().text().length))+
                    '</option>'+"\n";
        }
    );
    ct +='</select>'+"\n";

    // ダミー子プルダウン
    ct +='<select id="childList">'+"\n";
    ct +='<option value=""> </option>'+"\n";
    ct +='</select>'+"\n";
    ct +='<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />'+"\n";
    ct +='</form>'+"\n";

    jQuery(id+" ul").replaceWith(ct);

}

/***************************************
    createChildLists
    子カテゴリリスト取得
    グローバル変数へ保持。
***************************************/
function createChildLists(id){
    var parent = [];
    var child =[];

    // 親カテゴリのタイトルとURL取得
    jQuery(id+">ul:not([class='children'])>li>a").each(
        function(p){
        parent[p] = new Array();
        parent[p]["href"]=jQuery(this).attr("href");
        // 親カテゴリを件数ごと取得する
        parent[p]["title"]=jQuery(this).parent().text().substring(0,(jQuery(this).parent().text().length-jQuery(this).siblings().text().length));
    });

    // 子カテゴリ取得
    jQuery(id+">ul:not([class='children'])>li").each(
        function(j){
            child[j] =  new Array();
            jQuery(id+">ul:not([class='children'])>li:eq("+j+")>ul.children>li>a").each(
                function(i){
                    child[j][i]=jQuery(this);
                }
            );
        }
    );

    // 子カテゴリ配列をグローバル変数へ入れる
    jQuery(id+">ul:not([class='children'])>li>a").each(
        function(j){
            childListArray[j] = new Array();
            // 子カテゴリがないときの為に親カテゴリを入れておく
            childListArray[j][0] = new Array();
            childListArray[j][0]["href"]=parent[j]["href"];
            childListArray[j][0]["title"]=parent[j]["title"];
            // 子カテゴリのタイトルとURL設定
            jQuery(child[j]).each(
                function(i){
                    childListArray[j][i+1] = new Array();
                    childListArray[j][i+1]["href"]=jQuery(child[j][i]).attr("href");
                    childListArray[j][i+1]["title"]=jQuery(child[j][i]).parent().text();
                }
            );
        }
    );

}
// 子プルダウン表示
function viewChildLists(value){
    if(value!=''){
        jQuery("#childList").empty();
        for(j=0; j< childListArray[value].length; j++){
            jQuery("#childList").append(jQuery('<option>').attr("value",childListArray[value][j]["href"]).text(childListArray[value][j]["title"]));
        }
    }
}

// 初期化
jQuery(document).ready(function() {
    createChildLists(".categories");    // 子カテゴリリストを先に作る
    listToSelect(".categories");        // なぜならDOM差し替えでulが消えてしまうから。
});


実際に実行するとタクソノミーのドロップダウン表示が親カテゴリと子カテゴリで別れ、選択したページに遷移するようになっています。

そこで質問なのですが、この仕組みは<input type="submit">にも応用できるのでしょうか?

コード内の

    ct +='<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />'+"\n";


の部分を変更すれば可能なのかもしれませんが、以下のサイトを見てonClickによるフォーム送信を仕組みがあることは分かったのですが、実際にどうすれば<input type=”submit”>に応用できるのか分かりませんでした。
JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

<input type="submit">に使えるのであれば、アンケートフォームや、絞り込み検索などに使えるかなと思ったもので…。

最初からselect要素であれば以下のような仕組みが利用できると思うのですが、
2つのセレクトボックスを連動させるjQuery

ulタグをプルダウンメニューへJavaScriptで書き換えて、そこからフォーム送信が出来るものなのかなと。

※追記です。
文章が分かり難く済みません。

デモは以下のような仕組みになっていますが、

<form>
疑似プルダウンメニュー
<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />
</form>
コード


これを以下のように変更出来るのかどうかというのが質問の趣旨です。
onClick以降をどのように記述すればよいのかと思いまして。。。

<form method="post" action="example.cgi">
疑似プルダウンメニュー
<p>名前:<input type="text" name="name"></p>
<input type="submit" value="送信">
</form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mks

    2018/12/18 13:59

    > そこで質問なのですが、この仕組みは<input type="submit">にも応用できるのでしょうか?
    具体的にどの部分を応用して具体的にどのような動作をさせたいのかがよくわからなかったのですが、ドロップダウンの選択状態でフォームの送信先(form要素のaction)を変えたいということでしょうか?

    キャンセル

回答 1

checkベストアンサー

0

select要素にname属性を与えたら、通常のsubmitで値が送信されますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/05 19:52

    kei344様
    ご回答ありがとうございました。
    なるほど、そういうことなんですね。
    ずっと「onClick=」以降に何を書くのかと考えていました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20431questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    8943questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8163questions

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