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

How to get formmethod and formaction from submit button

本文关键字：formmethod formaction 获取 按钮 提交      更新时间：2023-09-26

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

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

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，因为这个答案让我走上了正确的研究道路。除非有人想出一种方法来访问单击的元素，而不是搜索聚焦的元素。

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');}
        });
    });
});
相关文章：