[PHP] Formuliert maken.

vrijdag 23 mei 2003 23:46

Acties:

0 Henk 'm!

Topicstarter

Hoi,

Ik ben bezig om een siteje te maken voor mijn werk waar je naambordjes kan bestellen.

Alleen nu ben ik dus bezig in PHP. En de eerste form staat klaar.
Dit is een simpel Pull-down menuutje met 8 opties.

Nu heb ik een 2de menuutje gemaakt die moet veranderen als je de eerste veranderd.

Bij de 1ste moet je het materiaal kiezen.
En dan bij 2 moet een lijstje met modellen komen te staan.

Hoe kan ik dit makkelijk doen? En het liefst zoveel mogelijk in HTML.

Ik heb tot nu toe dit:

HTML:

<FORM METHOD="post" TARGET="body" ACTION="php/pulldown.php">
  <B>Materiaal: <B>
  <SELECT NAME="materiaal">
    <OPTION NAME="materiaal" VALUE="Emaille">    Emaille              </OPTION>
    <OPTION NAME="materiaal" VALUE="Glas">       Glas & R.V.S.        </OPTION>
    <OPTION NAME="materiaal" VALUE="R.C.H.">     R.C.H. Signs         </OPTION>
    <OPTION NAME="materiaal" VALUE="Hout">       Hout                 </OPTION>
    <OPTION NAME="materiaal" VALUE="Primo">      Primo                </OPTION>
    <OPTION NAME="materiaal" VALUE="Perspex">    Perspex & Gravoglas  </OPTION>
    <OPTION NAME="materiaal" VALUE="Dieren">     Dierenpenningen      </OPTION>
    <OPTION NAME="materiaal" VALUE="Messing">    Messing              </OPTION>
    <OPTION NAME="materiaal" VALUE="Sport">      Sportprijsplaatjes   </OPTION>
    <OPTION NAME="materiaal" VALUE="Scott-Ply">  Scott-ply            </OPTION>
  </SELECT>
  <BR>
  <B>Model: <B>
  <SELECT NAME="model">
    <OPTION NAME="model" VALUE="ModelA">    Model A        </OPTION>
    <OPTION NAME="model" VALUE="ModelB">    Model B        </OPTION>
    <OPTION NAME="model" VALUE="ModelC">    Model C        </OPTION>
  </SELECT>
  <BR><BR><BR>
  <INPUT TYPE="submit" VALUE="Send">
</FORM>

Gedeeltes met hoe je het moet verzenden komen later. Is de bedoeling dat er een formulier per mail word gestuurd naar de klant en me.
Maar dat is een probleem voor later. Eerst dit kleine probleem en dan later dat andere kleine probleem.

Ik heb al bij PHP.net gezocht maar daar kon ik niet echt wat vinden.

Probleem is ook een beetje dat ik geen beschikking heb over een MySQL server.

[ Voor 43% gewijzigd door Xavier op 24-05-2003 08:20 ]

zaterdag 24 mei 2003 00:09

Acties:

0 Henk 'm!

Glimi

Designer Drugs

Je zult toch op één of andere manier je waardes in je eerste select aan je tweede moeten koppelen. Je hebt daar grofweg 2 opties voor.

1) Je zet alle waardes al in de pagina en zodra de gebruiker de eerste select veranderd, vul jij de tweede in dmv javascript.
2) Als de eerste veranderd, laat je de pagina naar de server posten en daarna wordt HTML teruggestuurd met de tweede select ingevuld.

Hoe je die data aan elkaar gaat koppelen laat ik aan jou over. Je kunt een boel met files gaan hannessen, maar ik wil je wel meegeven dat databases juist voor zulk soort dingen gemaakt zijn

zaterdag 24 mei 2003 00:17

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

leuk voorbeeldje dat werkt met javascript en een hidden iframe:

HTML:

<html>
<head>
<script type="text/javascript">

function add_models(models) {

  for (var i = 0; i < models.length; i++) {

    document.forms['myform'].elements['model'][i] = new Option(models[i], models[i]);

  }

}

function load_models(make) {

  if (make) {

    document.forms['myform'].elements['model'].length = 0;
    document.getElementById('hiddenframe').src = 'loadmodels.php?make='+make;

  }

}

</script>
</head>
<body> 
<form name="myform">
choose make:
<select name="make" style="width: 100px" onchange="load_models(this.value)">
  <option value="">Choose</option>
  <option value="Audi">Audi</option>
  <option value="Fiat">Fiat</option>
</select>
choose model:
<select name="model" style="width: 100px">
</select>
</form>
<iframe id="hiddenframe" src="" style="display: none"></iframe>
</body>
</html>

voorbeeldpagina gegenereerd door loadmodels.php?make=xxxx:

HTML:

<html>
<head>
<script type="text/javascript">

parent.add_models(['model1','model2','model3']);

</script>
</head>
<body>
</body>
</html>

doe er maar wat mee

[ Voor 23% gewijzigd door crisp op 24-05-2003 13:12 ]

