[JS]Form probleem

[Loev]

Hoi

Voor school moeten een opdracht maken maar omdat ik binnenkort een nieuwe website wil maken met een formulier is het ook direct voor mezelf
Het probleem:
Ik moet een formulier maken met een aantal invoeren velden en deze via javascript laten verschijnen wat er ingevuld is. (zeg maar een soort controle)
Het eerst invul vak laat hij keurig zien maar de rest word niet weer gegeven
Hier de forumulier code:

code:

<form action="" method="get" name="formulier" onSubmit="afhandelen()">
<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">Naam:</td>
    <td width="300"><input name="naam" type="text" size="40"></td>
  </tr>
  <tr>
    <td>Adres:</td>
    <td><input name="adres" type="text" size="40"></td>
  </tr>
  <tr>
    <td>Postcode:</td>
    <td><input name="postcode" type="text" size="40"></td>
  </tr>
  <tr>
    <td>Plaats:</td>
    <td><input name="plaats" type="text" size="40"></td>
  </tr>
  <tr>
    <td>E-mail:</td>
    <td><input name="e-mail" type="text" size="40"></td>
  </tr>
  <tr>
    <td>Opleiding:</td>
    <td><select name="opleiding" size="0">
            <option value="CSMV">CS:MV</option>
            <option value="CO">Communicatie</option>
            <option value="Neus">Neuspeuteren</option>
        </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="submit" type="submit" value="Submit"></td>
  </tr>
</table>
</form>

En de javascript code

code:

<script language="javascript">

//function afhandelen
function afhandelen()

{
document.write(document.formulier.naam.value);
document.write(document.formulier.adres.value);
document.write(document.formulier.postcode.value);
document.write(document.formulier.plaats.value);
document.write(document.formulier.e-mail.value);
}

</script>

Dus de ingevulde naam laat hij zien maar de rest niet

Ik zal vast wel iets heel doms doen... Als jullie een hint willen geven dan stel ik het zeer op prijs.
O'ja ik zit ook te klooien met die drop down box, als iemand daar een paar tips voor heeft heel graag.
http://members.home.nl/h.a.j.loeff/opdracht4.htm <-- ook even online gezet op verzoek

[ Voor 97% gewijzigd door Loev op 26-03-2004 18:14 ]

[djluc]

Zo komt het toch niet in een nieuw venster? :x kijk eens naar window.open. In een nieuw venster kan je dan met opener.formulier.veld.value het formveld benaderen.

[ Voor 38% gewijzigd door djluc op 26-03-2004 17:56 ]

[Loev]

djluc schreef op 26 maart 2004 @ 17:55:
Zo komt het toch niet in een nieuw venster? :x kijk eens naar window.open. In een nieuw venster kan je dan met opener.formulier.veld.value het formveld benaderen.

Uhmm ik bedoel dat als je op submit drukt alles op een schone pagina word weergeven. Er moet dus geen nieuw venster komen

[djluc]

DarkJedi schreef op 26 maart 2004 @ 17:58:
[...]Uhmm ik bedoel dat als je op submit drukt alles op een schone pagina word weergeven. Er moet dus geen nieuw venster komen

Wordt toevallig niet alleen het laatste veld weergegeven? Ik kan me iets herinneren dat document.write de huidige inhoud van het venster vernieuwd.

Heb je toevallig een linkje? Dan is het wat gemakkelijker debuggen.

[ Voor 9% gewijzigd door djluc op 26-03-2004 18:00 ]

[benoni]

Nieuwe pagina met <form method="get" action="nieuwepagina.html"> aanroepen en in die nieuwe pagina een scriptje zetten die de GET string parset, evt. naar variabelen omzet, en print.

[ Voor 12% gewijzigd door benoni op 26-03-2004 18:04 ]

[Loev]

djluc schreef op 26 maart 2004 @ 17:59:
[...]
Wordt toevallig niet alleen het laatste veld weergegeven? Ik kan me iets herinneren dat document.write de huidige inhoud van het venster vernieuwd.

