从远程/模态引导表单中添加元素并使用父页面表单提交它们答案

【问题标题】：Adding elements from a remote/modal bootstrap form in and submitting them with parent page form从远程/模态引导表单中添加元素并使用父页面表单提交它们
【发布时间】：2014-11-28 21:11:36
【问题描述】：

我需要一个带有表单的父引导页面。在这个页面中，我有一个引导动态模式，它加载到一个外部页面中，其中包括一些表单元素以及一个提交父页面表单的提交按钮。当我单击该提交按钮时，我需要将子/ajax/included 页面上的表单元素与父页面上的表单元素一起包含在内。目前，该表单已提交，但未包含表单元素。

代码：

主页：

<form id="file_form" method="get" action="/SearchPage.html">


 <!-- MODAL THAT DYNAMICALLY LOADS ExternalForms.html VIA THE BUTTON BELOW -->
 <div class="modal fade mboxmodal" id="myModalcats" 
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="z-index: 99999999;">

   <div class="modal-content">

    </div>
  </div>
 </div>


 <!-- THIS BUTTON LAUNCHES THE BOOTSTRAP MODAL AND LOADS ExternalForms.html IN IT -->
     <button href="/ExternalForms.html" data-toggle="modal" 
     data-target="#myModalcats">Categories</button>


 <!-- A RANDOM FORM INPUT --> 
 <input name="input1" value="48">

 </form>

外部页面：

 <!DOCTYPE html>
 <html>
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Filter By Category</title>  
 </head>
 <body>

        <div class="modal-header">

 <!-- HERE IS THE SUBMIT BUTTON WITHIN THE EXTERNAL PAGE THAT SUBMITS THE PARENT PAGES FORM-->

 <button type="submit" onclick="javascript:$('#file_form').submit();" 
 class="btn btn-default pull-right" data-dismiss="modal">Submit</button>

        </div>

        <div class="modal-body">

  <!-- HERE IS THE INPUT ON THE MODAL/AJAX PAGE
        THAT I NEED TO BE INCLUDED IN THE SUBMIT OF THE PARENT PAGE-->

        <input type="checkbox" name="category" value="38">

   </div>
 </body>
 </html>

问题是，当我单击提交父页面表单的模式中的提交按钮时，表单确实提交，但来自子页面的输入没有与表单一起包含。我需要做些什么才能使该输入项与父页面表单一起包含吗？

谢谢！

【问题讨论】：

请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西

标签： jquery ajax twitter-bootstrap modal-dialog

【解决方案1】：

能够找到答案：

这个 Jquery 进入外部/模态页面。它检查输入是否已更改，是否已更改，然后创建一个全新的隐藏字段并将其附加到父表单。

$('input[name$="category"]').change(function() { var thecat = $(this).val();

$('#file_form').append('<input type="hidden" name="category" value='+ thecat + ' />');

});

【讨论】：