Intentionally left blank

zaterdag 24 mei 2003 08:55

Acties:

0 Henk 'm!

Xavier

Topicstarter

Glimi schreef op 24 May 2003 @ 00:09:
Je zult toch op één of andere manier je waardes in je eerste select aan je tweede moeten koppelen. Je hebt daar grofweg 2 opties voor.

1) Je zet alle waardes al in de pagina en zodra de gebruiker de eerste select veranderd, vul jij de tweede in dmv javascript.
2) Als de eerste veranderd, laat je de pagina naar de server posten en daarna wordt HTML teruggestuurd met de tweede select ingevuld.

Hoe je die data aan elkaar gaat koppelen laat ik aan jou over. Je kunt een boel met files gaan hannessen, maar ik wil je wel meegeven dat databases juist voor zulk soort dingen gemaakt zijn

Dat is ook meer het probleem. Website staat op een zo goedkoop mogelijke manier gehost maar mijn baas wil wel dingen zoals dit.
Dus dan moet je andere manieren gaan zoeken...

Probleem is alleen dat ik student ben en beginneling in proggen.
Ik heb nu Pascal gehad en we zijn nu bezig met PHP en MySQL. Volgend jaar krijgen we Java.

Sommige manieren van schrijven snap ik nog niet helemaal. Maar dat komt gewoon omdat ik daar net teweinig ervaring voor heb.

Ik probeer het dus ook te maken, maar ik zal wel wat veel vragen stellen denk ik die voor jullie heel erg simpel zijn.

crisp schreef op 24 May 2003 @ 00:17:
leuk voorbeeldje dat werkt met javascript en een hidden iframe:

HTML:

<html>
<head>
<script type="text/javascript">

function add_models(models) {

  for (var i = 0; i < options.length; i++) {

    document.forms['myform'].elements['model'][i] = new Option(models[i], models[i]);

  }

}

function load_models(make) {

  if (make) {

    document.forms['myform'].elements['model'].length = 0;
    document.getElementById('hiddenframe').src = 'loadmodels.php?make='+make;

  }

}

</script>
</head>
<body> 
<form name="myform">
choose make:
<select name="make" style="width: 100px" onchange="load_models(this.value)">
  <option value="">Choose</option>
  <option value="Audi">Audi</option>
  <option value="Fiat">Fiat</option>
</select>
choose model:
<select name="model" style="width: 100px">
</select>
</form>
<iframe id="hiddenframe" src="" style="display: none"></iframe>
</body>
</html>

voorbeeldpagina gegenereerd door loadmodels.php?make=xxxx:

HTML:

<html>
<head>
<script type="text/javascript">

parent.add_models(['model1','model2','model3']);

</script>
</head>
<body>
</body>
</html>

doe er maar wat mee

Dat loadmodel.php
Weet je ook wat daar in staat?

En:

HTML:

1	'loadmodels.php?make='+make

Wat gebeurt daar precies? Ik snap dat stukje namelijk niet echt.

En ik ga nu even opzoeken wat precies iframes zijn.

edit:
Got it: http://www.tripod.lycos.nl/webmaster/tips/987670160/

[ Voor 50% gewijzigd door Xavier op 24-05-2003 09:00 ]

zaterdag 24 mei 2003 11:22

Acties:

0 Henk 'm!

Xavier

Topicstarter

Heb even wat gezocht op inet en vond het een en ander.

HTML:

<HTML>
<HEAD>

<SCRIPT LANGUAGE = "JavaScript">
  var Emaille = new Array("Model A","Model B","Model C","");
  var Glas = new Array("Model 1","Model 2","Model 3","");
  var RCH = new Array("Model 11","Model 12","Model 13","Model 14");
  function swapOptions(the_array_name)
  {
    var numbers_select = window.document.the_form.the_examples;
    var the_array = eval(the_array_name);
    setOptionText(window.document.the_form.the_examples, the_array);
  } 

  function setOptionText(the_select, the_array)
  {
    for (loop=0; loop < the_select.options.length; loop++)
    {
        the_select.options[loop].text = the_array[loop];
    }
  }
</SCRIPT>
</HEAD>

<FORM NAME="the_form">

<SELECT NAME="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);">
  <OPTION selected>Emaille
  <OPTION>Glas
  <OPTION>RCH
</SELECT>

<BR><BR><BR>

<SELECT NAME="the_examples">
  <OPTION>Model A
  <OPTION>Model B
  <OPTION>Model C
  <OPTION>Model D
</SELECT>
</FORM>

</BODY>
</HTML>

Probleem van dit is. Dat ik bij het eerste pulldown menuutje 8 dingen heb. Met daaronder dan verschillende aantallen met modellen.
Nu moet je met dit scriptje overal evenveel opties hebben. Hoe zou ik dit kunnen aanpassen?
Want opzich werkt dit erg goed.

[ Voor 17% gewijzigd door Xavier op 24-05-2003 11:22 ]

zaterdag 24 mei 2003 13:21

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

Mijn eerste versie haalde dus zeg maar de models op door een PHP script aan te roepen, die de modellen teruggaf in een javascript array. Hoe die PHP eruit ziet ligt er dus helemaal aan waar je de modellen vandaan haal; uit een database, uit een textbestand of whatever.
Als je echter al statisch alles in je eerste pagina kan/wil/moet zetten, dan zou het ongeveer zoiets worden:

HTML:

<html>
<head>
<script type="text/javascript">

var models = new Array();
models['Audi'] = new Array('Audi 1', 'Audi 2', 'Audi 3');
models['Fiat'] = new Array('Fiat 1', 'Fiat 2', 'Fiat 3', 'Fiat4');

function load_models(make) {

  document.forms['myform'].elements['model'].length = 0;
  if (make) add_models(models[make]);

}

function add_models(models) {

  for (var i = 0; i < models.length; i++) {

    document.forms['myform'].elements['model'][i] = new Option(models[i], models[i]);

  }

}

</script>
</head>
<body> 
<form name="myform">
choose make:
<select name="make" style="width: 100px" onchange="load_models(this.value)">
  <option value="">Choose</option>
  <option value="Audi">Audi</option>
  <option value="Fiat">Fiat</option>
</select>
choose model:
<select name="model" style="width: 100px">
</select>
</form>
</body>
</html>

Intentionally left blank

zaterdag 24 mei 2003 13:37

Acties:

0 Henk 'm!

Joror

the eternal lurker

Tsk was ik net even klaar iets uit te tiepen, post crisp nog wat

HTML:

<HTML>
<HEAD>

<SCRIPT>
    function changeSelectBox( select, value )
    {
        var target = select.form["the_examples"];
        var x = select.options[select.selectedIndex].value;
        var old_value = target.value;
        
        /* Verwijder de huidige opties */
        for (m = target.options.length-1; m > 0; m--)
            target.options[m]=null;
    
        /* Voeg de nieuwe toe */
        for (i = 0; i < select_opt[x].length; i++)
            target.options[i]=new Option(select_opt[x][i].text,select_opt[x][i].value);
    
        /* Als de oude waarde ook nog in de nieuwe opties zit, selecteer hem */
        target.value = old_value;
    
        /* Als men een specifieke waarde wil selecteren */
        if ( value != 'undefined' )
            target.value = value;
        /* Als er geen waarde is geselecteerd, selecteer de eerste */
        if ( target.selectedIndex == -1 )
            target.options[0].selected = true;
    }
    
    /* new Option( --text--, --value-- ) */
    select_opt = new Array();
    select_opt['Emaille'] = new Array();
    select_opt['Emaille'][0] = new Option('Model A','Model A');
    select_opt['Emaille'][1] = new Option('Model B','Model B');
    select_opt['Emaille'][2] = new Option('Model C','Model C');
    select_opt['Glas'] = new Array();
    select_opt['Glas'][0] = new Option('Model 1','Model 1');
    select_opt['Glas'][1] = new Option('Model 2','Model 2');
    select_opt['Glas'][2] = new Option('Model 3','Model 3');
    select_opt['RCH'] = new Array();
    select_opt['RCH'][0] = new Option('Model A/B','Model A/B');
    select_opt['RCH'][1] = new Option('Model B','Model B');
    select_opt['RCH'][2] = new Option('Model BlaBla','Model BlaBla');
                            
    
</SCRIPT>
</HEAD>

<FORM NAME="the_form">

<!-- 
    - Ook option tags afsluiten, netheid is goed! 
    - ID attribute zodat we hem terug kunnen vinden 
    - Bij selects ook VALUE definieren, zo kan je de text duidelijker maken (indien nodig)
-->
<SELECT NAME="choose_category" ID='category_select' onChange="changeSelectBox(this);">
  <OPTION VALUE='Emaille' selected>Emaille</OPTION>
  <OPTION VALUE='Glas'>Categorie Glas & Glas in lood</OPTION>
  <OPTION VALUE='RCH'>Raar Chemisch Hoopje</OPTION>
</SELECT>

<BR><BR><BR>

<SELECT NAME="the_examples">
</SELECT>
</FORM>

<script>
    /* Eerste keer dat de pagina geladen wordt, zorg ervoor dat de select gevuld wordt */
    changeSelectBox(document.getElementById('category_select'));
</script>

</BODY>
</HTML>

(jammer dat de syntax highlighting niet zo wil met de HTML tag)

nada aka zilch, formerly known as zip

zaterdag 24 mei 2003 14:10

Acties:

0 Henk 'm!

Xavier

Topicstarter

Joror schreef op 24 May 2003 @ 13:37:
Tsk was ik net even klaar iets uit te tiepen, post crisp nog wat

(jammer dat de syntax highlighting niet zo wil met de HTML tag)

Ziet er goed uit.

[edit]
Werkt goed!!

* Xavier is blij

[ Voor 18% gewijzigd door Xavier op 24-05-2003 14:26 ]

Onderwerpen