jQuery: làm thế nào để có được nút nào được nhấp khi gửi biểu mẫu?


227

Tôi có một .submit()sự kiện được thiết lập để gửi biểu mẫu. Tôi cũng có nhiều mẫu trên trang, nhưng chỉ có một mẫu ở đây cho ví dụ này. Tôi muốn biết nút gửi nào đã được nhấp mà không áp dụng .click()sự kiện cho từng người.

Đây là thiết lập:

<html>
<head>
  <title>jQuery research: forms</title>
  <script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
  <script type='text/javascript' language='javascript'>
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
  <input type='hidden' name='data' value='blahdatayadda' />
  <input type='submit' name='name1' value='value1' />
  <input type='submit' name='name2' value='value2' />
</form>
</body>
</html>

Ví dụ trực tiếp trên jsfiddle

Bên cạnh việc áp dụng một sự kiện .click () trên mỗi nút, có cách nào để xác định nút gửi nào đã được nhấp không?


2
Điều trớ trêu tất nhiên là thông tin này không quan trọng để xác định phía máy chủ.
Neil

5
@Neil Không nếu bạn đang gửi biểu mẫu qua $ .ajax () và serializeArray () trên biểu mẫu.
Aaron


1
Làm thế nào về việc đưa người nghe vào các nút gửi và gửi biểu mẫu theo cách thủ công.
JMRC

1
Làm thế nào về việc xem xét phiên bản tuần tự của dữ liệu biểu mẫu và khớp với nút name?
Augustin Riedinger

Câu trả lời:


235

Tôi đã hỏi cùng một câu hỏi: Làm thế nào tôi có thể nhận được nút gây ra việc gửi từ sự kiện gửi biểu mẫu?

Tôi đã kết thúc với giải pháp này và nó hoạt động khá tốt:

$(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");
    });
});

Trong trường hợp của bạn có nhiều hình thức, bạn có thể cần phải điều chỉnh điều này một chút nhưng vẫn nên áp dụng


11
+1 Giải pháp tốt đẹp. Bạn có thể muốn thêm một câu lệnh đặt lại thuộc tính được nhấp thành false trên các nút trong trường hợp việc gửi biểu mẫu được xử lý theo cách ajax và bạn muốn tránh nhận lại nút được nhấp trước.
Chandu

1
Ồ, tôi hiểu rồi. Bạn đang thêm thuộc tính "nhấp chuột" của riêng bạn. Tôi đã tìm kiếm một boolean "nhấp chuột" và không thể tìm thấy bất cứ nơi nào. Tôi chưa bao giờ nghĩ làm một mình. Ý tưởng tốt!
hawkexp

9
Xin lưu ý rằng điều này chỉ hoạt động với các yếu tố đầu vào, không phải các yếu tố nút.
Bob.at.Ấn Độ. Sức khỏe

1
Điều này là không cần thiết trong Chrome với các yếu tố nút. Tôi chỉ cần xử lý sự kiện gửi, xây dựng một đối tượng FormData từ biểu mẫu và nó luôn bao gồm giá trị của nút được nhấp. FireFox KHÔNG thể hiện hành vi này và thay vào đó không gửi giá trị nút nào cả. Chrome dường như đang tự động làm một cái gì đó giống như giải pháp trên, ghi nhớ nút nào được nhấp và đưa nó vào dữ liệu biểu mẫu tự động. Tất nhiên, việc thiếu hành vi tiêu chuẩn này (dù sao mọi thứ trong JavaScript cũng vậy, vì vậy tôi không ngạc nhiên), làm cho tính năng này trở nên vô dụng.
Triynko

1
Ngoài ra, hãy xem xét thêm nút "chọn [type = submit]" (được phân tách bằng dấu phẩy) vì các phần tử gửi không phải là thẻ đầu vào.
Kyselejsyreček

91

Tôi thấy rằng điều này đã làm việc.

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}

12
giải pháp này hoạt động tốt trên Chrome, nhưng không thể hoạt động trên Safari, nó sẽ trả về không xác định, không phải là đối tượng nút
Ông Sun Lin

