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，并且您的动态表单将添加到该ID中。

您也可以考虑使用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>

如何处理多个表单提交而无需单独的单击事件处理程序

2 个答案: