How to get formmethod and formaction from submit b

问题:

I would have thought the form object would have been populated with formmethod and formaction.

Question: Is there a way to get to formaction? Or find out which button in the form was clicked, to access them from the button?

Do I need to rewrite my event handler to catch clicks on the button ($(document).on('click', '.myformbtn', function(e)) and use var queryString= $(this).parent('form').serialize(); to access the form.

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

I have found similar questions and the answer is always $(this).attr('formaction') which is incorrect as the form does not have that attribute. I'm hoping providing an example of how it would be used will get peoples brains working.

回答1:

Considering your code we can get the button which caused the form submission in following way:

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>

回答2:

The only solution I've found that works across browsers. I will still award the correct answer to @vijayP since the answer put me down the right path of research. Unless someone comes up with a way to access the clicked element, instead of searching for the focused element.

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");

Edit

There were too many bugs with this method. Like having to catch keyboard events, other input types or filter submits.

I've reverted back to an onclick solution. In case anyone is curious.

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

    });
});