如何提交通过Bootstrap Popover加载的表单 [英] how to submit a form loaded over bootstrap popover

问题描述

我如何使用jquery提交表单，我的表单已加载到bootstrap popover上. 我尝试了以下jquery代码，但未提交表单

How can i submit a form using jquery, my form is loaded on the bootstrap popover. I tried the below jquery code but its NOT submitting the form

例如 我必须在下面的表单中提交id = 161subproj的表单，因此一旦将表单加载到弹出窗口"中后如何提交表单.

Ex. I have to submit below form with id=161subproj, so how to submit this form once it loaded into the "popover"..

希望我的问题很清楚，否则请写评论. 游戏演示

Hope my question is clear, if not please write comment. 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");
            }
        });
     ...............
     ............... 

弹出式窗口上加载的表单:(我想在用户按Enter时提交)

Form loaded on the popover:(I want to submit it when user press 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事件之类；

You need to move validate part out of from popover and put it onclick event like;

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

然后在表单中放置提交"按钮.

And put submit button in your forms.

这篇关于如何提交通过Bootstrap Popover加载的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！