Heb je toevallig een linkje? Dan is het wat gemakkelijker debuggen.

Nee alleen het eerst veld.
Ik zou de boel even online zetten.

benoni schreef op 26 maart 2004 @ 18:02:
Nieuwe pagina met <form method="get" action="nieuwepagina.html"> aanroepen en in die nieuwe pagina een scriptje zetten die de GET string parset, evt. naar variabelen omzet, en print.

Het hoeft niet op een nieuwe pagina, er moet alleen worden afgebeeld wat er is ingevuld als controle zeg maar. Het mag de forumlier pagina gewoon overschrijven.

Ok ik heb het even online gezet:
http://members.home.nl/h.a.j.loeff/opdracht4.htm

[ Voor 47% gewijzigd door Loev op 26-03-2004 18:10 . Reden: blaat ]

[benoni]

DarkJedi schreef op 26 maart 2004 @ 18:07:
Het hoeft niet op een nieuwe pagina, er moet alleen worden afgebeeld wat er is ingevuld als controle zeg maar. Het mag de forumlier pagina gewoon overschrijven.

Ik dacht dat je met een print-opdracht op dezelfde pagina alleen kon aanvullen. Misschien werkt het idd wel als je eerst afsluit met </body> en daarna meer printopdrachten geeft.

Addit: </body> en </html>, in dat geval.
Trouwens, het maakt voor de kijkers thuis eigenlijk niet zoveel uit, of je nou een nieuwe pagina in hetzelfde venster opent, of de pagina 'aanvult'.

[ Voor 24% gewijzigd door benoni op 26-03-2004 18:17 ]

[CrashOne]

alert(document.form[0].veld.value); ?

[benoni]

Hee de pagina laadt zich helemaal opnieuw als je submit klikt.
Moet je even afvangen door het script dat bij submit gestart wordt te laten terugkeren met 'return false'.

Addit:
Zie je wat er gebeurt? Hij voert je script nog wel snel ff uit, maar daarna wil ie meteen het formulier gaan versturen. Omdat er geen action en method boven je form staat denkt ie action="get" en method="doe maar dezelfde pagina". Let maar op de adresregel van je browser, daar zie je de GET string in verschijnen.

Als het stukje Javascript waarmee je de onsubmit() afvangt eindigt met 'return false' dan zal ie begrijpen dat ie het versturen moet afbreken, en blijft de pagina staan.

[ Voor 83% gewijzigd door benoni op 26-03-2004 18:45 ]

[Loev]

De pagina moet helemaal niet blijven staan. Hij moet laten zien wat ik heb ingevuld. Hij laat alleen veld "naam" of [0] zien. De rest niet. Of hij het op een nieuwe pagina laat zien of er gewoon overscheen schrijft kan me eigenlijk niet veel boeie.

[benoni]

DarkJedi schreef op 26 maart 2004 @ 18:54:
Of hij het op een nieuwe pagina laat zien of er gewoon overscheen schrijft kan me eigenlijk niet veel boeie.

Wat moet je dan met je opleiding? Ik zou maar snel een ander vak kiezen.

Om het ff neer te zetten: we hebben nu 3 mogelijke oplossingen voor je probleem.
1. De printmethode op dezelfde pagina
-> moet je alleen wel zorgen dat ie het formulier niet gaat versturen
2. Een methode waarbij je het form wel verstuurt en je gegevens uit de GET haalt
-> moet je dus daarvoor een scriptje maken, kan zelfs op dezelfde pagina
3. Met een Javascript popup venster, zie CrashOne's post

Genoeg aangeboden mogelijkheden... maar je moet wel een beetje willen lezen, termen in google nazoeken, en gaan begrijpen hoe het werkt, dan wordt het pas echt interessant!

Addit: als ik nu wat al teveel op je leraar lijk moet je het zeggen hoor...

[ Voor 59% gewijzigd door benoni op 26-03-2004 19:57 ]

[Verwijderd]

oplossing 1:
maak een paar textboxen en doe bij function afhandelen "document.formname.texbox.value = document.formname.adres.value".

oplossing 2:

code:

var a = document.getElementById("text1");
a.appendChild(document.createTextNode(document.formname.adres.value));
}

en dan dus een divje waar het in komt te staan:

code:

<div id="text1">
<-- 
hier komt text te staan
blaat
-->
</div>

of dus gewoon alerten zoals al eerder verteld is

benoni schreef op 26 maart 2004 @ 19:03:
[...]

Wat moet je dan met je opleiding? Ik zou maar snel een ander vak kiezen.
*knip*

Ik denk (hoop ) niet dat hij op een ICT/(web)design opleiding doelde... Ik denk meer richting middelbare school?

[ Voor 52% gewijzigd door Verwijderd op 26-03-2004 23:05 ]

[benoni]

Dat is nog een stuk mooier dus eerder genoemde oplossingen komen bij deze op plaatsen 3. 4. en 5. Wel de submit afvangen met een return false

[Verwijderd]

benoni schreef op 26 maart 2004 @ 23:03:
Wel de submit afvangen met een return false

of een button van maken ipv een submit

code:

<input name="button"  type="button" onClick="afhandelen()" value="afhandelen" >

Dit moet je dan later wel weer vervangen door een submit als je het form in actie wilt zien

O'ja ik zit ook te klooien met die drop down box, als iemand daar een paar tips voor heeft heel graag.

op wat voor tips doel je ? nog een vraag in gedachte? iets specifieks wat je er mee wilt doen maar nu niet kunt?

[ Voor 42% gewijzigd door Verwijderd op 26-03-2004 23:14 ]

[benoni]

Verwijderd schreef op 26 maart 2004 @ 23:10:
[...]
of een button van maken ipv een submit

Ja, maar gaat het dan niet fout als de gebruiker ipv dattie de button klikt op return drukt?

Voor wat betreft de drop down options zal ie wel bedoelen dat je die als .options array object moet opvragen of zo...

[Verwijderd]

benoni schreef op 26 maart 2004 @ 23:24:
[...]


Ja, maar gaat het dan niet fout als de gebruiker ipv dattie de button klikt op return drukt?

Voor wat betreft de drop down options zal ie wel bedoelen dat je die als .options array object moet opvragen of zo...

return alsin van back? Ik zie niet in waarom het een ramp is als de user een pagina'tje terug gaat? de pagina wordt overigens niet refreshed ofzo bij een button

[benoni]

Nee de return/enter knop toets. De meeste browsers denken dan meteen 'submit!'... ben je je gegevens weer kwijt...

[ Voor 12% gewijzigd door benoni op 26-03-2004 23:38 ]

[Verwijderd]

benoni schreef op 26 maart 2004 @ 23:37:
Nee de return/enter knop. De meeste browsers denken dan meteen 'submit!'... ben je je gegevens weer kwijt...

browsers denken alleen "submit!" bij een submit input type . Bij een button denkt hij alleen "submit!" als de focus er op staat en je drukt op enter. Maar dat is geen probleem aangezien de pagina niet refreshed wordt, dus alle info blijft lekker onaangeroerd staan

edit: even ter illustratie klik. Hier heb ik dus oplossing 2 gebruikt (ik weet het, ik moet nog een keer een removeChild() erbij zetten, ik ben te lui )

[ Voor 27% gewijzigd door Verwijderd op 26-03-2004 23:46 ]

[benoni]

Hij submit volgens mij ook als je focus op een willekeurig veld in het form staat en je drukt op return (zou kunnen dat het browserspecifiek is). Dat van die submitbutton weglaten, daar heb je gelijk in.

Edit: Leuk testertje Ik kan bovenstaande ff niet proberen, geen tekstveld om te focussen.

[ Voor 20% gewijzigd door benoni op 26-03-2004 23:48 ]

[Verwijderd]

benoni schreef op 26 maart 2004 @ 23:43:
Hij submit volgens mij ook als je focus op een willekeurig veld in het form staat en je drukt op return (zou kunnen dat het browserspecifiek is).

