提交表單加載在引導彈出窗口

Question

我已經動態創建行，在每一行上我有一個添加按鈕，當用戶點擊添加按鈕時，動態創建的表單將被加載到引導宿主上。
FIDDLE DEMO

我的問題是：

爲什麼這個代碼是沒有得到調用？ 基本上我是從bootstrap彈出窗口提交此表單？

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

任何幫助將非常appreciated.Please幫我...

---

形式如下：（我想驗證用戶時，按ENTER鍵它&提交）

---

我的HTML數據看起來樣子：

<div id="project-div-id"> 
     <ul style="padding: 0px 0 2px;margin-left: 0px;"> 
     <li><span class="slilink"> tour </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="160subproj" id="160subproj" style="display:none;"> 
        <input type="text" value="1st"> 
        <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" > 
       </form> 
     </li> 

     <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> 

    <li><span class="slilink"> business</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="162subproj" id="162subproj" style="display:none;"> 
        <input type="text" value="3rd form"> 
        <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" > 
       </form> 
     </li> 
    </div> 

---

這是我的全部jQuery代碼：

<script type="text/javascript"> 
    $(document).ready(function() { var formidd=''; 

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

     }); 

     $('.add_btn').click(function(e) { 

      console.log($("#"+formidd));//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"); 
      } 
     }); 



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


    }); 
</script> 

Answer 1

我想我看到你想要做什麼。除非您在表格的某個位置有<input type='submit' />，否則默認情況下，輸入按鈕不起作用。

你可以嘗試的一些hackery是在輸入後立即提交一個提交按鈕，給它一個像「不可見」的類名，並設置該類去除所有邊界，邊距，填充等等。警告，設置display:none將無法正常工作，因爲某些瀏覽器會有效地移除該元素

例如：jsfiddle

編輯：我只拿到了巡演小提琴的工作，但這個想法是一樣的。表單中必須有一個提交輸入。