[英]How to Display MySQL data as a checklist on HTML website?
It's not a very complex problem but I've been stuck for the past few days and can't seem to figure it out. 这不是一个非常复杂的问题,但是过去几天我一直受困,似乎无法解决。 I have a database called "major_degrees" and I want to fetch all the majors from the table called "majors" in this database and then display it as a checklist on my website using PHP and HTML. 我有一个名为“ major_degrees”的数据库,我想从该数据库中名为“ majors”的表中获取所有专业,然后使用PHP和HTML将其作为清单显示在我的网站上。
I believe the fault is somewhere in my while loop.. it is printing the data as text but I want it as a checklist so I can check off the options I want and save them. 我相信错误是在我的while循环中的某处..它正在将数据打印为文本,但我希望将其作为检查清单,以便我可以检查所需的选项并保存。
Here is the PHP code I have so far: 这是我到目前为止拥有的PHP代码:
<?php
$username = "root";
$password = "";
$hostname = "localhost";
$dbname = "major_degrees";
$str='';
// Create connection
$conn = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT degree_name FROM majors";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo $row['degree_name'];
echo "<br/>";
}
return $str;
}
$conn->close();
?>
Here you go. 干得好。 I had some extra time and put together a possible solution for you. 我花了一些时间,为您准备了一个可能的解决方案。 Hope it helps. 希望能帮助到你。
jsFiddle Code To Play With jsFiddle代码一起玩
var boxcnt = 0; $(document).ready(function(){ $('#myForm').submit(function(evnt){ evnt.preventDefault(); //suppress submitting form (for demo) var chk = $('#myForm').serialize(); alert(chk); }); $('#myForm input[type=checkbox]').click(function(){ if ( $(this).is(':checked') ){ //alert('checking'); boxcnt++; if ( boxcnt > 3 ){ alert('Max 3 checked'); $(this).attr('checked', false); boxcnt--; } }else{ //alert('unchecking'); boxcnt--; } }); }); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="myForm" action="submitTo.php" method="get"> <input id="cb_1" name="cb_1" type="checkbox" /> Test 1<br> <input id="cb_2" name="cb_2" type="checkbox" /> Test 2<br> <input id="cb_3" name="cb_3" type="checkbox" /> Test 3<br> <input id="cb_4" name="cb_4" type="checkbox" /> Test 4<br> <input id="cb_5" name="cb_5" type="checkbox" /> Test 5<br> <input type="submit" value="Go" /> </form>
Try this: 尝试这个:
<?php
$username = "root";
$password = "";
$hostname = "localhost";
$dbname = "major_degrees";
$str='';
// Create connection
$conn = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT degree_name FROM majors";
$result = $conn->query($sql);
$out = '';
$cnt = 0;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$cnt++;
$out .= '<input id="cb_' .$cnt. '" class="someclass" type="checkbox" />' .$row['degree_name']. '<br/>';
}
echo $out;
}
$conn->close();
?>
When ready to get the checked values and send them to another page: 准备好获取检查的值并将其发送到另一页时:
$(document).ready(function(){ $('#myForm').submit(function(evnt){ evnt.preventDefault(); //suppress submitting form (for demo) var chk = $('#myForm').serialize(); alert(chk); }); }); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="myForm" action="submitTo.php" method="get"> <input id="cb_1" name="cb_1" type="checkbox" /> Test 1<br> <input id="cb_2" name="cb_2" type="checkbox" /> Test 2<br> <input id="cb_3" name="cb_3" type="checkbox" /> Test 3<br> <input id="cb_4" name="cb_4" type="checkbox" /> Test 4<br> <input type="submit" value="Go" /> </form>
You must output the appropriate markup with your php code. 您必须使用您的php代码输出适当的标记。
while($row = $result->fetch_assoc()) {
echo "<input type='checkbox' value='$row['degree_name']'> $row['degree_name']";
echo "<br/>";
}
This must do the trick. 这一定能解决问题。
However, you'll be needing a form with a submit button which can be used to pass this data back to the server. 但是,您将需要一个带有提交按钮的表单,该表单可用于将该数据传递回服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.