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

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

ただいまの
回答率

87.80%

jQueryでフォーム送信時にPOSTパラメータ付与。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,046

score 153

前提・実現したいこと

HTMLには、フォームが用意されていて、
HTMLファイルを編集せずに(HTML自体はjQueryでいじってもよい)、
jQueryでフォームのPOST送信させる際、パラメータを付与したいのですが、
その場合、hiddenタグを動的に生成して値を埋め込む方法しかないですか?
ボタンのクリック処理にフォーム送信機能を持たせます。
他に方法があればご教示お願いします。

試したこと

下記の方法しか思いつかなかったのですが、他に実装方法ってありますか?
hiddenタグを動的に生成して埋め込んでいるのが、なんか無理やりな気がしたためです。

$(document).on("click",".mysubmit",function(e){
                var testtag = $("<input type='hidden' name='testId'>");
                testtag.val(testId);
                $('form').append(testtag);

                $('form').attr('action', "test/test");
                $('form').attr('method', 'post');
                $('form').submit();
}

POSTメソッドでPOST送信できるみたいですが、試したところ、画面遷移はしませんでした。
そうすると、下記の処理の後に、画面遷移処理をすればよいかもしれませんが、
その手間を考えると、上記と変わらないのかなと思いました。
あと、下記だと、フォームの中のパラメータも付与、なおかつ、jQuery側で生成したパラメータも付与の両方はできないのかなと思いました。

$.post( 'https://httpbin.org/post', 'name=太郎' )
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi_takatsuk

    2020/01/07 11:19 編集

    JavaScript(jQuery)でパラメータを後付けして送信なら、その処理でいいかと思います。
    何が問題な感じでしょうか?
    もっといい方法がある、正規(かスマート)な方法があるなら知りたい、ということでしょうか。
    それとも、一つ目の構文ではページ遷移しない、というのが問題、ということでしょうか。

    キャンセル

  • tkshp

    2020/01/07 11:21

    ご指摘ありがとうございます。
    無理やりな感じがしたので、
    もっといい方法がある、正規(かスマート)な方法があるなら知りたい、ということです。

    キャンセル

  • miyabi_takatsuk

    2020/01/07 11:23 編集

    わかりました。
    遷移しないことに関しては特に不問でよろしいということですね。
    回答に移ります。

    キャンセル

  • tkshp

    2020/01/07 11:27

    $.postでは遷移しなかったですが、$('form').submit()では画面遷移しました。
    $.postの場合は、その後に画面遷移処理を書けばよいのかなと思いました。
    話が噛み合ってなかったらすみません。

    キャンセル

回答 2

+2

jQueryでフォームのPOST送信させる

のがajaxを利用するのでないなら

hiddenタグを動的に生成して値を埋め込む方法しかないですか?

こうするしかありません
もしくはクッキーなど別の渡し方を検討ください

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/07 11:36

    ご回答ありがとうございます。
    とても勉強になりました。
    ありがとうございます。

    キャンセル

checkベストアンサー

0

結論から申し上げますと、質問のコードが一番かと思われます。

httpアクセスの場合、サーバーサイドであれば、リクエストheaderに値を追加などをすることができますが、
フロントエンドでは、Ajaxでない限りは、httpリクエストに値を追加などはできません。
よって、あくまでformで送信の場合は、JavaScript(jQuery)によって、input要素を追加、があくまで妥当かと思います。

質問のコード二つ目のAjaxでのリクエストならば、headerに値を追加など可能ではありますが、ページ遷移がされないので、
その後、location.hrefによってページ遷移をさせる必要があるため、(ページ遷移させるのであれば、です)
結果、無理やり感というか、上記と大差ない仕様な気がします。
であれば、最終的にはあくまでHTMLの仕様を使う、一つ目のコードが、妥当なのかな、と思います。

ただ、ページ遷移するはずの処理のはずなのに、ページ遷移がされないのが不可解ではあります。
質問者さんの意図した動作なのであれば、問題ないとは思いますが。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/07 11:36

    ご回答ありがとうございます。
    とても勉強になりました。
    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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