idd, bij een submit werkt het als de focus op het form (of een van de elementen hiervan dus) staat dit is zover ik weet niet browserspecifiek.

/me duikt zijn warme bedje in

[ Voor 7% gewijzigd door Verwijderd op 26-03-2004 23:47 ]

[benoni]

Slaap lekker!
Ik denk dat DarkJedi wel ff vooruit kan zo.

[benoni]

Toch nog ff vermelden:

Ik heb getest in Safari (MacOSX) met een form zonder submit button, zonder action, get of onSubmit in de openingstag. Als je in een tekstveld staat en op de returntoets drukt herlaadt het document en ben je de inhoud kwijt

[crisp]

input elementen hoeven niet in een form hoor

[Verwijderd]

benoni schreef op 27 maart 2004 @ 00:06:
Toch nog ff vermelden:

Ik heb getest in Safari (MacOSX) met een form zonder submit button, zonder action, get of onSubmit in de openingstag. Als je in een tekstveld staat en op de returntoets drukt herlaadt het document en ben je de inhoud kwijt

Ik heb het ook even geprobeerd, maar bij mij heb ik dit probleem niet. Ik stuitte overigens wel op de volgende fout: e-mail is een invalid naam in javascript. Het "-" teken is verboden maak er even mail van. ik heb hem hier even online gezet . Ik heb maar meteen een validation toegevoegd die checked of overal iets in staat en hij alert de value's.

crisp schreef op 27 maart 2004 @ 09:58:
input elementen hoeven niet in een form hoor

ik denk dat het uiteindelijk de bedoeling is dat hij het hele zooitje submit met php? dan is het wel handig om het in een form te hebben

[ Voor 18% gewijzigd door Verwijderd op 27-03-2004 10:04 ]

[Loev]

Ben net begonnen met javascript, snap er nog niet echt veel soeps. Dus als jullie zeggen wel even return false doen dan snap ik daar geen hol van.

Eindopdracht:
In de eindopdracht met je een formulier maken waarbij gebruikers gegevens kunnen invoeren (bv NAW gegevens en evt email-adressen etc) en jij moet deze invoer checken of er aan bepaalde voorwaarden is voldaan. Dit invoerformulier moet te gebruiken zijn in je Digitaal Portfolio.
Eisen:
-netjes opgemaakte code met op je juiste plaatsen commentaarregels die de code toelichten
-10 invoervelden voor de gebruiker waarbij ook een drop-downbox, een message-box, radio-buttons en een checkboxveld moeten worden gebruikt.
-tenminte vier ”opmaak”scriptjes die van het internet zijn gehaald en herbruikt in je code (bronvermelding!)
-check of de postcode een postcode is (Hint: gebruikt ascii tabel, de methoden fromCharCode en CharCodeAt van String)
-checken of het een geldig mailadres is
-indien onjuiste invoer is gegeven (of te weinig) juiste feedback geven aan gebruiker en hernieuwd om invoer vragen
Inleveren
-een link naar je web-site waar het formulier staat.


Gelet wordt op:
-de netheid van de code
-de bronvermeldingen indien code wordt hergebruikt
-de werking van het formulier
-de afwerking van het geheel (dus layout, kleurgebruik, interactie met gebruiker)

Dat is de opdracht, dus het maakt niet veel uit volgens mij dat de data de form overschrijft.

Verwijderd schreef op 27 maart 2004 @ 10:00:
[...]

Ik heb het ook even geprobeerd, maar bij mij heb ik dit probleem niet. Ik stuitte overigens wel op de volgende fout: e-mail is een invalid naam in javascript. Het "-" teken is verboden maak er even mail van. ik heb hem hier even online gezet . Ik heb maar meteen een validation toegevoegd die checked of overal iets in staat en hij alert de value's.

Hey bedankt man. Moet alleen dat alert vervangen. Alles moet één pagina worden weergegeven.

[ Voor 19% gewijzigd door Loev op 28-03-2004 21:18 ]