Form elements values don't get posted if inside modal

Question

So I have this huge table with data, each row has it's own "edit" button that opens a modal window. In each of these modal windows there is a form, and a submit button. It works just fine like this.

Now comes the tricky part.

I added a second layer using bootstrap-modal, a second modal on top of the first one. Inside this modal, more inputs and selects, members of the same form. The data gets populated nicely. If I modify some values, close this 2nd modal, and open it again, the modified values are kept.

The problem is that if I submit the form (the button is on the 1st modal window) the inputs in the 2nd modal don't get posted...

What am I missing? Can't this be done? Should I try using some form of matching, so when the 2nd modal closes some hidden inputs in the 1st modal get populated and they get posted instead?

Here's how (part of) the code looks like:

    <form action="submit_modal_projects.php" method="post" class="form-horizontal">

    <fieldset> <!-- right column -->
        <fieldset class="bordered_fieldset" style="margin-left:10px;">
            <legend>Etape</legend>
            <div class="control-group">
                <div class="controls controls-row">
                    <label for="" class="span3">Lance</label>
                    <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_obj']; ?>" name="site_compo_site_pf_obj">
                    <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_est']; ?>" name="site_compo_site_pf_est">
                    <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_reel']; ?>" name="site_compo_site_pf_reel">
                    
                    &nbsp;
                    <input type="checkbox">
                    
                    
                    <button class="demo btn btn-primary btn-mini" data-toggle="modal" href="#ajax-modal-<?php echo $row['id']; ?>">Detalii</button>
                    
                    <!-- mini modal -->
                    <div id="ajax-modal-<?php echo $row['id']; ?>" class="modal hide fade" tabindex="-1" style="display: none; margin-top: -128.5px;" data-width="360">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3>Detal<?php echo $row_j['site_compo_site_pf_obj_initial']; ?></h3>
                    </div>
                    <div class="modal-body">

                        <h5>Site compo</h5>
                                                 
                        <fieldset class="bordered_fieldset">
                         <legend>Fase</legend>
                         <div class="control-group">
                              <div class="controls controls-row">
                                   <label class="span1 text-center"></label>
                                   <label class="span1 text-center">Obj</label>
                                   <label class="span1 text-center">Est</label>
                                   <label class="span1 text-center">Reel</label>
                              </div>
                              <div class="controls controls-row">
                                   <label class="span1">Inițial:</label>
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_obj_initial']; ?>" name="site_compo_site_pf_obj_initial" disabled>
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_est_initial']; ?>" name="site_compo_site_pf_est_initial" disabled>
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_reel_initial']; ?>" name="site_compo_site_pf_reel_initial" disabled>
                              </div>
                              <div class="controls controls-row">    
                                   <label class="span1">Propus:</label>
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_obj']; ?>" id="site_compo_site_pf_obj_propus">
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_est']; ?>" id="site_compo_site_pf_est_propus">
                                   <input type="text" class="span1" value="<?php echo $row_j['site_compo_site_pf_reel']; ?>" id="site_compo_site_pf_reel_propus">
                         </div>
                         <div class="controls controls-row">
                              <label for="" class="span1">Motiv:</label>
                              <select class="span3" name="site_compo_site_pf_motiv" id="site_compo_site_pf_motiv">
                                   <option value="<?php echo $row_j['site_compo_site_pf_motiv']; ?>"><?php echo $row_j['site_compo_site_pf_motiv']; ?></option>
                                   <option value="opt"></option>
                                   <option value="Modif">Modif</option>
                                   <option value="Retard">Retard </option>
                                   <option value="Lead Time">Lead Time</option>
                                   <option value="Tech">Tech</option>
                                   <option value="Nope">PNope</option>
                                   <option value="Capac">Capac</option>
                                   <option value="Prot">Prot</option>
                                   <option value="Acc2">Acc2</option>
                                   <option value="Acc">Acc</option>
                                   <option value="Supp">Supp</option>
                                   <option value="Other">Other</option>
                              </select>
                         </div>
                         <div class="controls controls-row">
                              <label for="" class="span1">Detalii:</label>
                              <input type="text" class="span3" name="lancement_projet_site_compo_site_pf_detalii" id="lancement_projet_site_compo_site_pf_detalii" value="<?php echo $row_j['lancement_projet_site_compo_site_pf_detalii']; ?>">
                         </div>
                        </div>
                      </fieldset>
                    </div>
                    <div class="modal-footer">
                        <button class="btn update">Update</button>
                        <button type="button" data-dismiss="modal" class="btn">Close</button>
                        <button type="button" class="btn btn-primary">Ok</button>
                    </div>
                </div>
                     
                </div>
            </div>
            
        </fieldset>
    </fieldset><!-- end right column -->
    
</form>

Answer 1

What does your network tool show to be posted? You can see what gets submitted when you hit the submit button by checking the Developer Tools in Chrome for example. This works in FF and so on.

If your values from the 2nd modal are not submitted by the form submit it means they are not passed to the 1st modal. In this case you have answered the question yourself: pass them from modal2 to modal1 within hidden fields. You can do this with javascript right befor the submit or by hanging a function on the submit event.

If your values are posted but you don't see them on the server side, make sure you are not filtering them somewhere.

Answer 2

The fields in the second modal window are not inside <form> element of the first modal. I think placing modal inside modal would break the design, so the solution would be to use javascript to place it inside just before submiting.