How to get form form and form from submit button

Question

I would think that a form object would be filled with format and formation.

Question: Is there a way to get the formula? Or find out which button in the form was pressed to open them with the button?

Do I need to rewrite the event handler in order to catch clicks on the button ( $(document).on('click', '.myformbtn', function(e)) and use it 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 found similar questions, and the answer is always $(this).attr('formaction')that is incorrect, since the form does not have this attribute. I hope that an example of how it will be used will make people's brains work.

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>

Hide result

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

Edit

. , .

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

    });
});