Ram Ram - 3 years ago 99
PHP Question

Bootstrap multiple models in same page give same for all models

I have made about 5 models in a single page using bootstrap with username,password,email,mobile and student are different models but all the buttons give the same model of that of username button even I change the id in each element my code is

<div class="container">
<h2>Account settings</h2>
<label class="control-label col-sm-10">username : <?php $name =
$_SESSION['username']; echo $name;?></label>
<div class="col-sm-offset-4 col-sm-2">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal"
data-target="#myModal">change username</button>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title">Change username</h4>
</div>
<div class="modal-body">
<center>old username: <?php $name = $_SESSION['username']; echo
$name;?></center><br>
new username : <input type="text">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<label class="control-label col-sm-10">password : <?php $name =
$_SESSION['password']; echo $name;?></label>
<div class="col-sm-offset-4 col-sm-2">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal"
data-target="#myModal">change password</button>
</div>
<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title">change password</h4>
</div>
<div class="modal-body">
<img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400"
height="300">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<label class="control-label col-sm-10">email : <?php $name =
$_SESSION['email']; echo $name;?></label>
<div class="col-sm-offset-4 col-sm-2">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal"
data-target="#myModal">change email</button>
</div>
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400"
height="300">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<label class="control-label col-sm-10">mobile numb: <?php $name =
$_SESSION['mobile']; echo $name;?></label>
<div class="col-sm-offset-4 col-sm-2">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal"
data-target="#myModal">change mobile</button>
</div>
<div class="modal fade" id="myModal4" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400"
height="300">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div><br>
<div class="container">
<div class="col-sm-offset-4 col-sm-2">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal"
data-target="#myModal">Add student</button>
</div>
<div class="modal fade" id="myModal5" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img id="myImg" src="1.jpg" alt="Trolltunga, Norway" width="400"
height="300">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</body>



Answer Source

Add related ids in buttons as well. You are only targeting the myModal

<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
 data-target="#myModal">change mobile</button>
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" 
 data-target="#myModal4">change mobile</button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download