Checklist met "animated" checksign

Door Karel Bijvelds op 09-03-2017 12:10

3.178 views

Hallo allen,

Ik wil een checklist aanmaken met gegevens vanuit een database, checklist laten invullen en daarna de gegevens weer opnemen in de database. Dat aanmaken en opnemen in de database is geregeld.
Via de radio buttons krijg ik de juiste gegevens.
In bijgaand VOORBEELD wil ik echter de radio buttons vervangen door of CHECK (bij in) of CROSS (bij uit).
Dan, indien er op dit veld geklikt wordt, dit veld wijzigen in de andere waarde; dus indien de CHECK wordt weergegeven dan CROSS weergeven en bij CROSS dan CHECK weergeven;
Dus in de weergave uiteindelijk per nummer: nummer, titel, keuze
waarbij keuze of CROSS of CHECK is en bij klikken wisselt van weergave.
Het gaat dus om de code voor het wisselen van het "keuze-teken".

Iemand hiervoor een mooie oplossing?

<?php
CheckList();

function CheckList()
{
$cross = '<font size="5" color="red">&#10008</font>';
$check = '<font size="5" color="green">&#10004</font>';
$databasetabel = array("titel1", 3 => "titel3", "titel4");
echo '<table>';
echo '<form action="'.$_SERVER["PHP_SELF"].'" method="post" enctype="multipart/form-data">';
foreach ($databasetabel as $nummer => $titel):
echo "<tr>";
echo "<td>".$nummer."</td>";
echo "<td>".$titel."</td>";
echo "<td>".$check."</td>";
echo "<td>".$cross."</td>";
echo '<td>';
echo '<input type="radio" name="checknr'.$nummer.'" value="in">In';
echo '</td>';
echo '<td>';
echo '<input type="radio" name="checknr'.$nummer.'" value="uit">Uit';
echo "</td>";
echo "</tr>";
endforeach;
echo "<tr>";
echo '<td><input type="submit" name="execute" value="Verzenden"></td>';
echo "</tr>";
echo '</form>';
echo '</table>';

echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>

Karel Bijvelds

20-03-2017 14:16

Hallo Frank,

Dank voor je antwoord.
Zoals eerder gemeld had ik onderstaande oplossing.
In definitieve versie knutsel ik jouw class gegevens er nog in, is mooier. Ook de door jouw verfoeide <font> oplossing stop ik in een class.
Mijn "animatie" oplossing is via het "case" commando.
De databasedata bestaat uit meerdere regels en ik heb dus ook meerdere "hidden input" regels nodig.
Dit heb ik opgelost door $(".PostItems").append(PostItem); in class PostItems.
Deze constructie voegt bij elke klik een nieuw PostItem toe maar overschrijft een reeds bestaande met dezelfde naam.

Groeten

<?php
<head>
<style type="text/css">
.tdbutton {cursor: pointer;}
div.PostItems{}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.tdbutton').click(function() {
var check = String.fromCharCode(10004);
var cross = String.fromCharCode(10008);
var question = String.fromCharCode(10067);
var choice = String.fromCharCode(10071);
var choicecode = 0;
var color = "yellow";
var idvar = this.id;
switch (this.innerText)
{
case question:
choice = check;
color = "green";
choicecode = 1;
break;
case check:
choice = cross;
color = "red";
choicecode = 2;
break;
case cross:
choice = question;
color = "black";
choicecode = 3;
break;
default:
choice = question;
color = "yellow";
choicecode = 0;
};
$(this).html('<font size="5" color="'+color+'">'+choice+'</font>');
var PostItem = '<input type="hidden" name="'+this.id+'" value="'+choicecode+'">';
$(".PostItems").append(PostItem);
});
});
</script>
</head>

echo '<a id="checknr_'.$titel["nummer"].'" class="tdbutton"><font size="5" color="grey">&#10067</font></a>';

echo '<input type="submit" name="verwerken" value="Verzenden">';
echo '<div class="PostItems"></div>';
?>

Reageren

Inloggen om te reageren