时间戳

首页 > 解决方案 > 通过模态传递 data-id 到 jQuery 验证

jquery - 通过模态传递 data-id 到 jQuery 验证

问题描述

我正在使用 jQuery Validate 和 Bootstrap 模式 - 我需要将原始按钮的数据 ID 单击到 validate 的提交处理程序中，以便我可以通过 AJAX 将其传递到 AJAX 脚本中。

简单地说，我有一个链接：

<a data-toggle="modal" data-target="#add-modal" 
data-id="77" class="icon-plus-circle"></a>

然后我有我的模态：

<div id="add-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add</h4>
            </div> 

            <form id="add_form" class="form-horizontal" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-lg-4 control-label">Start</label>
                        <div class="col-lg-8">
                            <input type="text" name="start" id="add_start" value="" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">End</label>
                        <div class="col-lg-8">
                            <input type="text" name="end" id="add_end" value="" class="form-control" />
                        </div>
                    </div>                      
                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" value="Save" class="btn btn-p1" >
                </div>
            </form>
        </div>
    </div>
</div>

最后是 JS：

        $("#add_form").validate({
            rules: {
                start: "required",
                end: "required"
            },
            submitHandler: function(form) {
                var id=$(this).attr('data-id');
                var s=$('#add_start').val();
                var e=$('#add_end').val();
                $.ajax({
                    type: "POST",
                    url: "/add.php",
                    data: {start: s, end: e, eid: id},
                    success: function(){    
                        $('#add-modal').modal('hide');
                        $('#add_start').val('');
                        $('#add_end').val('');
                    }
                });
              return false;
            }
        });
    });

在 JS 中，我要么想获取单击按钮的 ID，要么将其作为隐藏字段传递到模态本身，这样我就可以序列化表单，但我不知道如何

我需要能够将 data-id 值传递到 AJAX 脚本中，这样我才能确保将表单值应用于正确的 ID

标签： jquerytwitter-bootstrap-3jquery-validatebootstrap-modal

解决方案

如果您将data-id作为hidden字段传递到模态表单中，则该值将在表单序列化时自动成为查询字符串的一部分。否则，您可以在您submitHandler的其他字段值中以编程方式捕获此值。

构造一个click处理程序，该处理程序将在单击时将此值分配给隐藏字段。

$('a.icon-plus-circle').on('click', function() {
    var buttonID = $(this).data('id'); // get value of data-id
    $('#hidden').val(buttonID);        // assign data-id to hidden field called #hidden
});

见： https ://api.jquery.com/data/#data2

确保form包含与上述相同目标的隐藏字段。

 <form id="add_form" class="form-horizontal" method="POST">
     <input type="hidden" id="hidden" value="" />
     ....

并在以下范围内捕获/分配submitHandler：

submitHandler: function(form) {
    var id = $('#hidden').val(); // get value of hidden field called #hidden
    ....

推荐阅读