[JS] Informatie aanroepen uit een form in andere html file

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

  • HariZ
  • Registratie: December 2000
  • Laatst online: 16-02 21:51
Ik ben al een hele tijd aan het zoeken (zowel in JavaScript boekjes als op internet) naar de oplossing voor het probleem dat ik heb, maar ik kan nergens de juiste oplossing vinden. Het volgende is aan de hand:

Ik ben bezig een formulier te maken waarop mensen een naam in kunnen vullen. Vervolgens wil ik dat de variabelen uit dat formulier worden overgebracht naar een ander html document en daarin worden weergegeven. Ik heb geen mogelijkheid tot gebruik van CGI, PHP of andere betere script-talen waarmee ik dit wel zelf makkelijk zou kunnen oplossen omdat de pagina lokaal op pc's moet kunnen draaien met windows 98 en IE4 of hoger. ActionScript (wat ik wel goed beheers) is ook geen optie want het is niet zeker of alle pc's die dit moeten draaien wel flash hebben geïnstalleerd (niet iedereen zonder internet heeft Flash).

Wat ik nu dus heb:

index.html bevat het volgende formulier:

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
<form name="info" method="post" action="result.html">
<table width="400" border="0">
  <tr>
    <td>Naam 1:</td>
    <td><input name="naam1" type="text" size="30"></td>
  </tr>
  <tr>
    <td>Naam 2:</td>
    <td><input name="naam2" type="text" size="30"></td>
  </tr>
  <tr>
    <td>Naam 3:</td>
    <td><input name="naam1" type="text" size="30"></td>
  </tr>
  <tr>
    <td>Naam 4:</td>
    <td><input name="naam1" type="text" size="30"></td>
  </tr>
  <tr>
    <td>Naam 5:</td>
    <td><input name="naam1" type="text" size="30"></td>
  </tr>
  <tr>
      <td>Groep:</td>
    <td><select name="groep">
            <option value="Groep 1" selected>Groep 1</option>
            <option value="Groep 2">Groep 2</option>
            <option value="Groep 3">Groep 3</option>
            <option value="Groep 4">Groep 4</option>
        </select></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
    <input type="reset" name="Reset" value="Wis alle velden">
    <input type="submit" name="Submit" value="Doorgaan">
    </td>
  </tr>
</table>


Ik wil dus graag de variabelen van dit fomulier doorsturen naar result.html die in principe nu nog helemaal leeg is maar waarin ik dus gewoon de namen en de groep wil weergeven als tekst in de html :)

Ik heb een beetje in boekjes en op internet gezocht en ik vond dat het mogelijik moest zijn dmv een code als:
code:
1
2
3
<script language="JavaScript">
    document.write(document.info.naam1.value)
</script>


Maar dat werkt ook niet goed. Ik heb zelf het idee dat ik in de result.html nog op een of andere manier de variabelen moet aanroepen of op een of andere manier moet aangeven waar de variabelen weg komen ofzo, maar gezien mijn kennis van JavaScript erg klein is en ik niks kon vinden mbt dit probleem, kom ik hier niet uit.

Wie heeft voor mij de oplossing zodat ik in results.html mijn variabelen uit index.html kan weergeven zonder gebruik van CGI/PHP/ASP/JSP?

  • Pelle
  • Registratie: Januari 2001
  • Laatst online: 11:08

Pelle

🚴‍♂️

Post je formulier met method="get", dan kun je met JS je query-string uitlezen (document.location.search). Even wat slimme split-functies toepassen en je kunt er een associatieve array van key/value pairs van maken.
Met document.write kun je die dan naar je pagina schrijven. Zoek maar eens naar location.search, dan moet je er wel uit komen... is wel vaker langs gekomen :)

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:19

crisp

Devver

Pixelated

als je je formmethod veranderd in "GET" krijg je je variabelen in de URL mee:
code:
1
result.html?naam1=bla&naam2=piep&....

met javascript kan je de meegegeven variabelen uitlezen mbv:
code:
1
var urlVars = window.location.search;

daar komt dan alles vanaf de '?' in te staan; nu moet je nog de variabelen uit weten te splitsen en met document.write in je document schrijven.

Intentionally left blank


  • HariZ
  • Registratie: December 2000
  • Laatst online: 16-02 21:51
Bedankt! Dit was alles wat ik nodig had... Nu kom ik er wel uit! :)

  • HariZ
  • Registratie: December 2000
  • Laatst online: 16-02 21:51
Oké toch nog een klein vraagje. Ik heb met de search de code:
code:
1
2
3
4
5
6
var tmp=this.location.href;
tmp=tmp.substr(tmp.indexOf("?")+1,tmp.length);
var args=new Array();
for(var i=0;i<tmp.split("&").length;i++){
    args[tmp.split("&")[i].split("=")[0]]=tmp.split("&")[i].split("=")[1];
}

gevonden... Volgens mij moet dit nu dus aan te roepen zijn in de html met een document.print dus maak ik er in result.html het volgende van:
code:
1
2
3
4
5
6
7
8
9
<script language="JavaScript">
var tmp=this.location.href;
tmp=tmp.substr(tmp.indexOf("?")+1,tmp.length);
var args=new Array();
for(var i=0;i<tmp.split("&").length;i++){
    args[tmp.split("&")[i].split("=")[0]]=tmp.split("&")[i].split("=")[1];
}
    document.write(args['naam1'])
</script>

Alleen hij zet nog steeds niet goed de variabele naam1 neer in het document. Misschien is dit wel een hele stomme vraag en doe ik iets helemaal verkeerd hoor, maar ik heb echt meer dan 25 keer geprobeerd zulke dingen aan te roepen uit de string... Heb ook geprobeerd met
code:
1
2
3
4
5
<script language="JavaScript">
    var name1;
    name1 = request.querystring("naam1");
    document.write(name1)
</script>

Maar dat geeft even weinig resultaat als wat ik met de search had gevonden...

Verwijderd

var QueryString = new Array();
tmpArr = location.search.substring(1).split("&");
for(i=0;i<tmpArr.lengt;i++)
{
sArr = tmpArr[i].split("=");
QueryString[sArr[0]] = unescape(sArr[1]);
}

Lees ze nu uit met
QueryString["naam1"]

  • HariZ
  • Registratie: December 2000
  • Laatst online: 16-02 21:51
ok dus dan wordt het zoiets?
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>Resultaat</title>
</head>
<body>
<script language="JavaScript">
var QueryString = new Array();
tmpArr = location.search.substring(1).split("&");
for(i=0;i<tmpArr.lengt;i++)
{
sArr = tmpArr[i].split("=");
QueryString[sArr[0]] = unescape(sArr[1]);
}
document.write(QueryString["naam1"])
</script>
</body>
</html>


maar dan krijg ik in de html te zien:
undefined

Wat doe ik nu nog verkeerd? :?

Verwijderd

typo:
<html>
<head>
<title>Resultaat</title>
</head>
<body>
<script language="JavaScript">
var QueryString = new Array();
tmpArr = location.search.substring(1).split("&");
for(i=0;i<tmpArr.length;i++)
{
sArr = tmpArr[i].split("=");
QueryString[sArr[0]] = unescape(sArr[1]);
}
document.write(QueryString["naam1"])
</script>
</body>
</html>

met aanroep:
x.htm?naam1=cj

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:19

crisp

Devver

Pixelated

Offtopic:

we hebben hier speciale [ code ] tags voor het posten van code:
code:
1
hier je code

eventueel kan je ook nog een type aangeven; bijvoorbeeld [ code=js, 1 ] (javascript, begin met regelnummer 1):
JavaScript:
1
2
3
4
5
function myFunction() {

  //bla

}

en natuurlijk de speciale [ php ] tag met kleurtjes:
PHP:
1
echo "mooie kleurtjes";

:)

Intentionally left blank


  • HariZ
  • Registratie: December 2000
  • Laatst online: 16-02 21:51
Tnx! hij doet het nu perfect! :)
Pagina: 1