[PHP/JS] Waarden uitlezen van form zonder te submitten - Softwareontwikkeling

maandag 21 mei 2007 19:29

Acties:

Topicstarter

Ik ben een opdrachtje aant maken, hierbij maak je een incident aan via een form. In het formpje heb je 2 Select boksjes, de eerste is voor de type apparatuur (categoriën staan in database opgeslagen en worden daaruit gelezen) en de andere is het apparaatid (dus bijvoorbeeld cat: computers, en dan computer nr 4, die staan ookal in een database).

Nu wil ik het zo maken, dat als je computer selecteerd bij de eerste select, dat hij dan de pagina refreshed en het liefst via alleen PHP hij de waarde daar dan uit haalt zodat ik in een volgende query naar het database de volgende select kan vullen met alleen computers.

Ik ben niet zo'n held in PHP, en al helemaal niet in JavaScript, vandaar dat ik het hier vraag.

Tot nu toe heb ik dit:

PHP:

<select name="cat" id="categorie" onChange="location.reload();" >
<?php 
$categ = mysql_query("SELECT * FROM categorie");
while($cat = mysql_fetch_array($categ)){
echo("<option value=\"" . $cat['id'] . "\">" . $cat['object'] . "</option>\n");
}
?>
</select><?php if($categorie == '1'){ echo("categorie is 1");  }else{echo("geen cat");};?></td>

Het lijkt me ook erg onwaarschijnlijk dat het $categorie == '1' werkt, maar dit had ik gevonden via google.

maandag 21 mei 2007 19:31

Acties:

orf

JavaScript != Java

Je kunt beter je form submitten en vervolgens de $_POST var uitlezen en deze gebruiken

maandag 21 mei 2007 19:35

Acties:

Montaner

Topicstarter

orf schreef op maandag 21 mei 2007 @ 19:31:
JavaScript != Java

Je kunt beter je form submitten en vervolgens de $_POST var uitlezen en deze gebruiken

Hmm, ik heb het vaak gezien bij veel sites (waar ik nu ff niet opkom zo, DOH) maar nooit is het gedaan pas na het submitten.

Zo'n site dat je tijdens het registeren je land moet kiezen, en als je die aanklikt dan komen de provincie's in de volgende select box te staan.

[ Voor 17% gewijzigd door Montaner op 21-05-2007 19:38 ]

maandag 21 mei 2007 19:36

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

orf schreef op maandag 21 mei 2007 @ 19:31:
JavaScript != Java

Je kunt beter je form submitten en vervolgens de $_POST var uitlezen en deze gebruiken

^^ Wat hij zegt. En een WHERE clause op je query hangen.