1
@Krinkle Tôi đã mã hóa nó như thế để hiển thị cách chung nhất có thể. Tôi nghĩ rằng các nhà phát triển đủ thông minh để tối ưu hóa nó theo sở thích của họ.
Stan

Sạch hơn các giải pháp khác. Vẫn chưa tìm thấy giải pháp nào hiệu quả khi nhấn enter mặc dù
andrewtweber

Câu trả lời này sẽ không hoạt động luôn. Thực tế bạn cần nút bấm, không phải tập trung (vì hành động lấy nét không phải là hành động nhấp). Câu trả lời được chọn (của thợ săn) là câu trả lời đúng.
Vasil Popov

Tôi có một sự kiện nhấp vào nút gửi và gửi sự kiện trên biểu mẫu của họ ... cái sau kích hoạt cái trước. Tôi đã sử dụng điều này để tìm ra nguồn gốc của sự kiện. Trong một số trình duyệt, nhấp vào nút, bạn sẽ nhận được nút là trọng tâm, trong các trình duyệt khác, bạn sẽ không nhận được gì. Trong tất cả các trình duyệt tôi đã kiểm tra, nhấn enter trong khi trên đầu vào giữ cho đầu vào tập trung.
notacouch 11/03/2015

65

Điều này làm việc cho tôi:

$("form").submit(function() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}

3
Điều này rất hữu ích, để có được idđiều đó activeElement, tôi đã làm$(document.activeElement).attr('id');
Mikolaj

9
Để biết giá trị của nó, bạn không cần sử dụng jQuery để lấy id - việc sử dụng Javascript thuần túy thậm chí còn đơn giản hơn:document.activeElement.id
Nick F

5
Lưu ý rằng điều này dường như không hoạt động như mong đợi trên Safari. :(
rinogo

@rinogo: chuyện gì xảy ra trong Safari?
Lưỡi liềm tươi

1
Trong Safari document.activeElementkhông phải là đầu vào. Trong trường hợp của tôi, đó là một div phương thức (có chứa biểu mẫu).
mg đau

46

Khi mẫu đơn được gửi:

  • document.activeElement sẽ cung cấp cho bạn nút gửi đã được nhấp.

  • document.activeElement.getAttribute('value') sẽ cung cấp cho bạn giá trị của nút đó.


2
Lưu ý rằng điều này dường như không hoạt động như mong đợi trên Safari. :(
rinogo

Tôi không biết làm thế nào về Safari nhưng trên Chrome hoạt động tốt :) Cảm ơn!
Ingus

Hoạt động trong Chrome 63 và IE11
Sir Crispalot

Tôi đã chạy xác thực jquery không phô trương, và điều đó chặn trước điều này và đặt đầu vào không hợp lệ là activeEuity thay vì nút.
Peheje

28

Đây là cách tiếp cận có vẻ sạch hơn cho mục đích của tôi.

Đầu tiên, cho bất kỳ và tất cả các hình thức:

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

Khi sự kiện nhấp này được kích hoạt cho một biểu mẫu, nó chỉ cần ghi lại mục tiêu ban đầu (có sẵn trong đối tượng sự kiện) để được truy cập sau. Đây là một nét khá rộng, vì nó sẽ kích hoạt cho bất kỳ nhấp chuột nào ở bất kỳ đâu trên biểu mẫu. Bình luận tối ưu hóa được hoan nghênh, nhưng tôi nghi ngờ nó sẽ không bao giờ gây ra vấn đề đáng chú ý.

Sau đó, trong $('form').submit(), bạn có thể hỏi những gì được nhấp lần cuối, với cái gì đó như

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

Điều gì nếu đây là một sự kiện gửi biểu mẫu thay vì nhấp chuột?
Tony

1
@Tony, xin lỗi tôi không thấy câu hỏi của bạn sớm hơn. Câu trả lời này là hoàn toàn liên quan đến hình thức đệ trình. Các nút gửi cũng được nhấp, và do đó chúng kích hoạt sự kiện nhấp.
Jonathan Camenisch

2
Nâng cao câu trả lời này qua câu trả lời của thợ săn vì các sự kiện gửi biểu mẫu được kích hoạt trước bất kỳ sự kiện nhấp vào phần tử con nào. Điều này gây ra khó khăn khi sự kiện gửi biểu mẫu của bạn bị hủy return false, trong khi phương thức này hoạt động chính xác vì nhấp chuột được liên kết với biểu mẫu thay vì con của nó.
pospi

7
Điều này không thể xử lý đúng trường hợp biểu mẫu được gửi bằng các phương tiện khác ngoài nhấp chuột (ví dụ: nhấn Enter). Khi biểu mẫu được gửi qua các phương tiện khác, đó là nút gửi đầu tiên đã kích hoạt sự kiện gửi, không phải là lần nhấp cuối cùng.
quietmint

Có một dấu chấm phẩy bị thiếu sau đó ... $(event.target))nhưng không thể chỉnh sửa vì các chỉnh sửa phải> 6 ký tự
Hafenkranich

