Toon posts:

[JS] waarde variable meenemen bij het posten van een FORM *

Pagina: 1
Acties:
  • 136 views sinds 30-01-2008
  • Reageer

vrijdag 10 september 2004 15:06

Acties:

Verwijderd

Topicstarter
Ik heb een HTML-pagina met daarin een FORM.
Onderstaande code geeft weer wat ik heb:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>

<head>
<title>Post Market Surveillance Questionnaire</title>
</head>

<body>

<form method="POST" action="http://www.cuci.nl/cgi-bin/mailto" name="form">
    <input type="hidden" name="sendmail_to" value="MIJNEMAILADRES">
    <input type="hidden" name="sendmail_subject" value="PMS">
    <input type="hidden" name="next_url" value="thankyou_pms.htm">
    <input type="hidden" name="sendmail_body" value="
        Bedrijf: ${company}
        Land:    ${country}">
  
  <p> Company name: <input type="text" name="company" size="20"> </p>
  <p> Country:      <input type="text" name="country" size="20"> </p>
  <p> <input type="submit" value="Submit" name="B1">
      <input type="reset" value="Reset" name="B2"> </p>
</form>

</body>
</html>


Als iemand op de SUBMIT-knop drukt wordt keurig een mailtje afgeleverd in mijn e-mailbox met als inhoud de waarden van de ingevulde velden.


Nu wil ik echter in dit formulier een element toevoegen:
Een "Selection Box" met waarden, waarbij de volgorde van deze waarden door een bezoeker kan worden aangepast. De gekozen volgorde van waarden is dan het resultaat van deze box.
(Moeilijk te omschrijven, maar hier vind je wat ik bedoel)

Op de site van javascript.internet.com heb ik een mooi script gevonden, wat dit kan.
Echter het lukt mij niet om dit script te integreren in mijn Form.

Het JAVA-script bestaat o.a. uit deze actie.
code:
1
2
3
4
5
6
7
8
9

function submitForm() {
 var list = document.form.list;
 var theList = "";
 for (i = 0; i <= list.options.length-1; i++) { 
     theList += list.options[i].value + "=" + list.options[i].text;
     if (i != list.options.length-1) theList += "&";
 }
 location.href = document.form.action + theList;
}

Het vult de variabele 'theList' met de volgorde van de waarden.

In plaats van de regel "location.href = document.form.action + theList;" zal ik iets anders moeten verzinnen om de variabele 'theList' mee te laten nemen in mijn Form dat bovenaan deze post staat.

Ik heb de gehele ochtend vanalles geprobeerd, maar het lukt mij echter niet.
Wie kan mij een duwtje in de goede richting geven?

vrijdag 10 september 2004 15:51

Acties:
  • Pinobigbird
  • Registratie: Januari 2002
  • Laatst online: 22:11

Pinobigbird

doesn't share food!

Je kan bijvoorbeeld in je form 4 hidden inputs maken en die vanuit de functie laten veranderen met de juiste waarde:

HTML:
1
2
3
4

<input type="hidden" name="eerste">
<input type="hidden" name="tweede">
<input type="hidden" name="derde">
<input type="hidden" name="vierde">


JavaScript:
1
2
3
4
5
6

function submitForm() {
  document.form.eerste = document.form.list.options[0].value;
  document.form.tweede = document.form.list.options[1].value;
  document.form.derde = document.form.list.options[2].value;
  document.form.vierde = document.form.list.options[3].value;
}

Joey: Nice try. See the Netherlands is this make believe place where Peter Pan and Tinkerbell come from.
https://kattenoppasleiderdorp.nl
PV: 3080Wp ZO + 3465Wp NW = 6545Wp totaal 13°tilt

vrijdag 10 september 2004 16:00

Acties:
  • ronaldmathies
  • Registratie: Juni 2001
  • Niet online

ronaldmathies

Even voor de duidelijkheid, Javascript is geen Java. Dit is een misvertand wat veel mensen hebben. Dus ik raad je ook aan in het vervolg de topic titel te laten beginnen met [Javascript] omdat anders mensen die wel veel weten van Javascript niet gaan kijken omdat ze Java zien staan.

3015 Wp-z 5360 Wp-nno op 2 x SMA-SB3600 TL-21, Warmtepomp: ERSC-VM2CR2 / PUHZ-SHW140 YHA, WTW Q350, EV Kia Ev6 GT-Line

vrijdag 10 september 2004 16:28

Acties:
  • gorgi_19
  • Registratie: Mei 2002
  • Laatst online: 19:24

gorgi_19

Kruimeltjes zijn weer op :9

P&W FAQ - HTML / javascript /css, etc...

>> Webdesign & Graphics

Digitaal onderwijsmateriaal, leermateriaal voor hbo

vrijdag 10 september 2004 17:24

Acties:

Verwijderd

Topicstarter
Pinobigbird's opmerking heb ik trachten toe te passen (zie code).


code:
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
54
55
56
57
58
59
60

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
function move(index,to) {
 *KNIP*}

function variabelen_vullen() {
  document.form.eerste = document.form.list.options[0].value;
  document.form.tweede = document.form.list.options[1].value;
  document.form.derde  = document.form.list.options[2].value;
  document.form.vierde = document.form.list.options[3].value;}
</script>
</head>

<body>
<form method="POST" action="http://www.cuci.nl/cgi-bin/mailto" name="form">
    <input type="hidden" name="sendmail_to" value="MIJNEMAILADRES">
    <input type="hidden" name="sendmail_subject" value="PMS">
    <input type="hidden" name="next_url" value="thankyou_pms.htm">
    <input type="hidden" name="sendmail_body" value="

           Bedrijf: ${company}
           Land:    ${country}
    
           Waarde 1: ${eerste}
           Waarde 2: ${tweede}
           Waarde 3: ${derde}
           Waarde 4: ${vierde}">
  
    <input type="hidden" name="eerste" value="initiele waarde 1">
    <input type="hidden" name="tweede" value="initiele waarde 2">
    <input type="hidden" name="derde"  value="initiele waarde 3">
    <input type="hidden" name="vierde" value="initiele waarde 4">


<select name="list" size="4">
<option value="1">item-A</option>
<option value="2">item-B</option>
<option value="3">item-C</option>
<option value="4">item-D</option>
</select>

<br><br>

<input type="button" value="up" 
onClick="move(this.form.list.selectedIndex,-1)"><br><br>

<input type="button" value="down"
onClick="move(this.form.list.selectedIndex,+1)">

  <p> Company name: <input type="text" name="company" size="20"> </p>
  <p> Country:      <input type="text" name="country" size="20"> </p>
 
 <p> <input type="submit" value="Submit" onclick="variabelen_vullen()" name="B1">
      <input type="reset" value="Reset" name="B2"> </p>
</form>

</body>
</html>


Als de gebruiker dus op de Submit-knop drukt, wordt het Script 'variabelen_vullen()' uitgevoerd, en worden de initiele waarden overschreden.

Echter, dit leidt bij mij tot het volgende resultaat:

Bedrijf: TESTcompany
Land: TESTcountry
Waarde 1: initiele waarde 1
Waarde 2: initiele waarde 2
Waarde 3: initiele waarde 3
Waarde 4: initiele waarde 4

Nu is de vraag: wordt het stukje Script 'variabelen_vullen()' niet uitgevoerd, of is er iets anders dat niet klopt?

vrijdag 10 september 2004 18:42

Acties:
  • Pinobigbird
  • Registratie: Januari 2002
  • Laatst online: 22:11

Pinobigbird

doesn't share food!

Sorry, klein foutje:
code:
1

document.form.eerste
moet zijn
code:
1

document.form.eerste.value
enz.

Joey: Nice try. See the Netherlands is this make believe place where Peter Pan and Tinkerbell come from.
https://kattenoppasleiderdorp.nl
PV: 3080Wp ZO + 3465Wp NW = 6545Wp totaal 13°tilt

vrijdag 10 september 2004 18:54

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:12

crisp

Devver

Pixelated

Verwijderd schreef op 10 september 2004 @ 17:24:
Pinobigbird's opmerking heb ik trachten toe te passen (zie code).

[...]
Nu is de vraag: wordt het stukje Script 'variabelen_vullen()' niet uitgevoerd, of is er iets anders dat niet klopt?
Gebruik liever de onsubmit eventhandler op het form-element in plaats van onclick op je button; je kan met het "this" keyword al meteen een referentie naar je formulier meegeven zodat het name-attribuut op je form overbodig is.
Verder verdient het aanbeveling niet de dot-notatie te gebruiken maar gebruik te maken van de elements-collectie van het form-object.

Voor wat betreft het doorsturen van volgordes enzo gebruik ik altijd een hidden field waarin ik de betreffende waarden komma-seperated opsla; op die manier is het ook nog eens uitbreidbaar, en serverside kan je met een simpele explode alles zo weer in de juiste volgorde in een array zetten.

Intentionally left blank

vrijdag 10 september 2004 19:21

Acties:

Verwijderd

Topicstarter
:) Thanks PinoBigBird :)
crisp schreef op 10 september 2004 @ 18:54:
Gebruik liever de onsubmit eventhandler op het form-element in plaats van onclick op je button;
Ik heb 'onClick=' vervagen door 'onSubmit=' maar gek genoeg blijkt dit niet te werken.
crisp schreef op 10 september 2004 @ 18:54:
je kan met het "this" keyword al meteen een referentie naar je formulier meegeven zodat het name-attribuut op je form overbodig is.
Dit snap ik niet helemaal. Hoe komt dat dan bij mij uit te zien?
crisp schreef op 10 september 2004 @ 18:54:
Verder verdient het aanbeveling niet de dot-notatie te gebruiken maar gebruik te maken van de elements-collectie van het form-object.
De betekenis hiervan moet ik gaan uitpluizen. Mijn kennis van JS is nog niet toereikend.
crisp schreef op 10 september 2004 @ 18:54:
Voor wat betreft het doorsturen van volgordes enzo gebruik ik altijd een hidden field waarin ik de betreffende waarden komma-seperated opsla; op die manier is het ook nog eens uitbreidbaar, en serverside kan je met een simpele explode alles zo weer in de juiste volgorde in een array zetten.
Hier heb ik ook een stukje JS voor gevonden. Ik ga dat direct eens uitproberen.

[ Voor 3% gewijzigd door Verwijderd op 10-09-2004 19:37 . Reden: typo's ]

vrijdag 10 september 2004 19:53

Acties:
  • Exigence
  • Registratie: Juli 2001
  • Laatst online: 00:49

Exigence

dnkroz

Verwijderd schreef op 10 september 2004 @ 19:21:
[...]
Ik heb 'onClick=' vervagen door 'onSubmit=' maar gek genoeg blijkt dit niet te werken.
code:
1
2

<form onSubmit="blaat">
</form>


De handler op het form element dus, en iet op de button ;)

vrijdag 10 september 2004 22:00

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:12

crisp

Devver

Pixelated

om precies te zijn:
HTML:
1

<form action="iets" method="post" onsubmit="blaat(this)">

en in JS:
JavaScript:
1
2
3
4
5
6
7

function blaat(form) {
  var options = form.elements['myselect'].options, arr = [];
  for (var i = 0; i < options.length; i++) {
    arr[i] = options[i].value;
  }
  form.elements['hiddenfield'].value = arr.join(',');
}

Intentionally left blank

Pagina: 1
Reageer