waarde listmenu in database vervangen
Pagina: « vorige 1 2 3 volgende »
Sietsko Bos op 23/04/2019 15:38:57:
Jelle DNW
Dat werkt inderdaad.
Heb je ook nog een oplossing om de id mee te sturen?
Dat werkt inderdaad.
Heb je ook nog een oplossing om de id mee te sturen?
Dat is het tweede deel van die $.post(). Je moet in je script even kijken wat je daar binnenkrijgt.
Het input-veld "id" bevat geen value-attribuut.
Code (php)
1
<input type="hidden" name="id" id="1"> <-- value="???" ontbreekt
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<form id="update_db" name="update_db" method="post">
<select id="selectBoxID">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="hidden" name="id" value="1" id="mijnID">
</form>
<select id="selectBoxID">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="hidden" name="id" value="1" id="mijnID">
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function() {
$('#selectBoxID').change(function() {
const selectValue = $(this).val();
const id = $('#mijnID').val();
// post to php script
$.post('insertdetailed.php', { selectValueBox: selectValue, id: id });
});
});
<script>
$(document).ready(function() {
$('#selectBoxID').change(function() {
const selectValue = $(this).val();
const id = $('#mijnID').val();
// post to php script
$.post('insertdetailed.php', { selectValueBox: selectValue, id: id });
});
});
<script>
Dank voor de code want hier kwam ik niet uit.
De anderen ook dank voor de hulp.
Was ik al mee bezig, ik ben niet zo goed met javascript maar hier heb ik veel aan.
Dank nogmaals :)
Toevoeging op 24/04/2019 08:00:39:
Jelle Dnw
Hoe zit het trouwens met meerdere listmenu's, als ik bijvoorbeeld 2 heb dan werkt het alleen bij de eerste.
Het tweede listmenu werkt dan niet, is hier ook een truukje voor zodat ik 2 of zelfs 20 op 1 pagina kan gebruiken?
Gewijzigd op 24/04/2019 08:11:43 door Sietsko Bos
Deze aanpak heeft ten minste twee voordelen: deze is schaalbaar, je kunt zoveel formulieren aanmaken als je wilt. Daarnaast hoef je als je van serialize() gebruik maakt enkel de formuliervelden toe te voegen die dan meteen opgepikt worden vanwege serialize(). Ook mag er variatie zijn in de samenstelling van de velden tussen de verschillende formulieren.
Gewijzigd op 24/04/2019 13:14:22 door Thomas van den Heuvel
In HTML is een ID uniek en mag deze maar een enkele keer gebruikt worden, en een class meerdere keren.
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
<form method="post">
<select class="ajax-select-save" data-target-id="1">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="2">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="3">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
<select class="ajax-select-save" data-target-id="1">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="2">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="3">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
// post to php script
$.post('insertdetailed.php', { value: value, id: id });
});
});
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
// post to php script
$.post('insertdetailed.php', { value: value, id: id });
});
});
<script>
Gewijzigd op 24/04/2019 15:20:05 door Jelle Dnw
Toevoeging op 24/04/2019 16:25:02:
Nog even een vraag over iets anders:
Ik heb het listmenu in een tabel staan en geef de td een kleur afhankelijk van de waarde in het listmenu (1 t/m 5). Omdat in eerste instantie de waarde uit de database komt kan ik de td background een kleur geven. Na een wijziging van het listmenu wordt de pagina niet opnieuw geladen dus wijzigt de td background ook niet van kleur. Is dit ook met javascript op te lossen? Hebben jullie enig idee?
Zo ziet een td eruit nu.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
// zet de achtergrondkleur voor de tabel
if ($aRow_score['score'] == 0) { $tabelcolor = '#ffffff'; }
elseif ($aRow_score['score'] == 1) { $tabelcolor = '#93050f'; }
elseif ($aRow_score['score'] == 2) { $tabelcolor = '#e22427'; }
elseif ($aRow_score['score'] == 3) { $tabelcolor = '#FFAD38'; }
elseif ($aRow_score['score'] == 4) { $tabelcolor = '#33CC33'; }
else { $tabelcolor = '#4983ff'; }
?>
// zet de achtergrondkleur voor de tabel
if ($aRow_score['score'] == 0) { $tabelcolor = '#ffffff'; }
elseif ($aRow_score['score'] == 1) { $tabelcolor = '#93050f'; }
elseif ($aRow_score['score'] == 2) { $tabelcolor = '#e22427'; }
elseif ($aRow_score['score'] == 3) { $tabelcolor = '#FFAD38'; }
elseif ($aRow_score['score'] == 4) { $tabelcolor = '#33CC33'; }
else { $tabelcolor = '#4983ff'; }
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<td width="2%" align="center" valign="middle" bgcolor="<?php echo $tabelcolor; ?>">
<select class="ajax-select-save" data-target-id="700">
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<select class="ajax-select-save" data-target-id="700">
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
Gewijzigd op 24/04/2019 18:27:40 door Sietsko Bos
Gewijzigd op 24/04/2019 22:52:02 door Thomas van den Heuvel
Ik heb me daar eerlijk gezegd niet echt in verdiept want doe het altijd op die manier.
Stel dat je per ongeluk een dubbele value hebt... Oef!
Voor alles wat ik herhaal gebruik ik ook bijna altijd een array!
Plus wat al in een eerder topic was gevraagd.
PHP bestand insertdetailed.php echo'ed $_POST['value'].
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
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
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
$.ajax({
type:'POST',
url:'insertdetailed.php',
data:'value=' + value + '&id=' + id,
success:function(resp) {
getColor (resp);
}
});
});
});
tabelcolor = {
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
function getColor (score) {
document.getElementById("demo").style.backgroundColor = tabelcolor[ 'kleur' + score ];
}
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<select class="ajax-select-save" data-target-id="1">
<option>Selecteer een getal</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="2">
<option>Selecteer een getal</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<select class="ajax-select-save" data-target-id="3">
<option>Selecteer een getal</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
</select>
</form>
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
$.ajax({
type:'POST',
url:'insertdetailed.php',
data:'value=' + value + '&id=' + id,
success:function(resp) {
getColor (resp);
}
});
});
});
tabelcolor = {
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
function getColor (score) {
document.getElementById("demo").style.backgroundColor = tabelcolor[ 'kleur' + score ];
}
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<select class="ajax-select-save" data-target-id="1">
<option>Selecteer een getal</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select class="ajax-select-save" data-target-id="2">
<option>Selecteer een getal</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<select class="ajax-select-save" data-target-id="3">
<option>Selecteer een getal</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
</select>
</form>
Ik heb het bovenstaande stukje in een file geplaatst maar (ik neem aan dat de kleur van de <p id='demo'> wordt gewijzigd) er verandert niets van kleur, doe ik iets fout of had ik nog wel iets nodig?. Ik werk met een tabel (de td achtergrond verandert van kleur) maar ik heb een vermoeden dat ik de <p id='demo'> hiervoor kan gebruiken in de td?
Ik zal mijn huidige testfile hieronder plaatsen:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
$.ajax({
type:'POST',
url:'insertdetailed.php',
data:'value=' + value + '&id=' + id,
success:function(resp) {
getColor (resp);
}
});
});
});
tabelcolor = {
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
function getColor (score) {
document.getElementById("demo").style.backgroundColor = tabelcolor[ 'kleur' + score ];
}
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</code]
<script>
$(document).ready(function() {
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
$.ajax({
type:'POST',
url:'insertdetailed.php',
data:'value=' + value + '&id=' + id,
success:function(resp) {
getColor (resp);
}
});
});
});
tabelcolor = {
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
function getColor (score) {
document.getElementById("demo").style.backgroundColor = tabelcolor[ 'kleur' + score ];
}
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</code]
Gewijzigd op 25/04/2019 16:59:27 door Sietsko Bos
Pagina: « vorige 1 2 3 volgende »