如何从提交按钮获取formmethod和formction

Question

我原本以为表格对象会填充formmethod和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')，这是不正确的，因为表单没有该属性。我希望提供一个如何使用它将让人们的大脑工作的例子。

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>

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

    });
});