Twitter's bootstrap Form inside Modal

Question

I'm using twitter's bootstrap to make a WebApp, on one of the features of the App I need to have some modals with form's inside. Those forms will be filled with data through some PHP scripts. I'm having problems using the modal feature with forms, the data for edition is correctly displayed in the fields, but I'can't seem to submit the form.

This is my code:

 <a href="#edit_user_<?php echo $row['id_user'] ?>" role='button' data-toggle='modal' data-original-title='Edit User' class='btn btn-small btn-info time-link'><i class='icon-pencil icon-white'></i></a>
                  <button data-toggle='tooltip' data-original-title='Delete User' class='btn btn-small btn-danger time-link'><i class='icon-trash icon-white'></i></button>
          <?php
             echo "</td>";
             echo "</tr>";?>      

        <div id="edit_user_<?php echo $row['id_user']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
             <div class="modal-body">
                <form action="" method="POST">
                    <label for="name">Name</label>
                    <input type="text" name="name" value="<?php echo $row['name']?>"/>
                    <label for="email">Email</label>
                    <input type="text" name="email" value="<?php echo $row['email']?>">
                    <button type="submit" name="update_btn">Submit</button>
                    <?php
                    if (isset($_POST['update_btn'])) {
                        if (isset($_POST['name']) && $_POST['name'] !="") {
                            if (isset($_POST['email']) && $_POST['email'] !="") {
                                $qstr_updateuser = "UPDATE `host_register`.`users` SET `name`=".$_POST['name'].", `email`= ".$_POST['email']." WHERE `users`.`id_user` = ".$row['id_user']."";
                                echo $qstr_updateuser;
                                $update_user = mysqli_query($dbc,$qstr_updateuser);
                            }
                        }
                    }?>
                </form>
            </div>
             <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>          

And for some reason I can't understand, the browser output's this:

<div class="modal-body">
                <form method="POST" action=""></form>
                    <label for="name">Name</label>
                    <input type="text" value="Pedro Oliveira" name="name">
                    <label for="email">Email</label>
                    <input type="text" value="pedro.oliveira@est.pt" name="email">
                    <button name="update_btn" type="submit">Submit</button>

            </div>

I'm kind of clueless here! Is it a problem with bootstrap or with my code?

Answer 1

Fortunately, I found out that, since the Modal was inside a tag because of a while loop was causing this disturbance, but I could quite understand why that was happening. Fortunately I restarted my work from scratch and decided to create a different while loop to do the same Job, as it seems the problem was really the table tag.

Answer 2

Check out the last comment on this link https://github.com/twitter/bootstrap/issues/50

Edit: even better example here https://gist.github.com/havvg/3226804

Answer 3

If browser output's is that, you can't submit because submit button is not inside the form tag, even the inputs. Unless that your problem is really that.