Передать data-id через модал в jQuery validate - PullRequest
Новая
       19

Передать data-id через модал в jQuery validate

0 голосов
/ 08 декабря 2018

Я использую jQuery Validate вместе с модальностью Bootstrap - мне нужно получить идентификатор данных исходной кнопки, нажатой в обработчике подтверждения проверки, чтобы я мог передать его через 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 я либо хочузахватить идентификатор кнопки щелчка или передать его в сам модал как скрытое поле, чтобы я мог затем сериализовать форму, но не могу понять, как

Мне нужно иметь возможность передать идентификатор данныхзначение в сценарий AJAX, чтобы я мог убедиться, что значения формы применяются к правильному идентификатору

1 Ответ

0 голосов
/ 08 декабря 2018

Если вы передадите 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
    ....
...