13

Wow, một số giải pháp có thể trở nên phức tạp! Nếu bạn không quan tâm đến việc sử dụng toàn cầu đơn giản, chỉ cần tận dụng thực tế là sự kiện nhấp vào nút đầu vào sẽ kích hoạt trước tiên. Người ta có thể lọc thêm bộ chọn $ ('input') cho một trong nhiều dạng bằng cách sử dụng $ ('# myForm input').

    $(document).ready(function(){
      var clkBtn = "";
      $('input[type="submit"]').click(function(evt) {
        clkBtn = evt.target.id;
      });

      $("#myForm").submit(function(evt) {
        var btnID = clkBtn;
        alert("form submitted; button id=" + btnID);
      });
    });

12

Tôi đã tìm thấy giải pháp tốt nhất là

$(document.activeElement).attr('id')

Điều này không chỉ hoạt động trên đầu vào, mà còn hoạt động trên các thẻ nút. Ngoài ra, nó nhận được id của nút.


Chết tiệt, tôi phải xem trang của tôi có hoạt động trên Safari không. Tại sao Safari luôn luôn phải khó khăn như vậy. Cảm ơn vì điều đó. Đi kiểm tra khi tôi về nhà
Thomas Williams


Điều này không làm việc cho tôi trong Safari. Nhấp vào trình nghe trên Nút trong phần thân gọi .submit trên một biểu mẫu. Bên trong trình xử lý $(document.activeElement).attr('id')trả vềundefined
dyodji

7

Một giải pháp khả thi khác là thêm một trường ẩn trong biểu mẫu của bạn:

<input type="hidden" id="btaction"/>

Sau đó, trong chức năng sẵn sàng thêm chức năng để ghi lại phím nào được nhấn:

$('form#myForm #btnSubmit').click(function() {
    $('form#myForm #btaction').val(0);
});

$('form#myForm #btnSubmitAndSend').click(function() {
    $('form#myForm #btaction').val(1);
});

$('form#myForm #btnDelete').click(function() {
    $('form#myForm #btaction').val(2);
});

Bây giờ trong trình xử lý đệ trình biểu mẫu đọc biến ẩn và quyết định dựa trên nó:

var act = $('form#myForm #btaction').val();

6

Dựa trên những gì Stan và yann-h đã làm nhưng cái này mặc định là nút đầu tiên. Cái hay của cách tiếp cận tổng thể này là nó chọn cả phím bấm và phím enter (ngay cả khi tiêu điểm không nằm trên nút. Nếu bạn cần cho phép nhập vào biểu mẫu, thì chỉ cần phản hồi điều này khi một nút được tập trung ( tức là câu trả lời của Stan). Trong trường hợp của tôi, tôi muốn cho phép nhập để gửi biểu mẫu ngay cả khi tiêu điểm hiện tại của người dùng nằm trên hộp văn bản.

Tôi cũng đã sử dụng thuộc tính 'name' thay vì 'id' nhưng đây là cách tiếp cận tương tự.

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;

Vì vậy, nếu bạn di chuyển tiêu điểm sang nút thứ hai bằng TAB và nhấn RETURN, nó sẽ mặc định thành nút đầu tiên ...
FrancescoMM

5

Cái này làm việc cho tôi

$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);

}

