Record per formulier
Het formulier bestaat uit checkboxes text input en een select option element.
Nu kunneen gebruikers op een knop ‘nog een formulier” klikken en er verschijnt
Het zelfde riedeltje.
De data opslaan gebeurt dmv een ajax call. De checkboxes worden als string opgelagen met tussen de waardes een komma.
Checkbox1, checkbox2, checkbox3 enz enz
Wat kan ik nu doen om dus van elk formulier 1 record te maken?
Gewijzigd op 11/11/2018 12:35:00 door - Ariën -
Quote:
De data opslaan gebeurt dmv een ajax call. De checkboxes worden als string opgelagen met tussen de waardes een komma.
Checkbox1, checkbox2, checkbox3 enz enz
Checkbox1, checkbox2, checkbox3 enz enz
Ouch, kun je niet beter een koppeltabel maken waarin je de aangevinkte waarden opslaat?
Quote:
Wat kan ik nu doen om dus van elk formulier 1 record te maken?
Je zult deze elementen op een of andere manier moeten groeperen zodat je deze als één geheel kunt behandelen. Bijvoorbeeld door ze in één div te plaatsen, inclusief een button. Als je op deze "submit" button drukt grabbel je alle elementen in deze div bij elkaar.
Hoe bedoel je tabellen koppelen?
Zou ik bijvoorbeeld een nummer meekunnen geven aan de formgroup en met een algemene submit alles oplsaan?
Ik wil straks ook nog ee datum kollom toevoegen zodat je daar op kunt filteren.
Het kan dus voorkomen dat in form1 checkbox1 en 3 selected zijn en in form 2 checkbox 1 en 2
Bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
tabel formulieren
-----------
id
en wat je hier verder wilt opslaan
tabel formulier_waarden
-----------------
formulier_id
waarde
-----------
id
en wat je hier verder wilt opslaan
tabel formulier_waarden
-----------------
formulier_id
waarde
In HTML heb je hier niet eens echte formulieren (dus <form>...</form> voor elk record) nodig omdat je toch niet van doen hebt met reguliere formulieren met een normale submit - je regelt immers de afhandeling via JavaScript/AJAX. Ik neem aan dat je jQuery o.i.d. gebruikt? Dat maakt de ontwikkeling van deze functionaliteit een stuk makkelijker (en meteen cross browser compatible). Het enige wat je in principe nodig hebt om een record toe te voegen is een pakketje HTML waar je de data uit kunt peuteren. En misschien is het ook een idee om in de HTML van een record wat reeds is toegevoegd deze te voorzien van een (insert) id ofzo, zodat je een andere AJAX-methode kunt aanroepen om een record bij te werken. En voor een delete button kun je dezelfde truuk uithalen. Zo heb je alle acties (toevoegen/wijzigen/verwijderen) ook meteen afgevangen.
Een wat late reactie maar heb de pagina anders ingedeeld.
Ik heb 1 form element waarin een groepje word toegevoegd als je op de button meer invoeren.
Er word meteen aan dit groepje een id toegevoegd
In dit groepje heb ik even 2 inputs gestopt
Per groepje zou ik dus 1 record willen hebben in de database.
Werk ik dan met jquery each loop? Met daarin een ajax call?
Of bedoel je met een insert id dat je op het moment van voeg toe klik mysql een lege ID terug geeft?
Gewijzigd op 01/11/2018 19:44:57 door Bryan De Baar
Het praat waarschijnlijk een stuk makkelijker als je een concreet voorbeeld hebt, en aan kunt geven wat precies de bedoeling is.
Hier de code wat ik nu heb
De html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-group">
<form id="form">
<table id="field-dynamic" class="field-dynamic">
<tbody>
<tr>
<th>Item</th>
<th>quantity</th>
<th>Remove</th>
</tr>
</tbody>
</table>
<input id="send" type="button" value="save">
</form>
</div>
<form id="form">
<table id="field-dynamic" class="field-dynamic">
<tbody>
<tr>
<th>Item</th>
<th>quantity</th>
<th>Remove</th>
</tr>
</tbody>
</table>
<input id="send" type="button" value="save">
</form>
</div>
Stukje Jquery
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
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
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$("#add").click(function(){
i++;
$("#field-dynamic").append('<tr id="row'+i+'"><td><input placeholder="Item name" name="itemname"/></td><td><input placeholder="Quantity" name="quantity"/></td><td><button class="remove-btn" id="'+i+'">-</button></td></tr>');
});
$(document).on('click', '.remove-btn', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#send").click(function(){
$.ajax({
url: "insert.php",
'data': $('#form').serialize(),
'success': function(data) {
$('#field-dynamic').html(data);
}
});
});
});
</script>
$(document).ready(function(){
var i = 0;
$("#add").click(function(){
i++;
$("#field-dynamic").append('<tr id="row'+i+'"><td><input placeholder="Item name" name="itemname"/></td><td><input placeholder="Quantity" name="quantity"/></td><td><button class="remove-btn" id="'+i+'">-</button></td></tr>');
});
$(document).on('click', '.remove-btn', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#send").click(function(){
$.ajax({
url: "insert.php",
'data': $('#form').serialize(),
'success': function(data) {
$('#field-dynamic').html(data);
}
});
});
});
</script>
Het is dus de bedoeling dat ik een record krijg in de database zoals hieronder
ID-ITEM-QUANTITY
1-Broek-2
2-Sjaal-4
3-Jas-1
Ook heb je op dit moment niet echt een id nodig (deze wordt nergens voor gebruikt?).
Om de elementen van een rij te serializen kun je zoiets doen:
Code (php)
1
$(this).parent().parent().find('input').serialize()
$(this) - als er op een save knop geklikt wordt
.parent() - de omvattende td
.parent() - de omvattende tr
.find('input') - filter input velden (anders blijft serialize() leeg :/)
.serialize() - om te serializen.
Of wellicht korter:
Code (php)
1
$(this).closest('tr').find('input').serialize()
Werkende test:
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
53
54
55
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
53
54
55
<!DOCTYPE html>
<html>
<head>
<title>jQuery form</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="myForm">
<table border="1">
<thead>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>actions</td>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
<button type="button" id="js-add">add</button>
<br>
<textarea id="dump"></textarea>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#js-add').click(function() {
var html =
'<tr>\
<td><input type="text" name="one" value=""></td>\
<td><input type="text" name="two" value=""></td>\
<td><input type="text" name="three" value=""></td>\
<td><button type="button" class="js-save">save</button><button type="button" class="js-remove">remove</button></td>\
</tr>';
$('#myForm table tbody').append(html);
});
$('#myForm tbody').on('click', 'button.js-save', function(e) {
e.preventDefault();
$('#dump').text($(this).closest('tr').find('input').serialize());
});
$('#myForm tbody').on('click', 'button.js-remove', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<title>jQuery form</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="myForm">
<table border="1">
<thead>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>actions</td>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
<button type="button" id="js-add">add</button>
<br>
<textarea id="dump"></textarea>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#js-add').click(function() {
var html =
'<tr>\
<td><input type="text" name="one" value=""></td>\
<td><input type="text" name="two" value=""></td>\
<td><input type="text" name="three" value=""></td>\
<td><button type="button" class="js-save">save</button><button type="button" class="js-remove">remove</button></td>\
</tr>';
$('#myForm table tbody').append(html);
});
$('#myForm tbody').on('click', 'button.js-save', function(e) {
e.preventDefault();
$('#dump').text($(this).closest('tr').find('input').serialize());
});
$('#myForm tbody').on('click', 'button.js-remove', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
});
//]]>
</script>
</body>
</html>
Gewijzigd op 02/11/2018 22:49:33 door Thomas van den Heuvel