Data uit tabel in var

Door Midas Aversteeg op 05-01-2017 09:55 gewijzigd op 05-01-2017 09:59

1.676 views

Hey,

Ik heb een formulier waar je een soort materiaal kan selecteren via een selectbox, die de data uit een tabel haalt.
Daarnaast kan je ook de lengte, breedte en dikte van dat materiaal invullen, om zo uit te rekenen hoeveel het materiaal zal gaan kosten. Ook daaronder een label, die veranderd d.m.v. JavaScript als je de gegevens hebt ingevult. Het eerste stuk lukt mij wel, om de mm³ uit te rekenen. Maar daarna moet het nog vermenigvuldigt worden met de kosten die aan het geselecteerde materiaal hangen. Mijn vraag is, hoe kan ik deze opslaan in een var in JavaScript. (ben er niet heel bekent mee) En deze vervolgens aan de som toevoegen.

Wat ik heb is:


<?php
$sqlM= "SELECT materiaalnummer, omschrijving, kosten FROM materiaal ORDER BY omschrijving";
$optionM = $db->query($sqlM)->fetchAll();
?>

Materiaalnaam: <select name="materiaal" id="materiaal" tabindex=4>
<option selected value=0 > -- Selecteer een optie -- </option>
<?php 
foreach($optionM as $row){
echo "<option value=".$row['materiaalnummer'].">".$row['omschrijving']."</option>"; 
}
?>
</select>

Plaat lengte: <input type="number" name="lengte" id="lengte"><br>
Plaat breedte: <input type="number" name="breedte" id="breedte"><br>
Plaat dikte: <input type="number" name="dikte" id="dikte">

JavaScript:


dikte.onkeyup = function(){
	var lengte = document.getElementById('lengte').value;
	var breedte = document.getElementById('breedte').value;
	var dikte = document.getElementById('dikte').value;

	var som = lengte * breedte * dikte;
	
    document.getElementById('prijsAfmetingen').innerHTML = "€" + som;
}

Thomas van den Heuvel

05-01-2017 12:46 gewijzigd op 05-01-2017 12:48

Je zou een extra data-attribuut die de prijs bevat aan de materiaal-opties kunnen hangen. Deze lees je vervolgens weer uit met JavaScript. Het uitlezen van een attribuut in "native JavaScript" doe je met element.getAttribute(), dus in jouw geval wordt dit zoiets als (ervan uitgaande dat je een prijs-attribuut toevoegt):

Voorbeeld van een optie-regel:

<option value="1" data-prijs="1.25">omschrijving</option>

De JavaScript voor het uitlezen:

var materiaal = document.getElementById('materiaal');
var prijs = materiaal.getAttribute('data-prijs');

Mogelijk moet je deze waarde nog converteren naar een decimaal getal om er mee te kunnen rekenen. Het decimale scheidingsteken is standaard . (een punt). Ik hoop dat je je prijzen ook zo hebt opgeslagen :).

M Midas Aversteeg

05-01-2017 13:22

hmm oke,

zou het niet zoiets kunnen worden als dit?


echo "<option value=".$row['materiaalnummer']."prijs=".$row['kosten'].">".$row['omschrijving']."</option>";

ben nog een beetje aan het stoeien ermee. En ja, gelukkig heb ik alles met een punt gescheiden in de tabel ;)

- SanThe -

05-01-2017 13:30

Midas Aversteeg op 05/01/2017 13:22:43

zou het niet zoiets kunnen worden als dit?

Nee, want op die manier krijgt de html niet de benodigde dubbele quotes.
<?php
echo '<option value="'.$row['materiaalnummer'].'" prijs="'.$row['kosten'].'">'.$row['omschrijving'].'</option>';
?>

Thomas van den Heuvel

05-01-2017 13:30

Je kunt een PHP blok altijd afsluiten en opnieuw openen. Dat is handig als je HTML aan het afdrukken bent. Je komt dan ook minder in de knoei met quotes.

Je zou dus zoiets kunnen doen:

<?php
foreach ($optionM as $row){
    ?><option value="<?php echo $row['materiaalnummer'] ?>" data-prijs="<?php echo $row['kosten'] ?>"><?php echo $row['omschrijving'] ?></option><?php
}
?>

M Midas Aversteeg

05-01-2017 13:42 gewijzigd op 05-01-2017 14:43

misschien een domme vraag, maar moet "data" voor "data-prijs" staan? Het blijft de hele tijd NULL namelijk in de som.

heb nu dit:


<?php 
foreach($optionM as $row){
	echo '<option value="'.$row['materiaalnummer'].'" prijs="'.$row['kosten'].'">'.$row['omschrijving'].'</option>';
	}
?>


	var lengte = document.getElementById('lengte').value;
	var breedte = document.getElementById('breedte').value;
	var dikte = document.getElementById('dikte').value;
	
	var materiaal = document.getElementById('materiaal');
	var prijs = materiaal.getAttribute('prijs');

	var som = (lengte * breedte * dikte) * prijs;
	
    document.getElementById('prijsAfmetingen').innerHTML = prijs;
}

[size=xsmall]Toevoeging op 05/01/2017 14:41:38:[/size]

kan het er mee te maken hebben dat het een getal is met veel cijfers achter de komma? (punt)

[size=xsmall]Toevoeging op 06/01/2017 10:36:32:[/size]

heb t al haha, was ff uitvogelen.


var materiaal = document.getElementById('materiaal');
var prijs = materiaal.options[materiaal.selectedIndex].getAttribute("data-prijs");

het bleef NULL omdat niet de data van de geselecteerde item werd gepakt.

Reageren

Inloggen om te reageren