Question

如何提交在bootstrap popover上加载的表单？

点击按钮，表格将加载到popover＆amp;用户应该可以通过按ENTER键提交相同的表单。 check this fiddle

我试过这样但是它加载了整个页面

 $('#popoverId').popover({
        html: true,
        title: 'Popover Title<a class="close" href="#");">&times;</a>',
        content: $('#popoverContent').html(),
    });

    $('#popoverId').click(function (e) {
        e.stopPropagation();
    });

    $(document).click(function (e) {
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
            $('#popoverId').popover('hide');
        }
    });


    //--------------script to to submit form after validation -------------

      $(".popover").parent().find('#something').validate({
                rules: {
                               sproject_name: {
                                   minlength: 3,
                                   maxlength: 15,
                                   required: true
                               }, tooltip_options: {
                                   sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                               }
                           },
                          submitHandler: function(e) {console.log("ajax logi goes here...."); 
                                        }
                       });

html代码

<h3>Live demo</h3>

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to open form</button>

<div id="popoverContent" class="hide">
   <form method="post" name="project-forms" id="something"><input  class="red-tooltip" id="sadd_project_id" name="sproject_name" type="text" required/></form>
</div>

Answer 1

您需要在.validate点击内使用#popoverId。因为，您在页面加载时使用它，那时弹出窗口仍然不存在。您可以看到以下代码和演示，以便了解投注;

$('#popoverId').click(function (e) {
    e.stopPropagation();
    $('#something').validate({
            rules: {
                sproject_name: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                }
            },
        submitHandler: function(form) {
            $.ajax({
                type: $(form).attr('method'),
                url: $(form).attr('action'),
                data: $(form).serialize(),
                dataType : 'json'
            })
            .done(function (response) {
                if (response.success == 'success') {               
                    alert('success');                       
                } else {
                    alert('fail');
                }
            });
        return false;  
        }
    });

});

在此处查看工作演示： Demo

提交一个在bootstrap popover上加载的表单

1 个答案: