Home » Jquery » javascript – Do a form submit calling a function instead create specific submit on its id

javascript – Do a form submit calling a function instead create specific submit on its id

Posted by: admin February 22, 2020 Leave a comment

Questions:

I did on a project many forms with its “” in the part of page (generated by php) that add specific function to it per form id and are working, for example:

$("#fregistrazione").submit(function(event){
...
}

I did the same with an html part loaded with ajax request but is not working.
I thinked to do in a different way with the same function called by many form submit, instead having one different defined for any form on any form submit, call a function with additional parameter that do the specific form things with less code duplication but I’m unable to have it working.
I did many try, for example:

<form id="f_man-marker_edit-marker" method="post" action="#" onsubmit="TM.editMarker(this)">
...

...
TM.editMarker = function(rform){

    // Abort any pending request
    if (request) { request.abort(); }

    let form = $(rform);

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=man-marker_edit-marker",
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response){
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "Ajax man-marker_edit-marker request failed. The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

};

but on submit reload the page with parameters as “get” in url and didn’t execute the edit marker function.
Can someone please tell me what I did wrong and how to do a correct call of a function from the form submit instead do a .submit on any form id containing dozens of duplicate lines for each form and not working if generated by a code that is received through ajax request?
Thanks for any reply and sorry for my bad english.

EDIT:
I did what suggested by ChrisG and I tried to add a parameter in TM.editMarker but I not found how to maintain correctly event as first parameter and add 2 other parameters.
For example adding 1 parameter:

TM.editMarker = function (e, ajax_request) {
...

I tried (even if IDE gave me event as deprecated):

$('#f_man-marker_edit-marker').on('submit', TM.editMarker(event, 'man-marker_edit-marker'));

And also without but in both case don’t work.

EDIT2:
solved with:

$('#f_man-marker_edit-marker').on('submit', function(e){
    TM.editMarker(e, $(this), 'man-marker_edit-marker');
});

...

TM.editMarker = function (e, form, ajax_request) {
...

but I’m open to better solutions.

How to&Answer:

Simple Answer:

You manipulated the DOM, so your selector is not there yet on event-binding.
Use a parent selector thats already there like document

$(document).on("submit", "#fregistrazione", function(event){
   event.preventDefault(); // stop the form submitting if needed
...
});

this way it will work