Hoi,
Ik ben hier al eerder mee bezig geweest, maar het is niet gelukt om dat aan de praat te krijgen.
Na verder zoeken op internet kwam ik dit script tegen die zou moeten doen wat ik nodig heb, maar het werkt niet.

Wat ik dus wil is de waarde van het listmenu wijzigen in de database zonder dat de pagina opnieuw geladen wordt.

Wie wil me helpen om dit werkend te krijgen, ik zou er erg mee geholpen zijn.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            
			var selectValue = $('#selectBoxID').val();

            // post to php script
            $.ajax({
                type: 'POST',
                url: 'insertdetailed.php',
                data: { selectValueBox: selectValue }
            });
        });

    </script>
</head>
<body>
	<form id="update_db" name="update_db" method="post">
    	<select id="selectBoxID" onselect="saveToDatabase()">
       		<option value="1">Value 1</option>
       		<option value="2">Value 2</option>
    	</select>
		<input type="hidden" name="id" id="1">
	</form>
</body>
</html>



<?php
if(isset($_POST['selectValueBox'])){

$connectie = new mysqli("localhost", "xxxxxx", "xxxxxx", "xxxxxx");

// update de score
$sql_update = "UPDATE obs_scores SET score = '".$_POST['selectValueBox']."' WHERE id= '".$_POST['id']."'";

if (mysqli_query($connectie, $sql_update)) {
echo 'SUCCESS';
print $sql_update;
} else {
echo 'FAILED';
print $sql_update;
}
}
?>
Oh op die manier, dan begrijp ik het. Ik had verwacht dat je indien je losse forms gebruikt het id steeds terug mag komen. Ik heb geprobeerd om de id's te wijzigen in een class en dan het # vervangen in een . maar zo werkt het dus niet.
Je kan ook telkens aparte forms gaan gebruiken met telkens zo'n hidden field maar daar zie ik het nut niet echt van in, tenzij je nog een submit fallback wil hebben indien de user geen Javascript aan heeft staan.
Even getest en het werkt goed, dank voor het helpen.

[size=xsmall]Toevoeging op 24/04/2019 16:25:02:[/size]

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?
Kan je perfect met jQuery doen in die change() method of als het striped rows zijn gewoon met CSS dan doet ie het automatisch.
Heb je ook een linkje of een voorbeeld hoe zoiets te doen?

Zo ziet een td eruit nu.

<?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'; }
?>


          <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>
Oef. Kun je voor dat eerste fragment niet beter een arraytje maken ofzo? En maak voor de achtergrondkleuren wellicht classes.
Is dat omdat het beter leest of omdat het beter en sneller werkt?
Ik heb me daar eerlijk gezegd niet echt in verdiept want doe het altijd op die manier.
het kan altijd een paar miliseconden schelen, maar het is vooral minder foutgevoeliger.
Stel dat je per ongeluk een dubbele value hebt... Oef!

Voor alles wat ik herhaal gebruik ik ook bijna altijd een array!
Hier een oplossing op basis van alles wat hierboven is beschreven.

Plus wat al in een eerder topic was gevraagd.

PHP bestand insertdetailed.php echo'ed $_POST['value'].

<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>
Adoptive Solution bedankt voor het helpen, hier ben ik erg blij mee omdat dit het laatste stukje nog is van de website met javascript waar ikzelf niet uitkom omdat mijn kennis gewoon niet goed is van Javascript.

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]
<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]

Reageren