[ Voor 65% gewijzigd door RobIII op 21-05-2007 19:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 21 mei 2007 19:50

Acties:

Equator

Crew Council

#whisky #barista

trix0r schreef op maandag 21 mei 2007 @ 19:35:
[...]

Hmm, ik heb het vaak gezien bij veel sites (waar ik nu ff niet opkom zo, DOH) maar nooit is het gedaan pas na het submitten.

Zo'n site dat je tijdens het registeren je land moet kiezen, en als je die aanklikt dan komen de provincie's in de volgende select box te staan.

Kijk eens naar de Frontpage van Tweakers.net bij het kopje Zoeken. Daar wordt die techniek ook gebruikt.
Dat is gedaan met Ajax. Voor een simpele introductie: http://www.w3schools.com/ajax

maandag 21 mei 2007 19:53

Acties:

Montaner

Topicstarter

Equator schreef op maandag 21 mei 2007 @ 19:50:
[...]

Kijk eens naar de Frontpage van Tweakers.net bij het kopje Zoeken. Daar wordt die techniek ook gebruikt.
Dat is gedaan met Ajax. Voor een simpele introductie: http://www.w3schools.com/ajax

Is er dan niet gewoon een javascript functie die uit mijn form kan lezen wat de waarde is die geselecteerd is nadat als hij refreshed? Want dan kan ik die waarden laten schrijven en dan overnemen met PHP in plaats van AJAX te gaan 'leren' als ik javascript volgend jaar op school pas krijg

maandag 21 mei 2007 19:58

Acties:

Equator

Crew Council

#whisky #barista

Nou ja, op het OnKeyUp/OnSelect event (of een andere) de waarde van het object uitlezen, en ergens anders inzetten.. Beetje zoeken en dan is dat best te vinden..

maandag 21 mei 2007 22:09

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

HTML:

<select onchange="document.location.href='/somepage.php?id=' + this.value;">
    <option value="1">Bla</option>
    <option value="2">Foo</option>
    <option value="3">Bar</option>
</select>

Voila. Zonder submit. Wil je zonder refresh dan zul je je moeten verdiepen in AJAX of wat meer scriptwerk doen.

Verder heeft dit niets met PRG te maken maar met WEB (Javascript is client-side). Zie daarvoor ook
Waar hoort mijn topic?

Move: PRG >> WEB

edit
En om niet helemaal flauw te zijn:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            var theOptions = new Array(
                                new Array('Appel','Peer','Banaan'),
                                new Array('Rood','Groen','Blauw'),
                                new Array('Rond','Vierkant','Ovaal')
                            );
            var theIDs = new Array(
                            new Array('A','B','C'),
                            new Array('R','G','B'),
                            new Array('Round','Square','Oval')
                        );
            
            function fillOptions(theElementID, theChosenOption) {
                var theDropDown = document.getElementById(theElementID);
                if (theDropDown) {
                    clearDropdown(theDropDown);
                    var i = parseInt(theChosenOption);
                    fillDropDown(theDropDown, theOptions[i], theIDs[i]);
                }
            }
            
            function clearDropdown(theElement) {
                while (theElement.options.length>0) theElement.remove(0);
            }
            
            function fillDropDown(theElement, theDescriptions, theValues) {
                for (var i=0;i<theOptions.length;i++) {
                    var theOption = document.createElement("OPTION");
                    theOption.text = theDescriptions[i];
                    theOption.value = theValues[i];
                    theElement.options.add(theOption);
                }
            }
        </script>
    </head>
    
    <body>
        <select id="select_one" onchange="fillOptions('select_two',this.value);">
            <option value="0">Bla</option>
            <option value="1">Foo</option>
            <option value="2">Bar</option>
        </select>
        
        <select id="select_two" onchange="alert(this.value);">
            <option value="">Selecteer iets!!</option>
        </select>
    
    </body>
</html>

Voila. Werkend en al.

En met associative arrays:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            var theOptions = new Array();
            theOptions['fruits'] = new Array('Appel','Peer','Banaan');
            theOptions['colors'] = new Array('Rood','Groen','Blauw'),
            theOptions['shapes'] = new Array('Rond','Vierkant','Ovaal');

            var theIDs = new Array();
            theIDs['fruits'] = new Array('A','B','C');
            theIDs['colors'] = new Array('R','G','B');
            theIDs['shapes'] = new Array('Round','Square','Oval');
            
            function fillOptions(theElementID, theChosenOption) {
                var theDropDown = document.getElementById(theElementID);
                if (theDropDown) {
                    clearDropdown(theDropDown);
                    fillDropDown(theDropDown, theOptions[theChosenOption], theIDs[theChosenOption]);
                }
            }
            
            function clearDropdown(theElement) {
                while (theElement.options.length>0) theElement.remove(0);
            }
            
            function fillDropDown(theElement, theDescriptions, theValues) {
                if ((theValues) && (theDescriptions)) {
                    for (var i=0;i<theDescriptions.length;i++) {
                        var theOption = document.createElement("OPTION");
                        theOption.text = theDescriptions[i];
                        theOption.value = theValues[i];
                        theElement.options.add(theOption);
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <select id="select_one" onchange="fillOptions('select_two',this.value);">
            <option value="">Kies iets</option>
            <option value="fruits">Fruit</option>
            <option value="colors">Kleuren</option>
            <option value="shapes">Vormen</option>
        </select>
        
        <select id="select_two" onchange="alert(this.value);">
            <option value="">Selecteer iets!!</option>
        </select>
    
    </body>
</html>

Daarmee moet je er kunnen komen.

[ Voor 99% gewijzigd door RobIII op 21-05-2007 22:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij