waarden uit html-formulier verzamelen in div
Ik heb een html-formulier met select options. En mijn bedoeling is om de waarden van de verschillende opties te 'verzamelen' in een div op dezelfde pagina.
In mijn voorbeeld kan de gebruiker kiezen uit 6 opties (artikelnummers). En als de gebruiker een keuze maakt, zou dat artikelnummer moeten verschijnen in de div met id "keuzes". Maar als de gebruiker nog een ander artikelnummer kiest, na de eerste keuze, zou dat artikelnummer toegevoegd moeten worden aan de div (eigenlijk een soort shopping cart, maar dan vereenvoudigd in opzet). Het zou dus ook handig zijn om toegevoegde artikelnummers, eenvoudig weer uit de div te kunnen verwijderen.
Ik weet niet zeker of dit met Javascript/JQuery te doen is, of dat daarvoor juist PHP meer geschikt zou zijn.
Alle hulp wordt erg gewaardeerd want ik zit hier al een tijdje op te broeden maar kom weinig verder.
Groeten,
Jeroen
Mijn huidige code is:
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
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
<html>
<head>
<title>Kies</title>
<style type="text/css">
#keuzes { width:200px;
height:300px;
background-color:#CCC;
border-color:#666;
border-width:3px;
border-style:dashed;
color:#060;
padding:10px;
font-family:Verdana, Arial, sans-serif;
font-size:12px;
font-weight:bold;
margin-top:50px;
position:absolute;
left:300px;
}
#keuzeKop { width:200px;
height:18px;
background-color:#CCC;
border-color:#060;
border-width:3px;
border-style:solid;
color:#060;
padding:10px;
font-family:Verdana, Arial, sans-serif;
font-size:12px;
font-weight:bold;
position:absolute;
left:300px;
}
</style>
</head>
<body>
<form method="post">
<select>
<option value="" selected>Kies artikel</option>
<option value="2176_82" style="cursor:pointer">2176_82</option>
<option value="2224_56" style="cursor:pointer">2224_56</option>
<option value="2265_42" style="cursor:pointer">2265_42</option>
<option value="2265_54" style="cursor:pointer">2265_54</option>
<option value="2278_74" style="cursor:pointer">2278_74</option>
<option value="2292_78" style="cursor:pointer">2292_78</option>
</select>
</form>
<div id="keuzeKop">Uw gemaakte keuzes:</div>
<div id="keuzes"></div>
</body>
</html>
<head>
<title>Kies</title>
<style type="text/css">
#keuzes { width:200px;
height:300px;
background-color:#CCC;
border-color:#666;
border-width:3px;
border-style:dashed;
color:#060;
padding:10px;
font-family:Verdana, Arial, sans-serif;
font-size:12px;
font-weight:bold;
margin-top:50px;
position:absolute;
left:300px;
}
#keuzeKop { width:200px;
height:18px;
background-color:#CCC;
border-color:#060;
border-width:3px;
border-style:solid;
color:#060;
padding:10px;
font-family:Verdana, Arial, sans-serif;
font-size:12px;
font-weight:bold;
position:absolute;
left:300px;
}
</style>
</head>
<body>
<form method="post">
<select>
<option value="" selected>Kies artikel</option>
<option value="2176_82" style="cursor:pointer">2176_82</option>
<option value="2224_56" style="cursor:pointer">2224_56</option>
<option value="2265_42" style="cursor:pointer">2265_42</option>
<option value="2265_54" style="cursor:pointer">2265_54</option>
<option value="2278_74" style="cursor:pointer">2278_74</option>
<option value="2292_78" style="cursor:pointer">2292_78</option>
</select>
</form>
<div id="keuzeKop">Uw gemaakte keuzes:</div>
<div id="keuzes"></div>
</body>
</html>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Alvast bedankt!
Alvast bedankt!
Gewijzigd op 28/04/2014 15:19:06 door - Ariën -
Ik zou zelf het volgende doen:
Wanneer een item aangeklikt word, een hidden input field maken. Elke keer als erop geklikt word de aangeklikte select eronder plaatsen. Let wel op de name="" van de hiddenfield. Je kan het dan eenvoudig uitlezen dmv een foreach in PHP. Even een simpel plain voorbeeld:
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>
$(document).ready(function(){
var option_field,
hidden_field;
$('#mijn_artikelen').click(function(){
option_field = $(this).val();
hidden_field = '<input type="hidden" value="'+ option_field +'" name="artikel_nummer[]">';
$(hidden_field).appendTo('#mijn_lijst');
$(this).remove(); //Deze functie verwijderd de huidige option die is aangeklikt.
})
});
</script>
<form method="post">
<select id="mijn_artikelen">
<option value="" selected>Kies artikel</option>
<option value="2176_82" style="cursor:pointer">2176_82</option>
<option value="2224_56" style="cursor:pointer">2224_56</option>
<option value="2265_42" style="cursor:pointer">2265_42</option>
<option value="2265_54" style="cursor:pointer">2265_54</option>
<option value="2278_74" style="cursor:pointer">2278_74</option>
<option value="2292_78" style="cursor:pointer">2292_78</option>
</select>
<div id="mijn_lijst">
</div>
</form>
<?php
if($_SERVER['request_method'] == 'post'){
foreach($_POST['artikel_nummer'] AS $artikel){
echo 'Dit is het artikel nummer: '.$artikel .'<hr />';
}
}
?>
$(document).ready(function(){
var option_field,
hidden_field;
$('#mijn_artikelen').click(function(){
option_field = $(this).val();
hidden_field = '<input type="hidden" value="'+ option_field +'" name="artikel_nummer[]">';
$(hidden_field).appendTo('#mijn_lijst');
$(this).remove(); //Deze functie verwijderd de huidige option die is aangeklikt.
})
});
</script>
<form method="post">
<select id="mijn_artikelen">
<option value="" selected>Kies artikel</option>
<option value="2176_82" style="cursor:pointer">2176_82</option>
<option value="2224_56" style="cursor:pointer">2224_56</option>
<option value="2265_42" style="cursor:pointer">2265_42</option>
<option value="2265_54" style="cursor:pointer">2265_54</option>
<option value="2278_74" style="cursor:pointer">2278_74</option>
<option value="2292_78" style="cursor:pointer">2292_78</option>
</select>
<div id="mijn_lijst">
</div>
</form>
<?php
if($_SERVER['request_method'] == 'post'){
foreach($_POST['artikel_nummer'] AS $artikel){
echo 'Dit is het artikel nummer: '.$artikel .'<hr />';
}
}
?>
Gewijzigd op 28/04/2014 14:39:01 door Donny Wie weet
Jeroen van de lisdonk op 28/04/2014 14:26:56:
Ik weet niet zeker of dit met Javascript/JQuery te doen is, of dat daarvoor juist PHP meer geschikt zou zijn.
Beide?!
Jquery om de gegevens op te halen / te tonen in je div en php om gegevens op te halen uit de database.
Bedankt voor jullie snelle reacties. Maar mijn voorbeeld heeft maar 6 opties voor het gemak. Echter dit zouden er ook bv 750 kunnen zijn. Dan wordt het met verborgen velden wel erg bewerkelijk.
Ik kwam een voorbeeld tegen van een simpele shopping cart (http://www.unibia.com/unibia/dev/examples/SuperSimpleShoppingCart/). Dat is wel een beetje wat ik zoek. Alleen dan op dezelfde pagina ipv switchen tussen 2.
Oh, en nog een belangrijk punt is, liefst geen database
Wederom dank,
Jeroen
In heb nu een voorziening gemaakt, waarbij een gebruiker via een php-pagina, met thumbnails en checkboxen, een aantal artikelen kan aanvinken. Na het aanvinken van de gewenste artikelen en klikken op de submit-button, worden de jpg's naar een map op de webserver geupload.
Een ander php-script zorgt ervoor dat deze jpg's worden getoond in een soort digitale folder.
Dit werkte prima bij weinig artikelen. Maar nu moet ik iets soortgelijks werkend zien te krijgen voor 750 artikelen. En 750x een thumbnail met checkbox, is niet meer overzichtelijk voor een gebruiker.
Dus zocht ik nu naar een manier om wel met zoveel artikelen iets werkbaars te maken. Maar die eerdere voorziening werkt nu dus zonder een database. En ik kan slecht overzien of een database-toevoeging ook nog effect heeft op de rest van de gebruikte scripts.
Ik ben een beetje bang dat ik dan helemaal opnieuw moet beginnen met bouwen, ipv een klein deel vervangen
En wil je voor 750 artikelen elke keer je HTML/PHP file openen?
Quote:
Na het aanvinken van de gewenste artikelen en klikken op de submit-button, worden de jpg's naar een map op de webserver geupload.
Komt erop neer dat je 2x een afbeelding naar de server wilt verplaatsen/kopieeren.
Quote:
Dit werkte prima bij weinig artikelen. Maar nu moet ik iets soortgelijks werkend zien te krijgen voor 750 artikelen. En 750x een thumbnail met checkbox, is niet meer overzichtelijk voor een gebruiker.
Ik raad je aan toch eens te kijken naar SQL. Denk dat meerdere mij daar geen ongelijk in geven. Nu ga je telkens een nieuwe map maken voor elke nieuwe gebruiker. En daarnaast: hoe wil je je gebruikers opslaan?
Toevoeging op 28/04/2014 15:42:47:
Even als toevoeging:
Nu een klein deel vervangen, later weer een klein deel moeten vervangen en zo blijf je doorgaan en word je code heel onoverzichtelijk. Als je iets doet, doe het dan gelijk goed. Of de eerste keer fout :P
Toevoeging op 28/04/2014 15:49:28:
Het is nu al een samengeraapt zootje aan scripts die ik wonderwel heb kunnen laten samenwerken, zonder al te veel php-kennis. En op deze manier wordt dat alleen maar erger. Ik ga maar een eenvoudig cms proberen in te richten voor wat ik nodig heb, denk ik
Vervolgens moet de gebruiker ook nog de bestandsnaam van de jpg kunnen aanpassen en evt. verwijderen uit de gemaakte selectie.
En als laatste moet de selectie jpg's getoond worden in een bepaalde opmaak op een presentatie-pagina (soort digitale folder).
Toevoeging op 28/04/2014 16:12:17:
En op die presentatie-pagina, heb ik nu ook nog een reserveer-optie gemaakt en een uitvergrootfunctie voor de artikelen. Waarbij de bestandsnaam van de jpg, het onderschrift in de vergroting is.