PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
S

waarde listmenu in database vervangen

Door Sietsko Bos op 23-04-2019 09:56 gewijzigd op 23-04-2019 15:26
4.572 views
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;
}
}
?>
S
Sietsko Bos
26-04-2019 10:26
Dat was het inderdaad die had ik verwijderd en daarom werkte het dus niet.
Het werkt nu helemaal goed.

Iedereen die geholpen heeft natuurlijk heel veel dank want ik was hier niet uitgekomen... Top!
Jelle Dnw
26-04-2019 14:08
Even de mooie versie:


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

<script>
$(document).ready(function() {
    const tabelcolor = 
    {
      kleur1: 'red',
      kleur2: 'yellow',
      kleur3: 'purple',
      kleur4: 'green',
      kleur5: 'lightgrey',
      kleur6: 'navy'
    };

    $('.ajax-select-save').change(function() {
        const value = $(this).val();
        const id = $(this).data('target-id');
        let td = $(this).parent('td');

        $.post(
          'insertdetailed.php', 
          { 
            value: value, 
            id: id
          }, 
          function(data) {
            td.css('background-color', tabelcolor['kleur' + data]);
          }
        );
    });
});
</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>


[size=xsmall]Toevoeging op 26/04/2019 14:23:23:[/size]

Voorgaande werkt ook, en native Javascript is zeker sneller dan jQuery, maar qua leesbaarheid en structuur van je code geef ik nog even voorgaande mee ter illustratie.

[size=xsmall]Toevoeging op 26/04/2019 14:23:50:[/size]

Jelle Dnw op 26/04/2019 14:08:00

Even de mooie versie:


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

<script>
$(document).ready(function() {
    const tabelcolor = 
    {
      kleur1: 'red',
      kleur2: 'yellow',
      kleur3: 'purple',
      kleur4: 'green',
      kleur5: 'lightgrey',
      kleur6: 'navy'
    };

    $('.ajax-select-save').change(function() {
        const value = $(this).val();
        const id = $(this).data('target-id');
        let td = $(this).parent('td');

        $.post(
          'insertdetailed.php', 
          { 
            value: value, 
            id: id
          }, 
          function(data) {
            td.css('background-color', tabelcolor['kleur' + data]);
          }
        );
    });
});
</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>


[size=xsmall]Toevoeging op 26/04/2019 14:23:23:[/size]

Voorgaande met de getColor etc werkt ook, en native Javascript is zeker sneller dan jQuery, maar qua leesbaarheid en structuur van je code geef ik nog even bovenstaande mee ter illustratie.


Reageren

Inloggen om te reageren