如何提交通过引导弹出窗口加载的表单

我如何使用 jquery 提交表单，我的表单已加载到引导弹出窗口上。 我尝试了下面的 jquery 代码，但它没有提交表单

前任。 我必须提交以下带有 id=161subproj 的表单，那么如何在加载到“popover”后提交此表单。

希望我的问题很清楚，如果还不清楚，请发表评论。小提琴演示

我的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");
            }
        });
     ...............
     ............... 

表单加载到弹出窗口上：（我想当用户按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');
        }  
    });

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(); 
                }
           });
});

并将提交按钮放入表单中。