Điều này xứng đáng huy chương!
Martin Zvarík

4

Nếu điều bạn muốn nói là không thêm sự kiện .click là bạn không muốn có các trình xử lý riêng cho các sự kiện đó, thì bạn có thể xử lý tất cả các lần nhấp (gửi) trong một chức năng:

$(document).ready(function(){
  $('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});

function process_form_submission( event ) {
  event.preventDefault();
  //var target = $(event.target);
  var input = $(event.currentTarget);
  var which_button = event.currentTarget.value;
  var data = input.parents("form")[0].data.value;
//  var which_button = '?';       // <-- this is what I want to know
  alert( 'data: ' + data + ', button: ' + which_button );
}

một ý tưởng không tồi Điều này sẽ làm việc cho bất kỳ số lượng các hình thức trên trang?
hawkexp

@hawk yep, nó nên. Tôi không biết đây có phải là hành vi mong muốn hay không, nhưng mã của bạn không thực sự gửi biểu mẫu, vì vậy tôi cũng không biết. Nếu bạn muốn gửi nó, chỉ cần loại bỏ event.preventDefaulthoặc làm một cái gì đó như input.parents("form")[0].submit().
jcane86

Và nếu bạn gửi mà không có nhấp chuột (phím trả về?) Thì đó sẽ là một mớ hỗn độn ..
FrancescoMM

4

Vì tôi không thể nhận xét về câu trả lời được chấp nhận, tôi mang đến đây một phiên bản sửa đổi sẽ tính đến các yếu tố bên ngoài biểu mẫu (nghĩa là: được đính kèm với biểu mẫu bằng formthuộc tính). Đây là trình duyệt hiện đại: http://caniuse.com/#feat=form-attribution . Các closest('form') được sử dụng như một dự phòng cho không được hỗ trợ formthuộc tính

$(document).on('click', '[type=submit]', function() {
    var form = $(this).prop('form') || $(this).closest('form')[0];
    $(form.elements).filter('[type=submit]').removeAttr('clicked')
    $(this).attr('clicked', true);
});

$('form').on('submit', function() {
    var submitter = $(this.elements).filter('[clicked]');
})

Đây thực sự nên là câu trả lời được lựa chọn. Tôi chỉ nói thêm rằng quy tắc nên là"button,[type=submit]"
Wil

@Wil nhưng không phải tất cả các nút là nút gửi, nó phụ thuộc vào loại của họ.
ptyskju

Có, nhưng trong trường hợp không có <input type = "submit">], mọi UA tôi từng sử dụng đều coi thẻ <button> là trình kích hoạt biểu mẫu, vì vậy điều này sẽ bắt được trường hợp đó. Hoặc tác giả có thể thêm một cảnh báo rằng tất cả các yếu tố có khả năng gửi phải có thuộc tính [type = submit] ... một trong những yếu tố khác.
Wil

3
$("form input[type=submit]").click(function() {
    $("<input />")
        .attr('type', 'hidden')
        .attr('name', $(this).attr('name'))
        .attr('value', $(this).attr('value'))
    .appendTo(this)
});

thêm trường ẩn


Không hoạt động trong Firefox 30 / Windows 7. Lưu ý: hiện tại một trường ẩn được yêu cầu trong firefox, vì nó có thể không gửi giá trị gửi đã nhấp nếu được gửi với jquery's: this.submit () trong một sự kiện đang gửi. Tôi chỉ lo ngại một chút rằng $ (this) .attr ('name') có thể không hoạt động trên tất cả các trình duyệt.
dùng1610743

Tôi có Firefox 30 / Windows 7. Tôi có mọi thứ hoạt động hoàn hảo.
anydasa

Nhớ bao gồm button[type=submit]input[type=image].
rybo111

3

Đối với tôi, giải pháp tốt nhất là đây:

$(form).submit(function(e){

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

3

Làm việc với câu trả lời xuất sắc này , bạn có thể kiểm tra phần tử đang hoạt động (nút), nối thêm một đầu vào ẩn vào biểu mẫu và tùy ý xóa nó ở cuối trình xử lý gửi.

$('form.form-js').submit(function(event){
    var frm = $(this);
    var btn = $(document.activeElement);
    if(
        btn.length &&
        frm.has(btn) &&
        btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
        btn.is('[name]')
    ){
        frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
    }

    // Handle the form submit here

    $('#form-js-temp').remove();
});

Lưu ý bên lề: Cá nhân tôi thêm lớp form-jstrên tất cả các biểu mẫu được gửi qua JavaScript.


2

Tương tự như câu trả lời của Stan nhưng:

  • nếu bạn có nhiều hơn một nút, bạn chỉ phải lấy nút đầu tiên => [0]
  • nếu biểu mẫu có thể được gửi bằng phím enter, bạn phải quản lý mặc định => myDefaultButtonId

$(document).on('submit', function(event) {
    event.preventDefault();
    var pressedButtonId = 
         typeof $(":input[type=submit]:focus")[0] === "undefined" ? 
         "myDefaultButtonId" :
         $(":input[type=submit]:focus")[0].id;
    ...
 }

2

Đây là giải pháp được tôi sử dụng và hoạt động rất tốt:

// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
  evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  var alloved_enter_on_type = ['textarea'];
  if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
    return false;
  }
}

$(document).ready(function() {
  document.onkeypress = stopRKey;
  // catch the id of submit button and store-it to the form
  $("form").each(function() {
    var that = $(this);

    // define context and reference
    /* for each of the submit-inputs - in each of the forms on
			 the page - assign click and keypress event */
    $("input:submit,button", that).bind("click keypress", function(e) {
      // store the id of the submit-input on it's enclosing form
      that.data("callerid", this.id);
    });
  });

  $("#form1").submit(function(e) {
    var origin_id = $(e.target).data("callerid");
    alert(origin_id);
    e.preventDefault();

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" name="form1" action="" method="post">
  <input type="text" name="text1" />
  <input type="submit" id="button1" value="Submit1" name="button1" />
  <button type="submit" id="button2" name="button2">
    Submit2
  </button>
  <input type="submit" id="button3" value="Submit3" name="button3" />
</form>



1

Đây là giải pháp của tôi:

   $('#form').submit(function(e){   
        console.log($('#'+e.originalEvent.submitter.id));
        e.preventDefault();
    });

0

Tôi cũng đã thực hiện một giải pháp, và nó hoạt động khá tốt:
Nó sử dụng jQuery và CSS


Đầu tiên, tôi tạo một lớp CSS nhanh, cái này có thể được nhúng hoặc trong một tệp riêng biệt.

<style type='text/css'>
    .Clicked {
        /*No Attributes*/
    }
</style>


Tiếp theo, Trên sự kiện nhấp chuột của một nút trong biểu mẫu, hãy thêm lớp CSS vào nút. Nếu nút đã có lớp CSS, hãy loại bỏ nó. (Chúng tôi không muốn hai lớp CSS [Chỉ trong trường hợp]).

    // Adds a CSS Class to the Button That Has Been Clicked.
    $("form :input[type='submit']").click(function () 
    {
        if ($(this).hasClass("Clicked"))
        {
            $(this).removeClass("Clicked");
        }
        $(this).addClass("Clicked");
    });


Bây giờ, hãy kiểm tra nút để xem nó có lớp CSS không, nếu nút được kiểm tra không có CSS, thì nút khác sẽ.

    // On Form Submit
    $("form").submit(function ()
    {
        // Test Which Button Has the Class
        if ($("input[name='name1']").hasClass("Clicked"))
        {
            // Button 'name1' has been clicked.
        }
        else
        {
           // Button 'name2' has been clicked.
        }
    });

Hi vọng điêu nay co ich! Chúc mừng!


Nhớ bao gồm button[type=submit]input[type=image].
rybo111

Bạn nên xóa các tham chiếu đến kiểu dáng và CSS - chúng không liên quan ở đây. Ngoài ra, các dòng nơi bạn sử dụng hasClass()removeClass()dự phòng, vì addClass()sẽ không thêm cùng một lớp hai lần.
rybo111

0

Bạn có thể tạo kiểu nhập = "ẩn" làm chủ sở hữu cho thông tin id nút.

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

Trong trường hợp này, biểu mẫu chuyển giá trị "1" (id của nút của bạn) khi gửi. Điều này hoạt động nếu onClick xảy ra trước khi gửi (?), Điều tôi không chắc là nó có luôn đúng không.


0

Một cách đơn giản để phân biệt <button> hoặc <input type = "button" ...> được nhấn, bằng cách kiểm tra 'id' của chúng:

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});

0

Đây là một mẫu, sử dụng this.form để lấy đúng mẫu gửi và các trường dữ liệu để lưu trữ phần tử được nhấp / tập trung cuối cùng. Tôi cũng đã bọc mã gửi trong thời gian chờ để chắc chắn các sự kiện nhấp xảy ra trước khi nó được thực thi (một số người dùng đã báo cáo trong các nhận xét rằng trên Chrome đôi khi một sự kiện nhấp được kích hoạt sau khi gửi).

Hoạt động khi điều hướng cả bằng phím và bằng chuột / ngón tay mà không cần đếm trên trình duyệt để gửi sự kiện nhấp vào phím RETURN (mặc dù không bị tổn thương), tôi đã thêm một trình xử lý sự kiện cho các sự kiện tập trung cho các nút và trường.

Bạn có thể thêm các nút loại = "gửi" vào các mục tự lưu khi nhấp vào.

Trong bản demo, tôi đặt đường viền màu đỏ để hiển thị mục đã chọn và cảnh báo hiển thị tên và giá trị / nhãn.

Đây là FIDDLE

Và đây là mã (giống):

Javascript:

$("form").submit(function(e) {
  e.preventDefault();
  // Use this for rare/buggy cases when click event is sent after submit
  setTimeout(function() {

    var $this=$(this);
    var lastFocus = $this.data("lastFocus");
    var $defaultSubmit=null;

    if(lastFocus) $defaultSubmit=$(lastFocus);

    if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
      // If for some reason we don't have a submit, find one (the first)
      $defaultSubmit=$(this).find("input[type=submit]").first();
    }

    if($defaultSubmit) {
      var submitName=$defaultSubmit.attr("name");
      var submitLabel=$defaultSubmit.val();

       // Just a demo, set hilite and alert
      doSomethingWith($defaultSubmit);
      setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
    } else {
      // There were no submit in the form
    }

  }.bind(this),0);

});

$("form input").focus(function() {
  $(this.form).data("lastFocus", this);
});
$("form input").click(function() {
  $(this.form).data("lastFocus", this);
});

// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
  $aSelectedEl.css({"border":"4px solid red"});
  setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}

DUMMY HTML:

<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>

<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>

CSS DUMB:

input {display:block}

0

Tôi viết chức năng này giúp tôi

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;
};

và sau đó sử dụng

var data= PupulateFormData($("form"));

0
$('form').submit(function (ev) {
  let clickedButton = ev.originalEvent.explicitOriginalTarget;
});

-1

Bạn muốn sử dụng window.event.srcEuity.id như thế này:

function clickTheButton() {

var Sender = window.event.srcElement;
alert("the item clicked was " + Sender.id)

}

cho một nút trông giống như:

<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>

bạn sẽ nhận được một cảnh báo có nội dung: "mục được nhấp là myButton.

Trong ví dụ cải tiến của bạn, bạn có thể thêm window.event.srcEuity vào process_form_submission và bạn sẽ có một tham chiếu đến bất kỳ phần tử nào được gọi quá trình.


1
không sử dụng onclick cho các phần tử, nó không được dùng nữa
Krzysztof Cygan

1
Điều này dường như không hoạt động để gửi các nút, window.event.srcEuity đang trả về id của biểu mẫu.
333Mhz

@KrzysztofCygan Bạn có nguồn nào từ đó không?
vard
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.