I am creating a table of checkboxes, where the first column will contain checkboxes that can check / uncheck the current row.
This is my code so far, which is not working.
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function toggle(source, $id) {
checkboxes = document.getElementsByName($id);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<?php
echo "<table>";
for ($x = 0; $x < 3; $x++) {
$id = $x;
echo "
<tr>";
echo "
<td>";
echo '<input type="checkbox" onClick="toggle(this, $id)"/> Toggle All';
echo '
</td>
';
for ($y = 0; $y < 7; $y++){
echo "
<td>";
echo '<input type="checkbox" name=$id value="bar1"> Bar 1<br/>';
echo '
</td>
';
}
echo "
</tr>
";
}
echo "</table>";
?>
</body>
</html>
I am aware that the code might contain several errors and am trying to find them. In the meantime, i would appreciate any suggestions.
try this code
<!DOCTYPE html>
<html>
<head>
// your java script code for toggle is working only change is used id not $id.
<script language="JavaScript">
function toggle(source, id) {
checkboxes = document.getElementsByName(id);
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<?php
echo "<table>";
for ($x = 0; $x < 3; $x++) {
$id = $x;
echo "<tr>";
echo "<td>";
echo '<input type="checkbox" onClick="toggle(this, '.$id.')" /> Toggle All';
// change here onClick="toggle(this, $id)" to onClick="toggle(this, '.$id.')"
echo '</td>';
for ($y = 0; $y < 7; $y++){
echo "<td>";
echo '<input type="checkbox" name="'.$id.'" value="bar1"> Bar 1<br/>';
// also change the name=$id to name="'.$id.'"
echo '</td>';
}
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
I am not sure about your javascript, but it for sure needs the change I made to it.
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
// change to-> Id from-> $id
function toggle(source, Id) {
checkboxes = document.getElementsByName(Id);
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<table>
<?php
for ($x = 0; $x < 3; $x++) {
$id = $x; ?>
<tr>
<td>
<!--$id won't work in single quotes like that so you have to break it out.
See comment below, but you may need to base the toggle on the class-->
<input type="checkbox" onClick="toggle(this, '<?php echo $id; ?>')" /> Toggle All
</td><?php
for ($y = 0; $y < 7; $y++){ ?>
<td>
<!-- You will likely need to array this name, because if the
names are all the same, it will only take one value -->
<input type="checkbox" name="<?php echo $id; ?>[]" class="sub-<?php echo $id; ?>" value="bar1"> Bar 1<br/>
</td><?php } ?>
</tr><?php
} ?>
</table>
Related
I wanted to create a multiplication table with a custom function and also get the number of rows and columns from the user, and I want if each row was an even number then its field would be red (background) and if it was odd number it would have a green background and i also write some codes but i'm not sure if it's true or not:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form method="post">
<input type="number" name="rows" placeholder="Rows">
<input type="number" name="columns" placeholder="Columns">
<button type="submit" name="button">
Create
</button>
</form>
<table border="1px">
<?php
if (isset($_POST["button"])) {
$userRows = $_POST["rows"];
$userColumns = $_POST["columns"];
function multiplicationTable($rows, $columns)
{
$zarb = $rows * $columns;
return $zarb;
}
$x = 1;
while ($x <= $userRows) {
echo "<tr>";
$y = 1;
while ($y <= $userColumns) {
if ($x % 2 == 0) {
echo "<td style='background-color: red;'>" . multiplicationTable($x, $y) . "</td>";
} else {
echo "<td style='background-color: green;'>" . multiplicationTable($x, $y) . "</td>";
}
$y++;
}
$x++;
echo "</tr>";
}
}
?>
</table>
</body>
</html>
How about changing the while loops to this:
while ($x <= $userRows) {
echo "<tr>";
$y = 1;
while ($y <= $userColumns) {
$val = multiplicationTable($x, $y);
if ($val % 2 == 0) {
echo "<td style='background-color: red;'>" . $val . "</td>";
} else {
echo "<td style='background-color: green;'>" . $val . "</td>";
}
$y++;
}
$x++;
echo "</tr>";
}
Well, your code looks good. Click here to see how it looks like...
the final result is in this link, and even if some of the numbers are even, they're still displayed in green and i don't know what should i do
https://imgur.com/D1Sweee
What i currently have
what im trying to make
I need it when i throw for example 2 and 3 it goes down 2 and marks it from left to right using black borders, and then it goes 3 to the right and mark from top to bottem using black borders, at the point they cross i need it to be a red border.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="wrapper">
<?php
if(isset($_POST['submit'])) {
$dice1 = mt_rand(1,6);
$dice2 = mt_rand(1,6);
echo "<table class='table'>";
for ($i=0; $i < 6 ; $i++) {
echo "<tr>";
for ($j=0; $j < 6 ; $j++) {
echo "<td> <img class='icon cell color".mt_rand(1,4)."' src='img/icon".mt_rand(1,4).".svg ' </td>";
}
echo "</tr>";
}
echo "</table>";
echo "<img class='dice1' src='img/dice".$dice1.".gif'>";
echo "<img class='dice2' src='img/dice".$dice2.".gif'>";
}
?>
<form method="get" action="/php1/eindopdracht/cal.php">
<button type="submit" class="button1">renew</button>
</form>
<form method="POST">
<button type='submit' class='button2' name='submit' value='submit'>throw</button>
</form>
</div>
</body>
</html>```
You can check if dice1 value is equal to $i you can add a certain class that makes the color black. Same if dice2 value is equal to $i. If then dice1 is equal to $i and dice2 value is equal to $j choose a different class to make the border red.
function chooseBorder($i,$j,$dice1,$dice2) {
$class = "";
if ($dice1 == $i && $dice2 == $j) {
$class = "border-red";
return $class;
}
if ($dice1 == $i || $dice2 == $j) {
$class = "border-black";
return $class;
}
return $class;
}
for ($i=0; $i < 6 ; $i++) {
echo "<tr>";
for ($j=0; $j < 6 ; $j++) {
$class = chooseBorder($i,$j,$dice1,$dice2);
echo "<td> <img class='icon cell color".mt_rand(1,4). " " . $class . "' src='img/icon".mt_rand(1,4).".svg ' </td>";
}
echo "</tr>";
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="wrapper">
<?php
if(isset($_POST['submit'])) {
$dice1 = mt_rand(1,6);
$dice2 = mt_rand(1,6);
function chooseBorder($i,$j,$dice1,$dice2) {
$class = "";
if ($dice1 == $i && $dice2 == $j) {
$class = "border-red";
return $class;
}
if ($dice1 == $i || $dice2 == $j) {
$class = "border-black";
return $class;
}
return $class;
}
for ($i=1; $i < 7; $i++) {
echo "<tr>";
for ($j=1; $j < 7 ; $j++) {
$class = chooseBorder($i,$j,$dice1,$dice2);
echo "<td> <img class='icon cell color".mt_rand(1,4). " " . $class . "' src='img/icon".mt_rand(1,4).".svg ' </td>";
}
echo "</tr>";
}
echo "</table>";
echo "<img class='dice1' src='img/dice".$dice1.".gif'>";
echo "<img class='dice2' src='img/dice".$dice2.".gif'>";
}
?>
<form method="get" action="/php1/eindopdracht/cal.php">
<button type="submit" class="button1">renew</button>
</form>
<form method="POST">
<button type='submit' class='button2' name='submit' value='submit'>throw</button>
</form>
</div>
</body>
</html>
I have the following code in my program that works perfectly with the WAMP server. But I had to change the WAMP server for XAMPP and I don’t know why it doesn’t execute some parts of the code. There’s also no error message.
The problem is that in the table code <table>, it doesn’t show after the third <tr> or when the 'Toggle' starts. It also doesn’t show the submit button.
I don’t understand why everything works correctly in WAMP but not in XAMPP. Can someone help me see why it fails? Thank you
Project.php
<?php
include_once("Conexion.php");
include_once("functions.php");
ob_start();
$_SESSION['ex_time'] = date('Y-m-d H:i:s');
$list_ex = array();
$result = doSearch($conn);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styleProject.css">
</head>
<body>
<div id="centered_A">
<form action='' method='post'>
<table id="exercises">
<tr>
<th colspan="3"><h2>Exercises</h2></th>
</tr>
<tr>
<th><h3>Exercise_ID</h3></th>
<th><h3>Title</h3></th>
<th><h3>Difficulty
<form id="difficulty_form" method="get">
<select id="filter" name="filter" onchange="document.getElementById('difficulty_form').submit()">
<option value="All">Todas</option>
<?php
for ($i = 1; $i <= 5; $i++) {
$selected = '';
if (isset($_GET['filter']) && $_GET['filter'] == $i) {
$selected = ' selected';
}
echo "<option value=\"$i\"$selected>$i</option>\n";
}
?>
</select>
</form>
</h3></th>
</tr>
<?php
$order = 1;
$num_ex = 1;
while($row = $result->fetch_assoc())
{
array_push($list_ex, $row["exercise_id"]);
$sql_check_ex = "select * from answers a where a.student_id=".$_SESSION['user_id']." and a.exercise_id_fk=".$row["exercise_id"].";";
$result_check_ex = $conn->query($sql_check_ex);
?>
<tr>
<td><?php echo $num_ex; ?></td>
<!---Click Toggle Exercise-->
<td><a onclick="myFunction(<?php echo $row["exercise_id"] ?>)" role="button" class="btn" target="_blank" ><?php echo $row["title"]; ?></a>
</td>
<td><?php echo $row["difficulty"]; ?></td>
</tr>
<!--- Toggle --->
<tr id="toggle<?php echo $row["exercise_id"] ?>" style="display:none">
<td colspan="3">
<?php
$sql = "SELECT * FROM exercises WHERE exercise_id='".$row["exercise_id"]."'";
$result_ej = $conn->query($sql);
$row_ej = $result_ej->fetch_assoc();
?>
<p><?php $row["exercise_id"] ?> <?php echo $row["text"]?></p>
<br><!--- Radio Button --->
<?php
if ($row["type"] == 0) {
$ansarray = explode("\n", $row["image_path"]);
$randomans = [];
for($i=0; $i<count($ansarray); $i++) {
$a = array($i+1, $ansarray[$i]);
array_push($randomans, $a);
}
shuffle($randomans);
for($i=0; $i<count($randomans); $i++) {
echo "<div class=\"radio\" style=\"text-align:left; display:flex; vertical-align: baseline;\">";
echo "<input type=\"radio\" style=\"margin-top: 8px; cursor:pointer;\" name=\"choice".$row["exercise_id"]."\" value= \"".$randomans[$i][0]."\" />".$randomans[$i][1]."<br>";
echo "</div>";
}
echo "<input type=\"text\" name=\"choicetext".$row["exercise_id"]."\" value='multi' style=\"display:none;\">";
} else {
?>
<input type="radio" style="margin-top: 8px" name="choice<?php echo $row["exercise_id"] ?>" value= "0" checked="checked" style="display:none;" />
<?php
}
?>
<br>
<!--- Select level --->
<p2>Select difficulty level:</p2>
<select name="choose<?php echo $row["exercise_id"] ?>" id="choose<?php echo $row["exercise_id"] ?>">>
<option value="1" <?php if($row["difficulty"]=="1") { echo "selected"; } ?> >1</option>
<option value="2" <?php if($row["difficulty"]=="2") { echo "selected"; } ?> >2</option>
</select>
</td>
</tr><!---Finish Toggle --->
<?php
$order++;
$num_ex++;
}
?>
</table>
<br><!---Submit Button-->
<input class="buttonSubmit" type="submit" name="submit_proj_ex" value="Submit">
</form>
<script>
function myFunction(ejer_id) {
var x = document.getElementById("toggle" + ejer_id);
if (x.style.display === "none") {
x.style.display = "table-row";
} else {
x.style.display = "none";
}
}
</script>
</div>
</body>
<?php
if (isset($_POST['submit_proj_ex'])) {
include_once("store_answers.php");
header('location: Results.php');
}
?>
</html>
functions.php
<?php
function doSearch($conn, $fields = "*") {
$sql = "SELECT $fields FROM exercises, ex_tag, tags where exercise_id = exercise_id_fk and tag_id = tag_id_fk";
if (isset($_GET['filter']) && $_GET['filter'] !== 'All') {
$filter = (int) trim($_GET['filter']);
$sql .= " and exercises.difficulty = '$filter'";
}
if (!empty($_SESSION['tags_array'])) {
$sql .= " and (";
foreach ($_SESSION['tags_array'] as $tagId)
$sql .= 'tag_id = ' . $tagId . ' or ';
$sql .= "tag_id = -1)";
}
$sql .= ' group by exercise_id_fk';
return $conn->query($sql);
}
?>
Run phpinfo() in both WAMP and XAMP. I'm not certain what your issue is, but if it works in one and not the other, perhaps they are using different versions of php. If this is the case, you will need to use the same version of php in your XAMP as you were using in WAMP, or go through your code and try to figure out how to convert your code, such that it works correctly with the version on your XAMP. The former is probably the path of least resistance.
I am wanting to use 8 images from my database and load them into a HTML Table. I would like to display 4 images per table row, but however when i run my code below, i seem to get all images in one table row. Any help would be great. Thank you in advance.
$count = $get->rowCount();
if ($count > 0)
{
echo '<table id="" class="uiGrid _51mz _1m6c" cellpadding="2" cellspacing="0">';
$i = 0;
while ($r = $get->fetch(\PDO::FETCH_OBJ))
{
$globals = new \Libraries\Helpers\Views\Globals;
if ($i == 0)
{
echo '<tr class="_51mx">';
}
echo '
<td class="_51m-">
<a href="/e/a/'.$r->data_id.'">
<div class="uiScaledImageContainer _f-u2" style="width:74px;height:74px;">
<img class="scaledImageFitWidth img" src="https://gstatic.acfee.org/akamaihd/i/'.$globals->data_image_name($r->data_id).'">
<div class="_3s6x">
<div class="_50f3"></div>
</div>
</div>
</a>
</td>
';
if ($i > 4)
{
$i = 0;
echo '</tr>';
};
$i++;
echo '
<script type="text/javascript">
$("#favs-preloader").hide();
</script>
';
}
echo '</table>';
put this code directly it will works...
echo '<table id="" class="uiGrid _51mz _1m6c" cellpadding="2" cellspacing="0">';
$i = 0;
while ($r = $get->fetch(\PDO::FETCH_OBJ))
{
$globals = new \Libraries\Helpers\Views\Globals;
$i++;
if ($i == 1)
{
echo '<tr class="_51mx">';
}
echo '
<td class="_51m-">
<a href="/e/a/'.$r->data_id.'">
<div class="uiScaledImageContainer _f-u2" style="width:74px;height:74px;">
<img class="scaledImageFitWidth img" src="https://gstatic.acfee.org/akamaihd/i/'.$globals->data_image_name($r->data_id).'">
<div class="_3s6x">
<div class="_50f3"></div>
</div>
</div>
</a>
</td>
';
if ($i >= 4)
{
echo '</tr>';
$i = 0;
};
echo '
<script type="text/javascript">
$("#favs-preloader").hide();
</script>
';
}
echo '</table>';
In your current code, you're verifying if the $i variable is == 0 in order to add a row. But you're always increasing it's value at the end, even after you set it to zero in the if($i > 4)
Change these lines
if ($i > 4)
{
$i = 0;
echo '</tr>';
};
$i++;
To this:
if ($i > 4)
{
$i = 0;
echo '</tr>';
}
else
$i++;
<!DOCTYPE html>
<html lang="en">
<head>
<h1>Table Generator</h1>
</head>
<body>
<center>Refresh</center>
<?php
$rows = (isset($_POST['rows']) ? $_POST['rows'] : null);
$cols = (isset($_POST['cols']) ? $_POST['cols'] : null);
$highlight = (isset($_POST['highlight']) ? $_POST['highlight'] : null);
if ($rows == "")
{
$rows = 10;
}
if ($cols == "")
{
$cols = 10;
}
if ($highlight == "")
{
$highlight = 5;
}
?>
<form method="post">
ROWS <input type="text" name="rows" value = "<?php echo $rows;?>" />
COLUMNS <input type="text" name="cols" value = "<?php echo $cols;?>" />
HIGHLIGHT <input type = "text" name = "highlight" value = "<?php echo $highlight;?>" /><br>
<input type="submit" value="Generate">
</form>
<?php
if(isset($_POST['rows']))
{
$randnumber = rand(0,100);
$rows = $_POST['rows'];
$cols = $_POST['cols'];
$highlight = $_POST['highlight'];
echo '<table border="1" align = "center">';
if (is_numeric($rows) and is_numeric($cols) and is_numeric($highlight))
{
if ($randnumber % 2 == 0)
{
echo '<center>The first number is <div class = "red">even</div></center>';
}
else
{
echo '<center>The first number is <div class = "green">odd</div></center>';
}
for($row = 1; $row <= $rows; $row++)
{
echo '<tr style = "background-color:green">';
for($col = 1; $col <= $cols; $col++)
{
if ($randnumber % $highlight == 0)
{
echo '<td style = "background-color: red">';
echo $randnumber;
$randnumber++;
echo '</td>';
}
else
{
echo '<td>';
echo $randnumber;
$randnumber++;
echo '</td>';
}
}
echo '</tr>';
}
echo '</table>';
}
else
{
echo "<center>Rows / Columns / Highlight must ALL be INTEGER values. Re-enter correct value(s).</center>";
}
echo '<pre><center>';
print_r($_POST);
echo '</center></pre>';
}
?>
<style type ="text/css">
h1 {
color: grey;
text-align:center;
}
form {
text-align: center;
padding-bottom: 20px;
}
a:link {
text-decoration: none;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</body>
</html>
So. I have this PHP code to generate a table based off the user's input and I recently ran into a problem I cant figure out how to fix.
It was working perfectly fine but now whenever I use the Refresh link it resets the entire page to default (i.e. default textbox values instead of keeping the current ones, removing the table).
So, I have 2 questions. How would I keep the data on refresh (with $_POST being used) and how to display the table with the default values when the page first loads.
Refresh
Clicking it will trigger browser's reload mechanism and you'll be asked to resubmit the form action, it will allow you to keep POST data.
You need to re-create the post if you want to keep the parameters. Can be done pretty eaily by looping thru the array.
<form method='POST' id='refresh' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
<?php foreach($_POST as $k=>$v): ?>
<input type='hidden' name='<?php echo $k; ?>' value='<?php echo $v; ?>' />
<?php endforeach; ?>
<a href='#' onclick='document.getElementById("refresh").submit(); return false;'>refresh</a>
</form>
Note: This is a little longer than the other answer, but will not prompt to resend post data.