如何在没有单独的单击事件处理程序的情况下处理多个表单提交 [关闭]

Posted 2023-05-09

【中文标题】如何在没有单独的单击事件处理程序的情况下处理多个表单提交 [关闭]

【英文标题】：How to handle multiple form submits without individual click event handlers [closed]

【发布时间】：2018-05-06 11:39:41

【问题描述】：

我的 mvc 应用程序中有两个表单，所有表单都是动态显示的，如何将 ajax 调用绑定到这些表单提交按钮而不会丢失验证。 以下是我的代码。

 //form1
        <form id="form1" action="" method="post" enctype="multipart/form-data">
                                                    <input type="text" name="fname1" id="fname1" placeholder="Full Name">
                                                                                                    <input type="email" name="femail1" id="femail1" placeholder="[e-mail]">
                                                    <input id="send1" type="button" >
                                                </form>

    //form2

    <form id="form1" action="" method="post" enctype="multipart/form-data">
                                                <input type="text" name="fname1" id="fname1" placeholder="Full Name">

                                                <input type="email" name="femail1" id="femail1" placeholder="[e-mail]">
                                                <input id="button2" type="button">
                                            </form>



//Jquery code

    $('#button1').click(function(e)
            e.preventDefault();

            var fname           =$('#fname1').val();
            var femail          =$('#femail1').val();
            var fphone          =$('#fphone1').val();

            var error           =0;

            $('#fname1,#femail1,#fphone1').css('border', '');

            if(fname=='Full Name' || fname=='')
                $('#fname1') .css('border','solid 1px red');
                error=1;

            

            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]2,4$/;
            if(femail == '[e-mail]' || !emailPattern.test(femail))            
                $('#femail1').css('border','solid 1px red');                 
                error = 1;
            


            if(fphone=='____-_____' || fphone=='')
                $('#fphone1').css('border','solid 1px red');
                error=1;

               



          //do ajax call


            return false;



        );

//jquery code for button 2

    $('#button2').click(function(e)
            e.preventDefault();

            var fname           =$('#fname1').val();
            var femail          =$('#femail1').val();
            var fphone          =$('#fphone1').val();

            var error           =0;

            $('#fname1,#femail1,#fphone1').css('border', '');

            if(fname=='Full Name' || fname=='')
                $('#fname1') .css('border','solid 1px red');
                error=1;

            

            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]2,4$/;
            if(femail == '[e-mail]' || !emailPattern.test(femail))            
                $('#femail1').css('border','solid 1px red');                 
                error = 1;
            


            if(fphone=='____-_____' || fphone=='')
                $('#fphone1').css('border','solid 1px red');
                error=1;

               



          //do ajax call


            return false;



        );

就像我说的这些表单是动态加载的，我需要像上面那样执行 ajax 调用。

【问题讨论】：

请以您不要求“最好”的方式表达您的问题。描述有关您的特定问题的任何信息，提供您试图解决该问题的任何现有代码，并让人们帮助您解决您的特定问题。要求“最好的”是让帖子因固执己见或过于宽泛而被关闭的快速方法。

@Taplar 我正在寻求解决此问题的方法。简要描述对我有帮助，就像解决这个问题的架构视图

本网站旨在帮助人们解决特定代码问题，而不是建议。请查看 ***.com/help/how-to-ask 了解 *** 需要的问题类型。在你的具体问题解决后，如果你想问有没有更好的方法，或者让其性能更好，可以在codereview.stackexchange.com

上提问

您如何为 3 个表单注册 3 个按钮单击事件？所有这 3 个点击处理程序中的代码是否相同？

提示：研究 jQuery 中的委托事件

【参考方案1】：

如果您要在每个按钮单击的单击处理程序中执行的代码相同，您可以考虑使用更通用的 jQuery 选择器来连接您的表单 submit 事件。目前您使用 Id 作为 jQuery 选择器.由于 Id 在文档中应该是唯一的，因此仅适用于单个元素。这意味着您需要连接多个点击处理程序，每个 id 一个（这就是您现在正在做的事情）

为您的所有表单添加一个 html 5 数据属性，并使用它来连接您的表单submit 事件。

这里我在表单中添加了一个data-ajax-form 数据属性。

<form id="form1" action="someUrl" method="post" data-ajax-form>

</form>

现在在连接 ajax 表单提交行为时为您的 jQuery 选择器使用这个新的数据属性。

$(function() 

    $(document).on("submit","[data-ajax-form]",function(e) 

        e.preventDefault();

        var $form=$(this);
        alert("Submitting the form");
        var data = $form.serialize();
        alert("serialized form : "+data);

        //Your other common code

        $.post($form.attr("action"),data).done(function(res) 

            //do something with the response
            console.log(res);
        );
    );

);

使用 jQuery on 连接事件将使其与 DOM 的当前和未来元素一起工作。因此，您需要将其用于动态注入的元素。这里我使用$(document) 和on 方法。您可以在那里使用更具体的选择器。例如，您可以使用容器 div id（您的表单会动态添加到该容器中）

$("#yourFormContainerDiv").on("submit","[data-ajax-form]",function(e) 

);

假设yourFormContainerDiv 是您的页面具有的 div 的 id，并且您的动态表单正在添加到该 div 中。

您也可以考虑使用客户端验证库，例如 jQuery validate。 mvc 辅助方法使用此库使用的相关属性（基于视图模型属性类型/数据注释）呈现输入元素标记。看看Adding validation

【讨论】：

感谢您的回答。正在实施...

【参考方案2】：

您正在寻找 JQuery 中称为事件委托的功能。通常，您将事件连接到元素，但是当您有动态元素时，这会成为一个问题。

在这种情况下，您可以将您的事件“委托”给父级并让它处理其子级内容。例如，下面的代码已有 2 个按钮，然后动态添加了第 3 个按钮。

我所做的是将事件连接到父 div，然后使用下面的语法进行事件委托。你可以在这里了解更多信息https://learn.jquery.com/events/event-delegation/

    <script>
    $(document).ready(function () 
        // event delegation
        $(".parent").on("click","button", function () 
            alert("Post form");
        )

        // dynamically add 3rd button
        $(".parent").append("<button>Button 3</button>");
    )
</script>

<div class="parent">
    <button>Button 1</button>
    <button>Button 2</button>
</div>