我正在尝试在用户单击所选元素上的按钮时创建表单。但是,当我尝试它时,我点击一个按钮,它加载多个,或加载1,但只显示一个值,如果这是有道理的。这是我的代码:
<?php
$sql = "SELECT * FROM services";
$result = $database->query($sql);
while ($row = mysqli_fetch_assoc($result)) {
$id = $row['id'];
?>
<div class="service_display">
<div class="service_header"><?php echo $row['service_name']; ?></div>
<div class="service_desc"><?php echo $row['service_desc']; ?></div>
<div class="service_options">
<button type="button" class="additional_files" id="additional_files">Edit</button>
</div>
</div>
<?php
}
?>
我有一个表单,当按下按钮时会出现jQuery,我试图用相应的id填充值。这是我的代码:
<div class="show-onclick">
<h3>Edditing service: <?php echo $row['service_name']; ?></h3>
<hr>
<form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
<input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
<textarea><?php echo $row['service_desc']; ?></textarea>
</form>
</div>
我认为问题是我不知道在哪里放置代码,如果我把它放在while循环中,它可以工作,但可以理解的是,我有10个输入字段弹出...
如果我把它放在while循环之外并运行一个单独的查询来填充它,它就是空的..
答案 0 :(得分:0)
根据你对这个问题的解释,你可以清楚地看到你正在将表格与前端显示div一起循环,这不是一个好主意。
总是最好使用一个模态窗口然后根据点击你必须将数据加载到它上然后弹出它。
无论如何,对于您的场景,可能有多个解决方案,但这个解决方案也可以达到目的:
将&#34; show-onclick&#34;整个div在&#34; service_display&#34; div所以现在它也没有问题。 现在,当点击按钮时,找到最接近的&#34; service_display&#34; div,它会给你dom元素&amp;然后使用它并弹出&#34; show-onclick&#34; div包含在那里。
请遵循以下代码:
<?php
$database = new mysqli("localhost", "root", "", "so");
$sql = "SELECT * FROM services";
$result = $database->query($sql);
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
?>
<div class="service_display" id="sd_<?php echo $row['id']; ?>">
<div class="service_header"><?php echo $row['service_name']; ?></div>
<div class="service_desc"><?php echo $row['service_desc']; ?></div>
<div class="service_options">
<button type="button" class="additional_files" id="additional_files">Edit</button>
</div>
<div class="show-onclick">
<h3>Edditing service: <?php echo $row['service_name']; ?></h3>
<hr>
<form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
<input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
<textarea><?php echo $row['service_desc']; ?></textarea>
</form>
</div>
</div>
<?php
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".show-onclick").css("display", "none");
$(document).on("click", ".additional_files", function() {
$(".show-onclick").css("display", "none");
var sd_id=$(this).closest('div.service_display').attr("id");
$("#"+sd_id+" .show-onclick").css("display", "block");
});
});
</script>
我对您的代码所做的唯一更改是我已向service_display div添加了动态ID字段。 并且我使用了jquery 来显示和隐藏各个点击按钮的形式。
再次在这里,我使用了基于oop的mysqli,这不是强制性的,你的也很完美。