当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - ASP.Net MVC Ajax - determine which button was clicked on the same form?

问题描述:

Here's my issue: when calling form.serialize() with an ajax call, the value of the clicked button is not returned as part of the data. One workaround for this is to use a hidden field instead of the button value.

However, I want to distinguish between multiple buttons on the same form, so I can't just use a hidden field as it would be returned regardless of which button was clicked. What would be the best method for solving this problem?

Thanks in advance!

网友答案:

Name your button:

<button type="submit" name="Button1">Submit 1</button>
<button type="submit" name="Button2">Submit 2</button>

If the key Button1 is in Request then you know that button was clicked.

EDIT

Sorry. Totally missed the AJAX bit. Just append something like "&Button1=" to the result of form.serialize() before you send it off. All that method does is create a querystring-style string of your form field names and values, so you can add to it just like you would a querystring.

EDIT #2

Well, this depends on how your handling the submit in the first place. Are you currently attaching to the form's onsubmit event? If so, then there's no good way to know how it was submitted. You'll need to attach your handler to each button's onclick instead, so you can get at the actual button element that was involved in the event.

Then, you have two choices. First, you could have a separate handler per button. You can still stay DRY by factoring out the AJAX code into a separate function that both handlers would call. Or, second, you can have one handler for both buttons, and inspect the element to get the information you need. If you added the name property to each, for example, then you could do something like:

var buttonName = $(this).prop('name');

Or, you could use data-* attributes as @irfanmcsd suggested in the comments. For example, if you added an attribute to both buttons like:

<button type="submit" data-name="Button1">Submit 1</button>

Then you could retrieve this value via:

var buttonName = $(this).data('name');

For data-* attributes, you access them via the data() method of jQuery and you only reference the part after the data-.

网友答案:

e.g your form have three buttons, you can attach button specific information with each button via data-{attribute} as shown in example.

<button id="btn01" class="btn" data-id="43" data-name="button one attribute">One</button>
<button id="btn02" class="btn" data-id="45" data-name="button two attribute">Two</button>
<button id="btn03" class="btn" data-id="54" data-name="button three attribute">Three</button>

You can then access specific data when each button clicked as

$(function () {
    $('#form1').on({
        click: function (e) {
               var id = $(this).data("id");
               var name = $(this).data("name");
               alert(id + "___" + name);
               return false;
        }
    }, '#btn01');
    $('#form1').on({
        click: function (e) {
               var id = $(this).data("id");
               var name = $(this).data("name");
               alert(id + "___" + name);
               return false;
        }
       }, '#btn02');
    });

and for more buttons.

Shared and general form element data can be then accessed via

form.serialize()
分享给朋友:
您可能感兴趣的文章:
随机阅读: