CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrapmodal-dialog
CRAIG
CRAIG

Reputation: 1029

Adding elements from a remote/modal bootstrap form in and submitting them with parent page form

I need have a parent bootstrap page with a form. Within this page I have a bootstrap dynamic modal that loads in an external page that includes some form elements and also a submit button that submits the parent page's form. When I click that submit button, I need the form elements on the child/ajax/included page to be included along with the form elements on the parent page. Currently, the form DOES get submitted, but the form elements are not being included.

CODE:

MAIN PAGE:

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

EXTERNAL PAGE:

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

The problems is, that when I click the submit button within the modal that submits the parent page's form, the form DOES submit, but the input from the child page is not being included along with the form. Is there something missing I need to do to make that input item be included along with the parent page form?

Thanks!

Upvotes: 0

Views: 939

Answers (1)

CRAIG
CRAIG

Reputation: 1029

Was able to find the answer:

This Jquery goes in the external/modal page. It checks to see if the input was changed and if it was changed, then create a brand new hidden field and attach it to the parent form.

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

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

});

Upvotes: 0

Related Questions