如何从提交按钮获取表单方法和表单操作

Question

我本以为表单对象会包含formmethod和formaction。

问题：有办法获取formaction吗？或者找出表单中哪个按钮被点击了，从而可以通过该按钮访问它们？

我需要重新编写事件处理程序来捕获按钮的单击事件（$(document).on('click', '.myformbtn', function(e)），并使用var queryString= $(this).parent('form').serialize();来访问表单。

<form>
    <button type="submit"
            formmethod="POST"
            formaction="/mysave">Save</button>

    <button type="submit"
            formmethod="GET"
            formaction="/mydata">Get new data</button>
</form>

$(document).ready(function()
{
    $(document).on('submit', 'form', function(e) {
        e.preventDefault();
        var formaction = $(this).getFormAction();
        var queryString= $(this).serialize();

        $.ajax({
                type: formmethod,
                 url: formaction,
                data: queryString
        });
    });
});

我发现类似的问题，答案总是$(this).attr('formaction')，但这是不正确的，因为表单没有该属性。我希望提供一个使用示例，可以激发人们的思考。

- Bradmage

Answer 1

考虑到您的代码，我们可以通过以下方式获得导致表单提交的按钮：

var target = e.originalEvent || e.originalTarget;
var clickedElement = $( target.currentTarget.activeElement);

$(document).ready(function()
{
    $(document).on('submit', 'form', function(e) {
        e.preventDefault();
        
 var target = e.originalEvent || e.originalTarget;
        var clickedElement = $( target.currentTarget.activeElement);
        
 var formaction = $(clickedElement).attr("formaction");
        var formmethod = $(clickedElement).attr("formmethod");
      
     alert(" formaction "+formaction); 
        
  var queryString= $(this).serialize();

        $.ajax({
                type: formmethod,
                 url: formaction,
                data: queryString
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  This is my form with 2 submit buttons<br><br>
    <button type="submit"
            formmethod="POST"
            formaction="/mysave">Save</button>

    <button type="submit"
            formmethod="GET"
            formaction="/mydata">Get new data</button>
</form>

- vijayP

---

完美的e.originalEvent.explicitOriginalTarget正是我想要的。回复也很快速，太棒了 :) - Bradmage

哦，它不是跨浏览器的，甚至不是现代浏览器。 - Bradmage

@BradleyForster - 你的评估是完全正确的。e.originalEvent.explicitOriginalTarget 只适用于Firefox。对此我感到抱歉。现在我已经用新方法更新了我的答案。我已经在IE9、10、Firefox 41.0和Chrome 47.0上测试过了。虽然还没有能够在移动设备上进行测试。这与你发布的答案有些类似。你正在检查焦点元素，而我们正在寻找活动元素。谢谢...! - vijayP

我有一个快速的错误需要稍后花更多时间解决，脚本无法捕捉到回车键。我已经回到了我的答案上的onclick。 - Bradmage

Answer 2

我找到的唯一跨浏览器可行的解决方案。 我仍然会授予@vijayP正确答案，因为该答案让我走上了正确的研究路径。除非有人想出一种访问已单击元素而不是搜索聚焦元素的方法。

var clickedElement = $(this).find("input[type=submit]:focus" );
// Added to catch enter press, since there will be no focus.
if(clickedElement.length == 0) {
    var clickedElement = $(this).find("input[type=submit]" );
}
var formaction = clickedElement.attr("formaction");
var formmethod = clickedElement.attr("formmethod");

编辑

这种方法存在太多的错误。例如必须捕获键盘事件、其他输入类型或过滤提交。

我已经恢复了一个onclick解决方案。如果有人感兴趣的话。

<form class="dc-form">

    // Will activate ajax code
    <input type="submit" class="dc-form-btn" value="" />

    // Will output error to console
    <input type="submit" class="" value="" />

</form>

$(document).ready(function()
{
    $(document).on('submit', 'form.dc-form', function(e) {
        e.preventDefault();
        console.log('Invalid form button');
    });

    $(document).on('click', '.dc-form-btn', function(e) {
        e.preventDefault();

        var form = $(this).closest("form.dc-form");

        var formaction      = $(this).attr("formaction");
        var formmethod      = $(this).attr("formmethod");
        var formDataType    = $(this).attr("formdatatype");
        var queryString     = form.serialize();


        var error=false;
        if(typeof formaction === "undefined" || formaction === '')
        {
            console.log('missing form action');
            error=true;
        }
        if(typeof formmethod === "undefined" || formmethod === '')
        {
            console.log('missing form method');
            error=true;
        }
        if(typeof formDataType === "undefined" || formDataType === '')
        {
            console.log('missing form data type');
            error=true;
        }

        if(error)
        {
            console.log("Error executing form button.");
            console.log(WEB_URI + formaction);
            console.log(formmethod);
            console.log(formDataType);
            console.log(queryString);
            return;
        }


        $.ajax({
                type: formmethod,
                 url: WEB_URI + formaction,
                data: queryString, 
            dataType: formDataType,
             success: ajax_response_success,
               error: function(err) {/*console.log(err.responseText);*/alert('ajax error');}
        });

    });
});

- Bradmage