Question

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

CODE：

主页：

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

问题是，当我单击提交父页面表单的模式中的提交按钮时，表单会提交，但子页面的输入不会与表单一起包含。我需要做些什么来使输入项与父页表单一起包含在内吗？

谢谢！

Answer 1

能够找到答案：

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

$（'input [name $ =“category”]'）。change（function（）{ var thecat = $（this）.val（）;

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

}）;

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

1 个答案: