进行表单提交以调用函数,而不是在其ID上创建特定的提交

问题描述 投票:0回答:1

我在一个项目中做了很多表单,页面的一部分带有“”(由php生成),每个表单ID都为其添加了特定功能,并且正在运行,例如:

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

我对加载了ajax请求的html部分执行了相同的操作,但无法正常工作。我想用许多表单提交所调用的同一函数以不同的方式进行操作,而不是为任何表单提交上的任何表单定义一个不同的函数,而是调用一个带有附加参数的函数,以较少的代码重复来完成特定的表单事务,但是我我无法正常工作。我做了很多尝试,例如:

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

};

但是在提交时,使用url中的参数“ get”重新加载页面,但未执行编辑标记功能。有人可以告诉我我做错了什么以及如何正确地从表单提交中调用函数,而是对包含每个表单数十行重复的任何表单id执行.submit,如果由代码生成则无法正常工作通过ajax请求收到的?感谢您的答复,对不起我的英语不好。

编辑:我做了ChrisG的建议,尝试在TM.editMarker中添加一个参数,但没有找到如何正确地将事件作为第一个参数并添加其他两个参数的方法。例如,添加1个参数:

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

我尝试过(即使IDE弃用了我,也是如此):

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

并且也没有,但在两种情况下都不起作用。

EDIT2:解决:

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

...

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

但是我愿意寻求更好的解决方案。

javascript jquery
1个回答
0
投票

简单答案:

您操纵了DOM,因此您的选择器尚不存在于事件绑定中。使用已经存在的父选择器,例如document

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

以这种方式将起作用


-1
投票

最简单的方法是添加“ return false;”。在这样的onsubmit事件上]

<form id="f_man-marker_edit-marker" method="post" action="#" onsubmit="editMarker(this); return false;">

我已经尝试过,并且根据您创建的代码显示错误信息

Ajax man-marker_edit-marker request failed. The following error occurred: error Not Found
© www.soinside.com 2019 - 2024. All rights reserved.