Dynamic form met AJAX en add row functie (Werkt niet zoals ik wil)
Momenteel ben ik een feedback systeem aan het maken en nu was ik ergens mee bezig waar ik niet uit kom.
Ik heb een script waarbij in de eerste <select> ik een keuze kan maken uit een categorie, vervolgens in de volgende <select> kan er een vraag worden geselecteerd.
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
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
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'haal_vragen.php',
data: {
get_option:val
},
success: function (response) {
document.getElementById("new_select").innerHTML=response;
}
});
}
</script>
<td><select onchange="fetch_select(this.value);">
<option>Selecteer Categorie</option>
<?php
$select=mysqli_query($db, "select Categorie from Vragen group by Categorie");
while($row=mysqli_fetch_array($select))
{
echo "<option>".$row['Categorie']."</option>";
}
?>
</select></td>
<td><select id="new_select" name="Vraag[]">
</select></td>
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'haal_vragen.php',
data: {
get_option:val
},
success: function (response) {
document.getElementById("new_select").innerHTML=response;
}
});
}
</script>
<td><select onchange="fetch_select(this.value);">
<option>Selecteer Categorie</option>
<?php
$select=mysqli_query($db, "select Categorie from Vragen group by Categorie");
while($row=mysqli_fetch_array($select))
{
echo "<option>".$row['Categorie']."</option>";
}
?>
</select></td>
<td><select id="new_select" name="Vraag[]">
</select></td>
Daarbij de AJAX haal_vragen.php
Code (php)
Dit werkt allemaal perfect, maar nu komt het ik wil dit ook werkend hebben met een addrow functie.
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
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
<script type="text/javascript" src="includes/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function add_row()
{
$rowno=$("#vragenlijst tr").length;
$rowno=$rowno+1;
$("#vragenlijst tr:last").after("<tr id='row"+$rowno+"'><td><select onchange='fetch_select(this.value);' name='Competentie[]'><option>Selecteer competentie</option><option>Interpersoonlijk</option><option>Pedagogisch</option><option>Vakdidactisch</option></select></td><td><input type='text' name='Vraag[]' placeholder='Enter Age'></td><td><input type='text' name='Type[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
<table id="vragenlijst">
<tr id="row1">
<td><select onchange="fetch_select(this.value);">
<option>Selecteer categorie/option>
<?php
$select=mysqli_query($db, "select Categorie from Vragen group by Categorie");
while($row=mysqli_fetch_array($select))
{
echo "<option>".$row['Categorie']."</option>";
}
?>
</select></td>
<td><select id="new_select" name="Vraag[]">
</select></td>
<td><input type="text" name="Type[]"></td>
</tr>
</table>
<input type="button" onclick="add_row();" value="ADD ROW">
<script type="text/javascript">
function add_row()
{
$rowno=$("#vragenlijst tr").length;
$rowno=$rowno+1;
$("#vragenlijst tr:last").after("<tr id='row"+$rowno+"'><td><select onchange='fetch_select(this.value);' name='Competentie[]'><option>Selecteer competentie</option><option>Interpersoonlijk</option><option>Pedagogisch</option><option>Vakdidactisch</option></select></td><td><input type='text' name='Vraag[]' placeholder='Enter Age'></td><td><input type='text' name='Type[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
<table id="vragenlijst">
<tr id="row1">
<td><select onchange="fetch_select(this.value);">
<option>Selecteer categorie/option>
<?php
$select=mysqli_query($db, "select Categorie from Vragen group by Categorie");
while($row=mysqli_fetch_array($select))
{
echo "<option>".$row['Categorie']."</option>";
}
?>
</select></td>
<td><select id="new_select" name="Vraag[]">
</select></td>
<td><input type="text" name="Type[]"></td>
</tr>
</table>
<input type="button" onclick="add_row();" value="ADD ROW">
De script op zichzelf werkt wel. Nu zijn er twee dingen als ik de add row combineer met de select categorie script:
Code (php)
In de het volgende te combineren
Code (php)
1
2
2
$("#vragenlijst tr:last").after("<tr id='row"+$rowno+"'><td><select onchange='fetch_select(this.value);' name='Competentie[]'><option>Selecteer competentie</option><option>Interpersoonlijk</option><option>Pedagogisch</option><option>Vakdidactisch</option></select></td><td><input type='text' name='Vraag[]' placeholder='Enter Age'></td><td><input type='text' name='Type[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
}
Dan werkt de add row functie niet meer ik denk vanwege de php die erin zit verwerkt.
En de laatste als ik van de eerste een gewone <select> maakt dan pakt de add row hem wel, maar dan past hij alleen de eerste rij aan en uiteraard met hetzelfde probleem als die hierboven lukt dat niet met combineren.
Iemand hier een tip of een script voor? Dan kan ik weer verder, kom er niet uit.
Mijn doel: In de eerste <select> wordt een categorie geselecteerd, in de tweede select worden de vragen uit de database gehaald die bij de categorie horen en dan als laatste dit moet werken met de add row functie =D
Met vriendelijke groet,
Mark
Gewijzigd op 03/01/2017 01:25:02 door Mark van den Brink
PHP draait op de server, javascript in de browser. Dit gebeurt er dus als iemand een PHP pagina opvraagt in de browser:
- Browser verstuurd verzoek naar webserver
- webserver ziet dat dit verzoek een PHP bestand betreft en start het PHP script
- Het PHP script genereert (in dit geval) een HTML pagina (inclusief alle vragen in de tabel)
- De output of de HTML wordt teruggestuurd naar de browser. (PHP script is beëindigd.)
- De browser leest de HTML en haalt overige benodigde bestanden op waaronder afbeeldingen, css- en javascript bestanden.
- De browser verwerkt de HTML, CSS en toont de pagina
- Het javascript wordt gestart.
Ik neem aan dat de nieuwe vraag die toegevoegd kan worden ook in de database moet komen. Je hebt dan een nieuwe AJAX request nodig die de nieuwe vraag aanlevert bij de webserver. De webserver moet de vraag dan opslaan in de database.
Dan moet de nieuwe vraag nog toegevoegd worden aan de <table>. Dat doe je dan weer met javascript.
Toevoeging op 03/01/2017 09:45:08:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table id="vragen">
<tbody>
<tr>
<td>Eerste vraag</td>
</tr>
<tr>
<td>Tweede vraag</td>
</tr>
<tr>
<td>Derde vraag</td>
</tr>
</tbody>
</table>
<form id="new_question_form" action="" method="post">
<input type="text" placeholder="Nieuwe vraag" name="new_question">
<button>Toevoegen</button>
</form>
<tbody>
<tr>
<td>Eerste vraag</td>
</tr>
<tr>
<td>Tweede vraag</td>
</tr>
<tr>
<td>Derde vraag</td>
</tr>
</tbody>
</table>
<form id="new_question_form" action="" method="post">
<input type="text" placeholder="Nieuwe vraag" name="new_question">
<button>Toevoegen</button>
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( document ).ready(function() {
// snelheidswinst voor de <input> == slechts 1x zoeken in de DOM
var newQuestion = $('input[name=new_question]');
// als er op toevoegen geklikt wordt
$( "#new_question_form" ).submit(function( event ) {
// HIER JE AJAX REQUEST
// $.post('server.php', $('#new_question_form').serialize());
// rij toevoegen onderaan in de tabel
$('#vragen tr:last').after('<tr><td>'+newQuestion.val()+'</td></tr>');
// vraag verwijderen uit de <input>
newQuestion.val('');
event.preventDefault();
});
});
// snelheidswinst voor de <input> == slechts 1x zoeken in de DOM
var newQuestion = $('input[name=new_question]');
// als er op toevoegen geklikt wordt
$( "#new_question_form" ).submit(function( event ) {
// HIER JE AJAX REQUEST
// $.post('server.php', $('#new_question_form').serialize());
// rij toevoegen onderaan in de tabel
$('#vragen tr:last').after('<tr><td>'+newQuestion.val()+'</td></tr>');
// vraag verwijderen uit de <input>
newQuestion.val('');
event.preventDefault();
});
});
http://codepen.io/anon/pen/EZxKKr
Gewijzigd op 03/01/2017 09:18:26 door Frank Nietbelangrijk
En dat hij dan met AJAX direct in de DB wordt gezet en er onder wordt weergegeven.
Wat vindt jij van dit idee? (Zo heb ik niet het probleem van de <select> functie)
Bedankt voor het meedenken, ik ga hier zeker mee aan de slag!
Gewijzigd op 03/01/2017 09:58:03 door Mark van den Brink
