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

Question

我的 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="your@email.com">
                                                    <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="your@email.com">
                                                <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 == 'your@email.com' || !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 == 'your@email.com' || !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 调用。

Answer 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

Answer 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>