Checklist met "animated" checksign
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
CheckList();
function CheckList()
{
$cross = '<font size="5" color="red">✘</font>';
$check = '<font size="5" color="green">✔</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>';
}
?>
CheckList();
function CheckList()
{
$cross = '<font size="5" color="red">✘</font>';
$check = '<font size="5" color="green">✔</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>';
}
?>
Nog een poging!
Dagen erover gedaan om de eerste opzet te verkrijgen.
Weer dagen er over gedaan om onderstaand script in elkaar te knutselen (geheel zonder kennis van JavaScript, maar googlen en voorbeelden interpreteren).
Nu heb ik echt hulp nodig.
Klopt hieronder iets van?
Hoe krijg ik het aan de praat?
bvd hartelijken dank
- button(s) klikken
- button gegevens naar flipchoice
- in flipchoice button waarde wijzigen
button waarde opnieuw displayen
aanmaak <input hidden> om door te sturen naar $_POST
- verzenden klikken voor verwerken form
Code (php)
1
2
2
<?php
?>
?>
<head>
<style type="text/css">
td.tdbutton
{
background: transparent;
border: 3px solid gray;
border-width: thin medium medium thin;
border-color: gray silver silver gray;
border-style: solid outset outset solid;
text-decoration: none;
font-weight: bold;
line-height: 1;
padding: 0 .5em;
color: blue;
text-align: center;
cursor: pointer;
}
td.tdbutton:hover
{
border-style: inset solid solid inset;
border-width: medium thin thin medium;
border-color: silver silver silver silver;
background: green;
border-color: red;
color: red;
}
</style>
<script type="text/javascript">
var question = "?";
var check = "✔";
var cross = "✘";
var actueel = 0;
var choice = "default";
function flipchoice(clicked_id)
{
alert("Button clicked, id "+this.id+", text"+this.innerHTML); //debugging
switch (this.innerHTML)
{
case question:
choice = check;
gekozen = 0;
break;
case check:
choice = cross;
gekozen = 1;
break;
case cross:
choice = question;
gekozen = 2;
break;
default:
choice = question;
}
document.getElementById(clicked_id).innerHTML = choice;
document.write(<INPUT TYPE="hidden" NAME="clicked_id" VALUE="gekozen"';);
}
</script>
</head>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
CheckList();
function CheckList()
{
$question = '<font size="5" color="black">?</font>';
$check = '<font size="5" color="green">✔</font>';
$cross = '<font size="5" color="red">✘</font>';
$initial = '<font size="5" color="lightgrey">?</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 class='tdbutton'>".
'<a id="checknr_'.$nummer.'" onclick=flipchoice(this.id);>'.$initial.'</a>'.
"</td>";
echo "</tr>";
endforeach;
echo "<tr>";
echo '<td><input type="submit" name="execute" value="Verzenden"></td>';
echo "</tr>";
echo '</form>';
echo '</table>';
echo '<pre>'; // debugging
echo '<br><b>$_POST:</b>';
print_r($_POST);
echo '<br><b>get_defined_vars:</b>';
print_r(get_defined_vars());
echo '</pre>';
}
?>
CheckList();
function CheckList()
{
$question = '<font size="5" color="black">?</font>';
$check = '<font size="5" color="green">✔</font>';
$cross = '<font size="5" color="red">✘</font>';
$initial = '<font size="5" color="lightgrey">?</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 class='tdbutton'>".
'<a id="checknr_'.$nummer.'" onclick=flipchoice(this.id);>'.$initial.'</a>'.
"</td>";
echo "</tr>";
endforeach;
echo "<tr>";
echo '<td><input type="submit" name="execute" value="Verzenden"></td>';
echo "</tr>";
echo '</form>';
echo '</table>';
echo '<pre>'; // debugging
echo '<br><b>$_POST:</b>';
print_r($_POST);
echo '<br><b>get_defined_vars:</b>';
print_r(get_defined_vars());
echo '</pre>';
}
?>
Begin daar eens, mogelijk kom je dan een stapje verder.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<form action method="post">
<label class="cb checked">
<input type="checkbox" name="chk1" checked> Checkbox 1
</label>
<br>
<label class="cb">
<input type="checkbox" name="chk2"> Checkbox 2
</label>
<br>
<button>Submit</button>
</form>
<label class="cb checked">
<input type="checkbox" name="chk1" checked> Checkbox 1
</label>
<br>
<label class="cb">
<input type="checkbox" name="chk2"> Checkbox 2
</label>
<br>
<button>Submit</button>
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.cb input {
display: none;
}
label.cb:hover {
cursor: pointer;
}
label.cb:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f00d";
margin-right: 5px;
color: red;
font-size:20px;
}
label.checked:before {
content: "\f00c";
margin-right: 1px;
color: green;
}
display: none;
}
label.cb:hover {
cursor: pointer;
}
label.cb:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f00d";
margin-right: 5px;
color: red;
font-size:20px;
}
label.checked:before {
content: "\f00c";
margin-right: 1px;
color: green;
}
Code (php)
1
2
3
4
5
2
3
4
5
$(function() {
$( ".cb" ).change(function(e) {
$(this).toggleClass('checked');
});
});
$( ".cb" ).change(function(e) {
$(this).toggleClass('checked');
});
});
Gewijzigd op 13/03/2017 00:00:40 door Frank Nietbelangrijk
@Frank Nietbelangrijk: Ik ga die richting in met mijn minieme JavaScript/jQuery kennis. In je voorbeeld zie ik dat het mogelijk moet zijn. Dat worden weer dagen puzzelen (en jQuery/Javascript uitleg zoeken).
Alvast dank voor jullie reactie.
Het is geen hocus spocus hoor.
Ik gebruik hiervoor jquery en Fontawesome. Jquery is een javascript bibliotheek.
Fontawesome voorziet jou van een leuke icons: http://fontawesome.io/icons/
Je moet daarom deze bestanden in je html invoegen:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Ik ben vergevorderd dankzij de aanwijzingen hier.
Enkele, voor mij, onbegrijpelijke dingen heb ik nog in onderstaand script.
De alert regels heb ik aangebracht voor debugging.
Alvast groten dank!
-1) De this.id waarde komt niet in de aangeroepen functie $('.tdbutton').click(function(), this.innerText is wel aanwezig.
-2) De functie $("#PostItems").append() werkt niet. Deze is bedoeld om de <input type="hidden"> toe te voegen bij elke wijziging.
Gevonden op: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append_ref
<html>
<head>
<style type="text/css">
td.tdbutton
{
cursor: pointer;
}
</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 question = String.fromCharCode(63);
var check = String.fromCharCode(10004);
var cross = String.fromCharCode(10008);
var choice = String.fromCharCode(10071);
var choicecode = 0;
var color = "yellow";
var idvar = this.id;
alert("tdButton clicked (A), id: "+this.id+", innerText: "+this.innerText+", innerHTML: "+this.innerHTML+", idvar: "+idvar+", color: "+color+", question: "+question+", choice: "+choice+", choicecode: "+choicecode);
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>');
alert("tdButton clicked (A), id: "+this.id+", innerText: "+this.innerText+", innerHTML: "+this.innerHTML+", idvar: "+idvar+", color: "+color+", question: "+question+", choice: "+choice+", choicecode: "+choicecode);
var PostItem = '<input type="hidden" name="'+this.id+'" value="'+choicecode+'"';
alert(PostItem);
$("#PostItems").append('<input type="hidden" name="'+this.id+'" value="'+choicecode+'"');
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<table>
<tr>
<td>1</td>
<td>titel1</td>
<td class='tdbutton'>
<a id="checknr1"><font size="5" color="lightgrey">?</font></a>
</td>
</tr>
<tr>
<td>3</td>
<td>titel3</td>
<td class='tdbutton'>
<a id="checknr3"><font size="5" color="lightgrey">✔</font></a>
</td>
</tr>
<tr>
<td>4</td>
<td>titel4</td>
<td class='tdbutton'>
<a id="checknr4"><font size="5" color="lightgrey">✘</font></a>
</td>
</tr>
</table>
<div id="PostItems">
<input type="hidden" name="check0" value="0">
</div>
<input type="submit" name="execute" value="Verzenden">
</form>
</body>
</html>
Toevoeging op 18/03/2017 01:20:53:
-2) Opgelost door class div.PostItems{}, in body <div class="PostItems"> en groter dan teken toegevoegd in
$("#PostItems").append('<input type="hidden" name="'+this.id+'" value="'+choicecode+'">');
Toevoeging op 18/03/2017 10:56:37:
-1) Opgelost door wijziging style: .tdbutton {cursor: pointer;} en <a id="checknr1" class='tdbutton'><font size="5" color="lightgrey">❓</font></a>
in plaats van <td class="tdbutton">
IK WEET ALLEEN NIET WAAROM DIT WEL WERKT!
Ook de oplossing van -2) heeft nog duistere kanten voor mij.
Iemand een logische verklaring voor me?
Zorg dus dat je (zoveel mogelijk) de elementen binnen je html met css class-en kunt stylen. Vervolgens kun je met jquery toggleClass, addClass en removeClass classes toevoegen aan of verwijderen van elementen.
Daarnaast kun je meerdere classes toevoegen aan een element door gewoon een spatie tussen de class-namen te zetten (bijv class="btn btn-warning btn-large")
Voorbeeld: http://codepen.io/anon/pen/MprEbe
Gewijzigd op 18/03/2017 20:23:46 door Frank Nietbelangrijk
Frank Nietbelangrijk op 18/03/2017 20:21:16:
Hallo Frank,
Dank voor je reactie, dit zal zeker meegenomen worden in de definitieve versie.
De focus lag op het oorspronkelijke probleem: Hoe krijg ik een lijst met de mogelijkheid om aan te vinken welke wel/niet akkoord/geen mening zijn, de resultaten beschikbaar maken voor PHP en deze vastleggen in een database.
De kernen van het probleem, "animated checksign" en "doorsturen naar PHP" werken.
In de definitieve versie zal er uiteraard geschaafd worden.
Groten dank.
Hallo Frank,
Dank voor je reactie, dit zal zeker meegenomen worden in de definitieve versie.
De focus lag op het oorspronkelijke probleem: Hoe krijg ik een lijst met de mogelijkheid om aan te vinken welke wel/niet akkoord/geen mening zijn, de resultaten beschikbaar maken voor PHP en deze vastleggen in een database.
De kernen van het probleem, "animated checksign" en "doorsturen naar PHP" werken.
In de definitieve versie zal er uiteraard geschaafd worden.
Groten dank.
1. php draait op de webserver en communiceert met de database
2. javascript html en css draaien in de browser op de computer van de gebruiker.
3. gegevens die dus ingevuld of aangevinkt worden door de gebruiker in zijn browser moeten daarna teruggestuurd worden naar de server. HTML formulieren kunnen hier goed voor gebruikt worden al zijn er ook andere mogelijkheden.
Voor hetgeen dat jij wil is een checkbox niet geschikt. Je wilt namelijk drie mogelijkheden: wel, niet en misschien zeg maar. een hidden input zou een oplossing kunnen zijn of een verborgen dropdown. Maar omdat een hidden field een standaard formulier veld is zou ik dat doen.
De vraag blijft hoe jij je animatie wilt weergeven. Daar ben je volgens mij niet erg duidelijk in. Daarom probeer ik het nog een keer:
http://codepen.io/anon/pen/MprEbe
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?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">❓</font></a>';
echo '<input type="submit" name="verwerken" value="Verzenden">';
echo '<div class="PostItems"></div>';
?>
<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">❓</font></a>';
echo '<input type="submit" name="verwerken" value="Verzenden">';
echo '<div class="PostItems"></div>';
?>