Generated <form> inside Bootstrap-Modal需要有唯一ID
Generated <form> inside Bootstrap-Modal needs to have a unique ID
好吧，我最近几天搜索了整个 Internet 以找到一种方法将唯一的 ID and/or name 附加到 GENERATED form 在 Bootstrap-Modal 中，我从来没有成功过...
我知道我在代码中犯了错误，但是我运行没主意了，我不知道该用什么。
*编辑：我正在使用 Bootstrap 3，我创建了一个 table，使用 JavaScript 有一个实时搜索字段。 table 行是使用查询从数据库中显示的。该行的最后一列弹出一个Bootstrap-Modal，里面有一个表单，现在问题来了！我设法为每个模态和每个模态弹出按钮分配了一个唯一的 ID，但是表单！从这里一切都是雾。
代码如下：
<div id="fm-<?php echo $row['PacientID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
<b>
Fișa medicală #<?php echo $row['PacientID']; ?>: <?php echo $row['Name'].' '.$row['Surname']; ?>
</b>
</h4>
<?php
if (isset ($entranceSuccess))
{
?>
<div class="alert alert-success text-center">
<?php echo $entranceSuccess; ?>
</div>
<?php
}
?>
<?php
if (isset ($entranceError))
{
?>
<div class="alert alert-danger text-center">
<?php echo $entranceError; ?>
</div>
<?php
}
?>
</div>
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody>
<?php
$intrari = "SELECT * FROM intrari";
$intrariResults = $db -> query($intrari);
while ($row2 = $intrariResults -> fetch_assoc())
{
if ($row2['Pacient'] == $row['PacientID'])
{
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td>
<?php echo $row2['Treatment'];?>
</td>
<td>
<?php echo $row2['Achitat'];?>
</td>
</tr>
<?php
}
}
?>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="addEntrance" name="addEntrance-<?php echo $row['PacientID'];?>">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
<?php
if (isset ($_POST['addEntrance-<?php echo $row[PacientID]; ?>']))
{
$entranceDate = $_POST['entranceDate'];
$pacient = $row['PacientID'];
$medic = $_POST['medic'];
$treatment = $_POST['treatment'];
$achitat = $_POST['achitat'];
$insertEntrance = "INSERT INTO intrari (EntranceDate, Pacient, Medic, Treatment, Achitat)
VALUES ('$entranceDate', '$pacient', '$medic', '$treatment', '$achitat')";
if (mysqli_query ($db, $insertEntrance))
{
$entranceSuccess = "Pacientul a fost adăugat în baza de date cu succes!";
}
else
{
$entranceError = "A apărut o eroare nedefinită! Suna-l pe Andrei (0755 696 200) și dictează-i: \"Error code: " . mysqli_error ($db) . "\"";
}
}
?>
</div>
</form>
</div>
</div>
通过查看您的代码，我发现您将 Modal HTML 放入 loop 并通过将唯一 id's 分配给模态选择器 id="fm-<?php echo $row['PacientID']; ?>" 来尝试创建多个模态使用独特的 id(s)，它会导致页面加载缓慢并且 运行 在每个独特的模式中查询从数据库中获取记录，即使您不需要在页面加载时获取记录，这不是一个好习惯,
所以让我们向后退一步并从while loop中删除Modal并将其放在外面并从Modal id选择器中删除<?php echo $row['PacientID']; ?> .
<div id="fm" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
//Modal-Header, Modal-Body, Modal-Footer Comes Here
</div>
</div>
</div>
现在如你所说该行的最后一列弹出一个Bootstrap-Modal
假设您正在触发具有数据属性 data-toggle="modal" data-target="#fm" 的默认行为的模式，并且您在行的其他列中有其他信息，例如 <?php echo $row['Name'].' '.$row['Surname']; ?>，因此您必须具有类似
的内容
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><?php echo $row['Name'].' '.$row['Surname']; ?></td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
现在让我们将 pacientid 和 name 传递给模态，将 data-attribute data-pacient 添加到 name 列和 modal trigger button 如此上面table col 将是
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><span class="pacientname" data-pacient="<?php echo $row['PacientID']; ?>"><?php echo $row['Name'].' '.$row['Surname']; ?></span></td>
<td><button type="button" data-pacient="<?php echo $row['PacientID']; ?>" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
使用bootstrap modal event listener，当模态即将show或shown
时，你可以将信息传递给模态
$(document).ready(function(){ //Dom Ready
$('#fm').on('show.bs.modal', function (e) { //Show event listener
var id = $(e.relatedTarget).data('pacient'); //Fetch val from modal data-attribute
var name = $('.pacientname[data-pacient="' + id +'"]').html(); //fetch val from selector `pacientname` data-attribute with match the val of modal button data-attribute
$(".pid").html(id); //selector inside modal header to pass id
$(".pname").html(name); //selector inside modal header to pass name
$("#addEntrance").val(id); //Passing id to hidden input in form, explained below
//Ajax method comes here which explains below
});
});
Modal-Header
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="pid"></span> <span class="pname"></span></h4>
</div>
Fiddle Example 传递信息给模态
现在关于您在模态中 运行 的查询，可以通过 Ajax method 完成并在模态中显示信息。因为我们已经有了所需的变量 var id = $(e.relatedTarget).data('pacient'); 可以使用它通过 Ajax 方法
获取所需的信息
var dataString = 'id='+ id;
alert(dataString);
$.ajax({
type: "POST",
url: "file.php", //Create this file and handle query in it.
data: dataString,
cache: false,
success: function (data) {
$("#morecontent > tbody.showHere").html(data); //show fetched information from database
}
});
和file.php将是
<?php
//Database Connection Here
if(isset($_POST["id"])) {
$id = $_POST["id"]; //escape the string
$queryIntrari = "SELECT * FROM intrari WHERE Pacient = '$id'";
$intrariResults = $db -> query($queryIntrari);
while ($row2 = $intrariResults -> fetch_assoc()){
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td><?php echo $row2['Treatment'];?></td>
<td><?php echo $row2['Achitat'];?></td>
</tr>
<?php } } ?>
和 Modal-body、Modal-Footer 与 form 以及使用 Ajax 从数据库中获取的信息将类似于
<table class="table table-hover table-bordered" id="morecontent">
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<input type="hidden" id="addEntrance" name="addEntrance" value="">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody class="showHere">
//Information Fetched from Database Using Ajax will show Here
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
</div>
</form>
注意：在上面<form>中创建了一个隐藏输入，在模态显示时将值<?php echo $row['PacientID']; ?>传递给隐藏输入，Post这个隐藏输入与其他输入一起提交以模态形式向数据库中插入或更新值
任务完成，希望你弄清楚如何在模态中传递和获取信息
注意：您可以按照您正在做的方式提交模态表单，也可以使用 Ajax 并在模态中显示 success 或 error 消息而不关闭它，并且离开页面，但这是另一个故事。
快乐编码。
好吧，我最近几天搜索了整个 Internet 以找到一种方法将唯一的 ID and/or name 附加到 GENERATED form 在 Bootstrap-Modal 中，我从来没有成功过...
我知道我在代码中犯了错误，但是我运行没主意了，我不知道该用什么。
*编辑：我正在使用 Bootstrap 3，我创建了一个 table，使用 JavaScript 有一个实时搜索字段。 table 行是使用查询从数据库中显示的。该行的最后一列弹出一个Bootstrap-Modal，里面有一个表单，现在问题来了！我设法为每个模态和每个模态弹出按钮分配了一个唯一的 ID，但是表单！从这里一切都是雾。
代码如下：
<div id="fm-<?php echo $row['PacientID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
<b>
Fișa medicală #<?php echo $row['PacientID']; ?>: <?php echo $row['Name'].' '.$row['Surname']; ?>
</b>
</h4>
<?php
if (isset ($entranceSuccess))
{
?>
<div class="alert alert-success text-center">
<?php echo $entranceSuccess; ?>
</div>
<?php
}
?>
<?php
if (isset ($entranceError))
{
?>
<div class="alert alert-danger text-center">
<?php echo $entranceError; ?>
</div>
<?php
}
?>
</div>
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody>
<?php
$intrari = "SELECT * FROM intrari";
$intrariResults = $db -> query($intrari);
while ($row2 = $intrariResults -> fetch_assoc())
{
if ($row2['Pacient'] == $row['PacientID'])
{
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td>
<?php echo $row2['Treatment'];?>
</td>
<td>
<?php echo $row2['Achitat'];?>
</td>
</tr>
<?php
}
}
?>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="addEntrance" name="addEntrance-<?php echo $row['PacientID'];?>">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
<?php
if (isset ($_POST['addEntrance-<?php echo $row[PacientID]; ?>']))
{
$entranceDate = $_POST['entranceDate'];
$pacient = $row['PacientID'];
$medic = $_POST['medic'];
$treatment = $_POST['treatment'];
$achitat = $_POST['achitat'];
$insertEntrance = "INSERT INTO intrari (EntranceDate, Pacient, Medic, Treatment, Achitat)
VALUES ('$entranceDate', '$pacient', '$medic', '$treatment', '$achitat')";
if (mysqli_query ($db, $insertEntrance))
{
$entranceSuccess = "Pacientul a fost adăugat în baza de date cu succes!";
}
else
{
$entranceError = "A apărut o eroare nedefinită! Suna-l pe Andrei (0755 696 200) și dictează-i: \"Error code: " . mysqli_error ($db) . "\"";
}
}
?>
</div>
</form>
</div>
</div>
通过查看您的代码，我发现您将 Modal HTML 放入 loop 并通过将唯一 id's 分配给模态选择器 id="fm-<?php echo $row['PacientID']; ?>" 来尝试创建多个模态使用独特的 id(s)，它会导致页面加载缓慢并且 运行 在每个独特的模式中查询从数据库中获取记录，即使您不需要在页面加载时获取记录，这不是一个好习惯,
所以让我们向后退一步并从while loop中删除Modal并将其放在外面并从Modal id选择器中删除<?php echo $row['PacientID']; ?> .
<div id="fm" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
//Modal-Header, Modal-Body, Modal-Footer Comes Here
</div>
</div>
</div>
现在如你所说该行的最后一列弹出一个Bootstrap-Modal
假设您正在触发具有数据属性 data-toggle="modal" data-target="#fm" 的默认行为的模式，并且您在行的其他列中有其他信息，例如 <?php echo $row['Name'].' '.$row['Surname']; ?>，因此您必须具有类似
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><?php echo $row['Name'].' '.$row['Surname']; ?></td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
现在让我们将 pacientid 和 name 传递给模态，将 data-attribute data-pacient 添加到 name 列和 modal trigger button 如此上面table col 将是
<tr>
<td><?php echo $row['PacientID']; ?></td>
<td><span class="pacientname" data-pacient="<?php echo $row['PacientID']; ?>"><?php echo $row['Name'].' '.$row['Surname']; ?></span></td>
<td><button type="button" data-pacient="<?php echo $row['PacientID']; ?>" class="btn btn-info" data-toggle="modal" data-target="#fm">Open Modal</button></td>
</tr>
使用bootstrap modal event listener，当模态即将show或shown
$(document).ready(function(){ //Dom Ready
$('#fm').on('show.bs.modal', function (e) { //Show event listener
var id = $(e.relatedTarget).data('pacient'); //Fetch val from modal data-attribute
var name = $('.pacientname[data-pacient="' + id +'"]').html(); //fetch val from selector `pacientname` data-attribute with match the val of modal button data-attribute
$(".pid").html(id); //selector inside modal header to pass id
$(".pname").html(name); //selector inside modal header to pass name
$("#addEntrance").val(id); //Passing id to hidden input in form, explained below
//Ajax method comes here which explains below
});
});
Modal-Header
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="pid"></span> <span class="pname"></span></h4>
</div>
Fiddle Example 传递信息给模态
现在关于您在模态中 运行 的查询，可以通过 Ajax method 完成并在模态中显示信息。因为我们已经有了所需的变量 var id = $(e.relatedTarget).data('pacient'); 可以使用它通过 Ajax 方法
var dataString = 'id='+ id;
alert(dataString);
$.ajax({
type: "POST",
url: "file.php", //Create this file and handle query in it.
data: dataString,
cache: false,
success: function (data) {
$("#morecontent > tbody.showHere").html(data); //show fetched information from database
}
});
和file.php将是
<?php
//Database Connection Here
if(isset($_POST["id"])) {
$id = $_POST["id"]; //escape the string
$queryIntrari = "SELECT * FROM intrari WHERE Pacient = '$id'";
$intrariResults = $db -> query($queryIntrari);
while ($row2 = $intrariResults -> fetch_assoc()){
?>
<tr class="text-center">
<th scope="row" class="text-center">
<?php echo $row2['EntranceDate'];?>
</th>
<td>
<?php
if ($row2['Medic'] == 1)
{
echo 'Dr. Carmen Pădurean';
}
else if ($row2['Medic'] == 2)
{
echo 'Dr. Claudiu Șuc';
}
else if ($row2['Medic'] == 3)
{
echo 'Dr. Mihaela Toncean';
}
else if ($row2['Medic'] == 4)
{
echo 'Dr. Alexandra Cenan';
}
else
{
echo 'MEDICUL STOMATOLOG NU A FOST DEFINIT!';
}
?>
</td>
<td><?php echo $row2['Treatment'];?></td>
<td><?php echo $row2['Achitat'];?></td>
</tr>
<?php } } ?>
和 Modal-body、Modal-Footer 与 form 以及使用 Ajax 从数据库中获取的信息将类似于
<table class="table table-hover table-bordered" id="morecontent">
<form data-toggle="validator" id="entranceForm" role="form" method="POST">
<input type="hidden" id="addEntrance" name="addEntrance" value="">
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Data Intrării</th>
<th class="text-center">Medic Stomatolog</th>
<th class="text-center">Tratament</th>
<th class="text-center">Achitat</th>
</tr>
</thead>
<tbody class="showHere">
//Information Fetched from Database Using Ajax will show Here
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<div class="form-group">
<div class="input-group date entranceDateField">
<input type="text" class="form-control" id="entranceDate" name="entranceDate">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control" id="medic" name="medic">
<option value="1">Dr. Carmen Pădurean</option>
<option value="2">Dr. Claudiu Șuc</option>
<option value="3">Dr. Mihaela Toncean</option>
<option value="4">Dr. Alexandra Cenan</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="treatment" name="treatment">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="achitat" name="achitat">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">
<span class='glyphicon glyphicon-plus'></span> Adaugă Intrare
</button>
</div>
</form>
注意：在上面<form>中创建了一个隐藏输入，在模态显示时将值<?php echo $row['PacientID']; ?>传递给隐藏输入，Post这个隐藏输入与其他输入一起提交以模态形式向数据库中插入或更新值
任务完成，希望你弄清楚如何在模态中传递和获取信息
注意：您可以按照您正在做的方式提交模态表单，也可以使用 Ajax 并在模态中显示 success 或 error 消息而不关闭它，并且离开页面，但这是另一个故事。
快乐编码。