フォーム送信イベントから送信を引き起こしたボタンを取得するにはどうすればよいですか？
フォームを送信するトリガーとなった送信ボタンの値を見つけようとしています
$("form").submit(function() {
});
各ボタンに対して$（ "input [type = submit]"）。click（）イベントを発生させて変数を設定することもできますが、送信時にフォームからボタンをプルする方法よりもエレガントではないようです。
私はこれを実装しましたが、そうなると思います。
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val()
// DO WORK
});
そして、これはそれを設定する送信ボタンイベントです
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
回答いただきありがとうございますが、これはそれほどエレガントではありません...
この回答でスケッチしたように、_document.activeElement_を活用しました。 jQueryでフォーカスされた要素を取得する方法
_$form.on('submit', function() {
var $btn = $(document.activeElement);
if (
/* there is an activeElement at all */
$btn.length &&
/* it's a child of the form */
$form.has($btn) &&
/* it's really a submit element */
$btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
/* it has a "name" attribute */
$btn.is('[name]')
) {
console.log("Seems, that this element was clicked:", $btn);
/* access $btn.attr("name") and $btn.val() for data */
}
});
_ボタンをクリックした後、ボタンは常にフォーカスされた要素であるという事実を利用します。クリックの直後にblur()を実行すると、これは動作しません。
@Doinは別の欠点を発見しました。ユーザーがテキストフィールドのenterを介してフォームを送信した場合、_document.activeElement_は設定されません。 _input[type="text"]_などのkeypressイベントを処理することにより、このことに注意する必要があります。
Update 2017-01：ライブラリの場合 HyperformactiveElementを使用せず、すべてのイベントをキャッチすることを選択しました、フォーム送信につながります。 このコード はGithubにあります。
ハイパーフォームを使用する場合は、送信をトリガーしたボタンにアクセスする方法は次のとおりです。
_$(form).on('submit', function(event) {
var button = event.submittedVia;
});
_テストフォームを作成し、Firebugを使用してこの方法で値を取得しました。
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});
残念ながら、このイベントをサポートしているのはFirefoxのみです。
これは、私の目的にとってすっきりしたアプローチです。
まず、ありとあらゆるフォームについて：
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
このクリックイベントがフォームに対して起動されると、後でアクセスされる元のターゲット（イベントオブジェクトで利用可能）を記録するだけです。フォーム上の任意の場所をクリックすると起動するため、これはかなり広いストロークです。最適化のコメントは歓迎しますが、目立った問題を引き起こすことはないと思います。
次に、$（ 'form'）。submit（）で、最後にクリックされたものを次のように照会できます。
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
きれいな方法の1つは、各フォームボタンでクリックイベントを使用することです。以下は、保存、キャンセル、削除ボタンを備えたHTMLフォームです。
<form name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form>
以下はjqueryです。どのボタンがクリックされたかに応じて、適切な「アクション」を同じサーバー機能に送信します（「保存」または「削除」）。 「キャンセル」をクリックすると、ページがリロードされます。
$('.savenote').click(function(){
var options = {
data: {'action':'save'}
};
$(this).parent().ajaxSubmit(options);
});
$('.deletenote').click(function(){
var options = {
data: {'action':'delete'}
};
$(this).parent().ajaxSubmit(options);
});
$('.cancelnote').click(function(){
window.location.reload(true);
return false;
});
検索して、jQuery + AJAXを使用してサーバーに送信される送信ボタンname + valueを取得するいくつかの方法を見つけました。あまり好きではなかった...
最高の1つはハンターのソリューションでした。
しかし、私は自分で別のものを書きました。
共有したいのは、それが良いからです。また、必要に応じて、ajaxを介してロードされたフォーム（document.readyの後）でも機能します。
$(document).on('click', 'form input[type=submit]', function(){
$('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});
シンプル！送信ボタンをクリックすると、送信ボタンと同じnameとvalueを使用して、非表示フィールドがフォームに追加されます。
編集：以下のバージョンは読みやすくなっています。また、以前に追加された非表示フィールドを削除します（同じフォームを2回送信する場合、AJAXを使用する場合は完全に可能です）。
改善されたコード：
$(document).on('click', 'form input[type=submit]', function(){
var name = $(this).attr('name');
if (typeof name == 'undefined') return;
var value = $(this).attr('value');
var $form = $(this).parents('form').first();
var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
$form.find('input.temp-hidden').remove();
$form.append($input);
});
（イベント）
function submForm(form,event){
var submitButton;
if(typeof event.explicitOriginalTarget != 'undefined'){ //
submitButton = event.explicitOriginalTarget;
}else if(typeof document.activeElement.value != 'undefined'){ // IE
submitButton = document.activeElement;
};
alert(submitButton.name+' = '+submitButton.value)
}
<form action="" method="post" onSubmit="submForm(this, event); return false;">
私は提供されたいくつかの例を試しましたが、私たちの目的には機能しませんでした。
表示するフィドルは次のとおりです。 http://jsfiddle.net/7a8qhofo/1/
私は同様の問題に直面しました。これが私たちのフォームで問題を解決した方法です。
$(document).ready(function(){
// Set a variable, we will fill later.
var value = null;
// On submit click, set the value
$('input[type="submit"]').click(function(){
value = $(this).val();
});
// On data-type submit click, set the value
$('input[type="submit"][data-type]').click(function(){
value = $(this).data('type');
});
// Use the set value in the submit function
$('form').submit(function (event){
event.preventDefault();
alert(value);
// do whatever you need to with the content
});
});
「event.originalEvent.x」および「event.originalEvent.y」を使用してこの方法を試すことができます。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<form id="is_a_form">
<input id="is_a_input_1" type="submit"><br />
<input id="is_a_input_2" type="submit"><br />
<input id="is_a_input_3" type="submit"><br />
<input id="is_a_input_4" type="submit"><br />
<input id="is_a_input_5" type="submit"><br />
</form>
</body>
</html>
<script>
$(function(){
$.fn.extend({
inPosition: function(x, y) {
return this.each(function() {
try{
var offset = $(this).offset();
if ( (x >= offset.left) &&
(x <= (offset.left+$(this).width())) &&
(y >= offset.top) &&
(y <= (offset.top+$(this).height())) )
{
$(this).css("background-color", "red");
}
else
{
$(this).css("background-color", "#d4d0c8");
}
}
catch(ex)
{
}
});
}
});
$("form").submit(function(ev) {
$("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
return false;
});
});
</script>
jQueryは送信イベントでそのデータを提供していないようです。提案した方法が最善の方法であるように見えます。
より具体的なイベントハンドラとJQueryを使用すると、イベントオブジェクトはクリックされたボタンになります。必要に応じて、このイベントから委任フォームを取得することもできます。
$('form').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});
このドキュメントには、始めるために必要なものがすべて揃っています。 JQuery Doc 。
私は私を助けるこの関数を書きます
var PupulateFormData= function (elem) {
var arr = {};
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
arr[$(this).attr("name")] = $(this).val();
});
return arr;
};
そして、使用
var data= PupulateFormData($("form"));
他の誰も私の要件を満たしていないので、ちょうど別のソリューション。利点は、クリックしてキーを押す（Enterキーとスペース）が検出されることです。
// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {
// Get the key (enter, space or mouse) which was pressed.
if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {
// Get the clicked button
var caller = ev.currentTarget;
// Input Validation
if (!($form.valid())) {
return;
}
// Do whatever you want, e.g. ajax...
ev.preventDefault();
$.ajax({
// ...
})
}
}
これは私に最適です。