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

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，您的页面有，并且您的动态表单将添加到其中。

您也可以考虑使用像 jQuery validate. The mvc helper methods render the input element markups with the relevant attribute used by this library (based on the view model property type/data annotations). Take a look at Adding validation

这样的客户端验证库

Answer 2

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

在这种情况下，您可以 "delegate" 将您的事件发送给父级并让它处理其子内容。例如，下面的代码有 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>

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

How to handle multiple form submits without individual click event handlers

forms

ajax

asp.net-mvc

jquery

asp.net-mvc-4