web-dev-qa-db-ja.com

jQueryを使用してフォームを送信するときに追加の変数を渡す

[送信]ボタンが_<form>_タグ内にないフォームがあります。送信ボタンには、jQueryのsubmit()イベントを介してフォームを送信するためのclickハンドラーがあります。これは完全に機能します。

ただし、[送信]ボタンの値もPOSTする必要があります。ボタンは_<form>_タグ内に存在しないため、POST配列に含まれていません。したがって、フォームが提出しました。

これを達成するために何が起こり得ないかについてのいくつかの規定は次のとおりです：

  • [送信]ボタンは_<form>_タグ内で移動できません。
  • JQuery ajax、post、またはgetメソッドは使用できません。
  • CSSによって非表示のinputフィールドや送信ボタンを非表示にすることはできません。
  • フォームは、フォームに通常の[送信]ボタンがあったかのように動作する必要があります。

私は何かを想像しましたが、明らかにこれは機能しません。

_$('#admin_form').submit({'variable_name', 'true'});
_

私がこれをどのように達成できるかについて誰かが何かアイデアを持っていますか？

jqueryformspost
20
Michael Irigoyen

できることの1つは、onsubmit属性を使用して、JavaScriptに、送信ボタンの値が送信されたときに、フォームに送信フィールドの値を挿入することです。これは非表示の入力フィールドで行う必要がありますが、ユーザーが送信ボタンをクリックした直後にのみ入力フィールドを追加するので、入力フィールドは最初からそこに存在しません（これで要件が満たされれば幸いです）。 ）。だから次のようなもの：

 function submitHandler()
 {
     submitVal = $('#submitButton').val();
     $('#myForm').append("<input type='hidden' name='submitValue' value='"+
                         submitVal+"' />");
     return true;
 }

これは、ボタンがクリックされたときに追加の値をそのまま保持します。

35
Jesse Cohen

これは古い質問のようですが、同様の問題に遭遇し、（私にとって）良い解決策を見つけたので、私はそれを投稿すると思いました：

 $('#admin_form').trigger('submit', [ { 'variable_name': true } ]);

または

$('#admin_form').trigger('submit', [ 'variable_name', 'true' ]);

値がtrueのvariable_nameという変数を渡すか、2つの別々の変数を渡すかによって異なります。

明確にするために、これはもちろん自動的にvariable_nameを残りのフォームフィールドと共に送信するわけではありませんが、jQueryで行うように送信ハンドラがある場合、変数は引数として渡されます。イベント。

3
AsGoodAsItGets

Jesseの答えは、POSTを介してこれを達成する唯一の方法です。変数をフォームのアクション値に追加することもできますが、POSTではなくGETを介してそのパラメーターが渡されます。デフォルトのブラウザの「送信」アクションを許可する前にフォームに非表示の入力を追加しないと、送信される前のHTTPリクエストの生の投稿データにアクセスする方法はありません。次のページに送信されるHTTP POST data/headersを変更する予定ですが、ブラウザが次のページにデータを投稿する前にデータが存在する唯一の方法は、フォーム要素内に埋め込まれた入力タグ。

あなたが行くことができる別の解決策は、$。post（）関数を使用して、onsubmitハンドラー中にpostを介して必要なデータを送信し、成功ハンドラーで目的のページにリダイレクトすることです。これは上記のルールに従っていないことはわかっていますが、それでも問題の別の解決策になる可能性があります。

あなたが本当に狂ったようになり、あなたのすべてのルールを守りたいのなら、あなたはまた：

  1. 非表示バージョンのフォームをDOMに「複製」します
  2. フォームに送信ボタンを挿入する
  3. 複製されたフォームの挿入された送信ボタンでクリックイベントをトリガーします。
1
streetlogics

送信ハンドラを記述せずに変更された要素から直接実行したい場合、これは機能します。

<script>
$(function() {
  $( ".datePicker" ).datepicker({ 
      dateFormat: 'dd-M-yy',
      onSelect: function (date) {   
        $('#dateChanger').append("<input type='hidden' name='changed_" + $(this).attr("name") + "' value='" + $(this).attr("value") + "' />");    
        $("#dateChanger").submit();
  }
  });
});
</script>
0
Helen Connole

Jquery 1.11.1

私はそれをそのように管理しました：

$(yourForm).on('submit',{'yourExtraData':extraData},function(event){
        alert('your extra data ' + event.data['yourExtraData'] + ' went thru');
});

また確認してください： https://api.jquery.com/event.data/

0
nyluje