why bootstrap modal is not working - database

Question

I have created forms to allow me to select member button than retrieve information from the database into the table and update it after made change is working great.
Now I want to move that forms into the BOOTSTRAP MODAL but is not working, when I click the button just slides down bootstrap model AND then DISAPPEAR right away.
What did I miss it…
<form method='post'>
<input type='hidden' name='id' value='" . $row['id_boxe'] . "'/>
<input type='submit' name='update' value='Update' href='#modal-view' role='button' class='btn' data-toggle='modal''/>
</form>
</td>
Retrieve information from database after click button.. (outside modal)
<?php
if (isset($_POST['id'])) {
$id = trim($_POST['id']);
$sql = "SELECT * FROM boxes where id_boxe = " . $id;
$result = $db->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$title = $row['title_boxe'];
$status = $row['status'];
$side = $row['side'];
}
$result->close();
}
?>
Section bootstrap modal: (echo information inside modal)
<div class="modal fade" id="modal-view" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
<form method="post" class="col-md-6">
<?php if(isset($id)) {?>
<input type="hidden" name="id_boxe" value="<?=$id?>"/>
<?php } ?>
<div class="form-group">
<label for="boxe_title">Boxe Title</label>
<input type="text" class="form-control" name="boxe_title" value="<?php if(isset($title)) echo $title; ?>">
</div>
<div class="checkbox">
<select name="side">
<?php if(isset($side) && $side == 1) { ?>
<option value="1" selected>right</option>
<?php } else {?>
<option value="1">right</option>
<?php } ?>
<?php if(isset($side) && $side == 2) { ?>
<option value="2" selected>left</op)tion>
<?php } else {?>
<option value="2">left</option>
<?php } ?>
</select>
</div>
<div class="select">
<?php if(isset($status) && $status == 1) { ?>
<label><input type="checkbox" name="visibility" checked> Visible in the Menu</label>
<?php } else {?>
<label><input type="checkbox" name="visibility" > Visible in the Menu</label>
<?php } ?>
</div>
<?php if (isset($_POST['id'])) { ?>
<button type="submit" name="updatedata" class="btn btn-default">Update</button>
<?php } else { ?>
<button type="submit" name="add" class="btn btn-default">Add</button>
<?php } ?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
My question is that what did I missed to show bootstrap modal with profile information instead of disappear bootstrap modal!
Is works fine before bootstrap modal but after moved that forms to bootstrap modal is not working..
What I missed!
Thank you for your help…
AM

Answer 1

My guess is that the form with the submit button is causing the problem, perhaps it is showing the modal quickly because of the data-toggle on the submit button but then since you are triggering a form submit it reloads the page causing the modal to disappear.
Try changing your button to:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-view">Launch demo modal</button>
Like it shows in the demo on bootstrap's site.
Also you might want to read up on SQL Injection because your code looks vulnerable.
It is hard to tell what the problem is with the modal without seeing a full HTML output, can you provide that in jsfiddle?