Question

如何使用jquery提交表单，我的表单加载到bootstrap popover上。我尝试了下面的jquery代码，但它没有提交表单

实施例。我必须在下面的表单中提交id = 161subproj，所以如果这个表单加载到“popover”后如何提交..

希望我的问题很清楚，如果不是，请写评论。 FIDDLE DEMO

我的html页面：

<div id="project-div-id"> 
        <ul style="padding: 0px 0 2px;margin-left: 0px;">


         <li><span class="slilink"> personal</span>
            <img class="del_btn" src="/images/icons/add.gif"> 
              <form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj"  style="display:none;">
                  <input type="text" value="2st">
                   <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >   
              </form>
         </li>


     </div>

提交此表单的Jquery代码

 ...............
 ...............
console.log($("#"+formidd));// NOTE: i have accurate form id
         $("#"+formidd).validate({
            rules: {
                sproject_name: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                }, tooltip_options: {
                    sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                }
            },
            submitHandler: function(form) { 
                alert("form submit");
            }
        });
     ...............
     ...............

在popover上加载的表单：（我想在用户按ENTER时提交）

完整的jquery代码：

 var formidd='';

    $('.add_btn').popover({
        html: true,
         title: function () {
             formidd=$(this).parent().find('.projform_id').text();
            return $(this).parent().find('.sub_proj_head').html(); 
        }, 
        content: function() { 
                 console.log(formidd+'--getting form id');//i have loaded form id
                $("#"+formidd).validate({
                   rules: {
                       sproject_name: {
                           minlength: 3,
                           maxlength: 15,
                           required: true
                       }, tooltip_options: {
                           sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                       }
                   },
                   submitHandler: function(form) { 
                       alert("form submit");
                   }
               });
            return $(this).parent().find('.sub_proj_content').html();

        }

    });

    $('.add_btn').click(function(e) {  
        $('.add_btn').not(this).popover('hide');
        e.stopPropagation();
    });

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

Answer 1

<强> Demo

你需要从弹出框中移出验证部分并将其放在onclick事件上，如;

$('.add_btn').popover({
    html: true,
     title: function () {
         formidd=$(this).parent().find('.projform_id').text();
        return $(this).parent().find('.sub_proj_head').html(); 
    }, 
    content: function() { 
        return $(this).parent().find('.sub_proj_content').html();

    }

});

$('.add_btn').click(function(e) {  
    $('.add_btn').not(this).popover('hide');
    e.stopPropagation();
    var formidd=$(this).parent().find('.projform_id').text();
    console.log(formidd)
    $("#"+formidd).validate({
               rules: {
                   sproject_name: {
                       minlength: 3,
                       maxlength: 15,
                       required: true
                   }
               },
               submitHandler: function(form) {
                    alert("hi");
                    $(form).ajaxSubmit(); 
                }
           });
});

并在表单中添加提交按钮。

如何提交通过bootstrap popover加载的表单

1 个答案: