[ASP & javascript] Form verversen..

[Predje]

Yo tweakers,

Ik heb een probleemje.
Ik ben een form aan het opzetten met daarin 2 pulldown menuutjes.
In menu A staat bijv de hoofdverdeling (games) en menu 2 is nog leeg.
Zodra iemand dan op bijv games klikt dan komt er automatisch in menu 2 de onderverdeling te staan dus bij ut, qIII, XIII enz.

Het gebeuren met het maken van de pulldown menuutjes heb ik al gedaan en dit word gedaan d.m.v asp. Alle waarden van rij 1 komen in menu A te staan.

Dit haal ik dus uit een DB d.m.v van een SQL query.

Het mooiste zijn dan dus ook zijn dat op de pagina alleen pulldown menu B ververst wordt door een nieuwe SQL query afhankelijk van de opgegeven waarde in menu A.

Snap iemand dit

Greetz Predje

[Amras]

Ja ik snap het wel, maar volgens mij gaat het niet echt werken. Als de user namelijk iets selecteerd uit de lijst dan is alles al van de server naar de client gestuurd en kun je geen SQL query meer uitvoeren op de server zonder de pagina te refreshen. Wat je wel kunt doen is alle data gelijk laden in 1 query en dan dmv javascript clientside de tweede list vullen.

[crisp]

XmlHTTP of eventueel communicatie via een (hidden) (i)frame?

[BlaTieBla]

Je kan onChange (JS) gebruiken bij Pulldown A.
Bij verandering Pulldown A wordt kan de pagina opnieuw worden opgebouwd met de betreffende waarden uit de DB.

Ook een mogelijkheid is om alles op voorhand in een array te laden (javascript) en middels clientside scripting die boel te tonen.

[faabman]

waarom laat je niet gewoon de hele handel in een array / xml en lees je vervolgens aan de hand van de value van select 1 uit welke opties select 2 moet krijgen...

oke, dat zei amras dus ook al (lezen is moeilijk ), hier http://xmlx.ca/articles/592.aspx heb je misschien wat aan, is i.e. only, maar, werkt wel en is met wat javascript kennis vast wel browser-compatible te maken...

[ Voor 41% gewijzigd door faabman op 17-02-2004 18:05 ]

[Predje]

Amras schreef op 17 februari 2004 @ 17:54:
Ja ik snap het wel, maar volgens mij gaat het niet echt werken. Als de user namelijk iets selecteerd uit de lijst dan is alles al van de server naar de client gestuurd en kun je geen SQL query meer uitvoeren op de server zonder de pagina te refreshen. Wat je wel kunt doen is alle data gelijk laden in 1 query en dan dmv javascript clientside de tweede list vullen.

Mja ok maar dat zou dan wel heel langzaam worden. Maargoed hoe kan ik dan opgeven na het kiezen van een waarde in menu 1 de pagina automatisch ververst word. dan los ik het zelf verder wel op met asp.

[faabman]

Predje schreef op 17 februari 2004 @ 18:01:
[...]


Mja ok maar dat zou dan wel heel langzaam worden. Maargoed hoe kan ik dan opgeven na het kiezen van een waarde in menu 1 de pagina automatisch ververst word. dan los ik het zelf verder wel op met asp.

in je <select> een onchange="document.forms['formuliernaam'].submit();"


of onchange="document.getElementById('formulierID').submit();"

[Amras]

Predje schreef op 17 februari 2004 @ 18:01:
[...]


Mja ok maar dat zou dan wel heel langzaam worden. Maargoed hoe kan ik dan opgeven na het kiezen van een waarde in menu 1 de pagina automatisch ververst word. dan los ik het zelf verder wel op met asp.

Als je heeeeeel veel data hebt zou het weleens langzaam kunnen zijn ja, maar het voordeel is dat je een pagina maar 1 keer hoeft te laden. Als je bij iedere keuze in de lijst je pagina refresht is het vrij irritant als je dat 20 keer moet doen. Maar dat is mijn persoonlijke mening

Er is iig van alles mogelijk

[Predje]

Ik heb er echt superveel data inzitten (128985 records).
En bijvondien hoeft met het pull-down menu de pagina doorgaans maar 1 keer veranderd te worden. Dus dan is geheel verversen denk ik sneller.
Alleen iets minder proffecioneel als je het mij vraagt

[Predje]

FvKnijff schreef op 17 februari 2004 @ 18:06:
[...]
in je <select> een onchange="document.forms['formuliernaam'].submit();"


of onchange="document.getElementById('formulierID').submit();"

Alleen maar zo`n regeltje?? Dit werkt dus niet bij mij he..

Ik heb bij form staan

code:

<form name="wijzigdb" method="post" action="wijzig.asp">

en dan heb ik in de select staan

code:

<select name="pulldown1" onchange="document.getElementById('wijzigdb').submit();">

En dit werkt niet.. (andere regel is precies hetzelfde)
Krijg dan onder op de pagina een foutmelding te zien "De eigenschap of methode wordt niet ondersteunt voor dit object".

Asp kan ik wel maar javascript heb ik me nog niet in verdiept..

So can anyone help me?

[Janoz]

Omdat id niet name is en name niet id

[Predje]

Janoz schreef op 18 februari 2004 @ 10:28:
Omdat id niet name is en name niet id

goh!

Heb je ook nog een oplossing?
ik heb al geprobeerd

code:

<"form name="wijzigdb" id="wijzigdb">

maar dit werkt niet..

[P_de_B]

code:

<"form name = "wijzigdb" id="1">

let er wel op dat 1 dan uniek voor dit element is

[Rickets]

P_de_B schreef op 18 februari 2004 @ 11:06:

code:

<"form name = "wijzigdb" id="1">

let er wel op dat 1 dan uniek voor dit element is

Je bedoelt uniek voor het document
Bovendien is dat geen geldig id.

Gebruik beter de forms-collectie ipv id's, dat hoort te werken en dan hoef je niet overal id's neer te zetten.

[ Voor 12% gewijzigd door Rickets op 18-02-2004 11:18 ]

[Predje]

tering man het wil maar niet werken!!
zo moeilijk kan het toch niet zijn

dit is het form element;

code:

<form name="wijzigdb" action="btvw.asp" method="POST">

en dan is het select element;

code:

<select name="onderwerp" onchange="document.forms['wijzigdb'].submit();">

Maar het wil maar niet werken.. telkens als ik in de pulldown een andere optie kies krijg ik in de statusbalk zin geel uitoepteken....

[Rickets]

Dat hoort te werken
Zet het document waar het niet werkt eens online

[Janoz]

Dit is meer een javascript probleem nu en dat hoort bij de buren. Misschien is het trouwens handig om op het uitroeptekentje te klikken, dan krijg je je preciese foutmelding .

P&W -> W&G

[Predje]

nouja hier dan maar de hele code

code:

<HTML>
<head>
<title>Op deze pagina kun je boeken toevoegen aan de database van  - Wesley Vogels</title>
<STYLE>
<!--
        input,textarea,select
        input.form {background-color: #ffffff; border: 1px groove black; color: #000000;}
        A:link { color: #ffffff; text-decoration: none;}
        A:visited { color: #ffffff; text-decoration: none;}
        A:active { color: #ffffff; text-decoration: none;}
        A:hover { color: #ffffff; text-decoration: none;}
    //-->
</STYLE>

</head>

<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" topmargin="2">


<font face="arial" size="2">
<b>
Hieronder kun je een nieuw boek toevoegen aan de database die gebruikt word voor </b><br>
Zorg ervoor dat je alle gegevens invult en op een correcte manier.<BR>
Velden met <font color="red">*</font> erachter zijn verplicht!.<br><br><center><font size="3"><b>
<% 
msg= request.querystring("msg")

If msg = "geenill" Then %>
<font color="red">Fout!</font> Je hebt geen keuze gemaakt bij de illustraties.
<% ElseIf msg = "geenfor" Then %>
<font color="red">Fout!</font> Je hebt geen keuze gemaakt bij de bindwijze.
<% ElseIf msg = "geenon" Then %>
<font color="red">Fout!</font> Je hebt geen keuze gemaakt bij het onderwerp.
<% ElseIf msg = "gelukt" Then %>
Je hebt met succes een boek toegevoegd aan de database! 
<%
Else
End If %>
</center></font></b>
<form name="wijzigdb" action="btvw.asp" method="POST">
<table>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Auteur</b></td>
    <td><input type="text" name="auteur" size="40" maxlength="100"><font color="red">*</font></td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Titel</b></td>
    <td><input type="text" name="titel" size="40" maxlength="100"><font color="red">*</font></td>
</tr>

<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Prijs</b></td>
    <td><input type="text" name="euro" size="10" maxlength="3"> Euro</td>
</tr>
<tr>
    <td></td>
    <td><input type="text" name="eurocent" size="10" maxlength="2"> Eurocent</td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Afmeting</b></td>
    <td><input type="text" name="lengte" size="10" maxlength="2"><font color="red">*</font> cm (lengte)</td>
</tr>
<tr>
    <td></td>
    <td><input type="text" name="breedte" size="10" maxlength="2"><font color="red">*</font> cm (breedte)</td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Pagina</b></td>
    <td><input type="text" name="pagina" size="10"><font color="red">*</font></td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Bestelnr</b></td>
    <td><input type="text" name="bestelnr" size="10" maxlength="10"><font color="red">*</font></td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Bindwijze</b></td>
    <td><input type="radio" name="formaat" value="gebonden">  Gebonden <input type="radio" name="formaat" value="paperback"> Paperback <font color="red">*</font> </td>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Illustraties</b></td>
    <td><select name="illustraties">
    <option value="geen" SELECTED>kies</option>
    <option value="kl">in kleur</option>
    <option value="zw">in zwart / wit</option>
    <option value="mo">in mono</option>
    <option value="mt">met tekeningen</option>
    <option value="pt">en patronen</option>
    </select><font color="red">*</font></td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Onderwerp</b></td>
    <td><select name="onderwerp" onchange="this.form.submit();">

<option value="leeg">selecteer</option><%
'Declareer de variabele voor de connectiestring (StringConnectie -> strCon)
Dim strCon

' Zet de connectiestring in de variabele. Hier is dit dus een ODBC connectie.
accessDB = server.mappath("../../cgi-bin/boekendb.mdb")
strCon = "PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA SOURCE="
strCon = strCon & accessDB & ";"


' Maak een serverobject aan voor de connectie (ObjectConnectie -> objCon)
Dim objCon
Set objCon = Server.CreateObject ( "ADODB.Connection" )

' Open de verbinding met de database. Voor objCon wordt er een 
' verbinding geopend met opgegeven database.
objCon.Open strCon

' De SQL query om de gegevens uit de database te halen.
SQL = "SELECT DISTINCT Categorie FROM tblCatOnd ORDER BY Categorie"

' Plaats de gegevens van de SQL Query in de recordset objRec.
set objRec = objCon.execute(SQL)

' Herhaal het onderstaande totdat het einde van de recordset is bereikt.
' Zet de waarde van de recordset van alle velden tussen de <td></td> tags. 
' Bij elke loop word er een rij van de tabel neergezet.
Do While Not objRec.EOF

onderwerp = objRec.Fields("Categorie").Value

%>
<option value="<%= onderwerp%>"><%= onderwerp%></option>
<%

' Ga naar het volgende record om de waarden in een nieuwe rij te laten zien.
objRec.MoveNext
Loop

' Sluit de verbinding en maak alle variabelen leeg. Dit is erg belangrijk!!
objRec.Close
Set objRec = Nothing
objCon.close
set objCon = Nothing 

%>

</select> of een nieuw onderwerp <input type="text" name="nieuwonderwerp"><font color="red">*</font></td>
</tr>
<tr>
    <td bgcolor="#9F9F9F" STYLE="border-style: solid; border-width: 2; border-color: white"><b>Omschrijving</b></td>
    <td><textarea name="omschrijving" cols="60" rows="8"></textarea><font color="red">*</font></td>
</tr>
<tr>
    <td><input type="submit" name="submit" value="voeg toe"></td>
    <td><input type="reset" name="reset" value="opnieuw"</td>
</tr>
    
</table>
</form>
</font>
</body>  
</HTML>

en de foutmelding =
Deze eigenschap of methode wordt niet ondersteund door dit object


Let BTW op de nette code opbouw

[ Voor 26% gewijzigd door Predje op 18-02-2004 11:59 ]

[Rickets]

Haal de name="submit" eens weg, die overschrijft de javascript-submit-methode.

_{Ik zal niet letten op de code-opbouw}

[ Voor 31% gewijzigd door Rickets op 18-02-2004 12:06 ]

[Predje]

Rickets schreef op 18 februari 2004 @ 12:06:
Haal de name="submit" eens weg, die overschrijft de javascript-submit-methode.

_{Ik zal niet letten op de code-opbouw}

Hehe hij doet het!! thx m8