Question

我正在将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

Answer 1

如果将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
    ....

通过模态传递数据ID到jQuery验证

1 个答案: