Functie aanroepen in JavaScript

Status
Niet open voor verdere reacties.
U

Uturn

Gebruiker
Lid geworden
7 apr 2009
Berichten
100
Hallo, ik ben sinds enkele weken bezig met HTML en JavaScript te leren. Nu loop ik vast op iets dat waarschijnlijk heel simpel is, maar ik zie niet wat ik fout doe.

Ik had een <textarea> op een (html)pagina, die tekst wordt naar een functie gezonden (JavaScript) voor verwerking. Deze functie staat in het <head> gedeelte. De verwerking van de tekst verloopt prima. Maar nu besloot ik dat de gebruiker eerst dmv twee knoppen moet kunnen kiezen uit twee keuzen, waarvan eentje naar dit programma leidt.

Het volgende is de essentie van de code:
HTML: 
<html>
<head>

<script type="text/javascript">

function functieA() {
  ….algoritme dat voorheen werkte. 
}

function functie1() {
  …
  document.write("<form name='InvoerPagina' method='post' action=' '>");
  document.write("<textarea name='Templ' rows=10 cols=80></textarea><br><br>");
  document.write("<input type='submit' name='verzend' value='Verzend' onClick='functieA()'>");
  document.write("</form>");
}

</script>
</head>

<body>

<form name = “KeuzeInvoer” method = “post” action = ' '>
<input type = “submit” name = “InputKeuze” value = “Keuze1” onClick = “functie1()”>
<input type = “submit” name = “InputKeuze” value = “Keuze2” onClick = “functie2()”>
</form>

</body>
</html>
Wanneer ik functie1 met alleen html-code in de <body> zet dan wordt functieA aangeroepen door op de knop te klikken (zoals de bedoeling is). Maar als ik bovenstaande opzet gebruik, dan gaat het in eerste instantie goed: functie1 wordt aangeroepen, maar als ik dan vervolgens, na invoeren van de tekst, op de knop klik kom ik terug in de hoofdpagina (met de twee knoppen), terwijl het de bedoeling is dat het script van functieA in werking treedt.
 
Laatst bewerkt door een moderator:
Je zult in functieA() een

PHP: 
return false;

aan het einde van de code moeten zetten, omdat je op de button geklikt hebt en in principe het formulier dus verstuurd moet worden.

Je kunt ook van:

PHP: 
<input type='submit' name='verzend' value='Verzend' onClick='functieA()'>

maken:

PHP: 
<input type='button' name='verzend' value='Verzend' onClick='functieA()'>
 
Thanks!

Ik heb dat met die buttons geprobeerd, maar dat werkt toch niet (wat is het verschil tussen type='button' en type='submit'?).

Ik heb 'return false' toegevoegd, maar dat werkt ook niet. Misschien omdat functieA een heleboel andere functies aanroept, en op het laatst een functie aanroept die het resultaat in een tabel weergeeft (ook 'return false' toevoegen aan deze laatste functie werkt niet).
Waarom staat er trouwens PHP-code in je antwoord? Mijn programmaatje blijft een client-side script.
 
Hmm, dan weet ik het niet.

Er staat geen PHP-code in mijn script. Ik heb het hier tussen PHP-tags gezet vanwege de betere syntax-highlighting.
 
Hmm, ik dacht dat het een simpel probleem was, als ik die scriptcodes in andere threads zo zie. Hieronder geef ik een werkend script. Mijn vraag is: Waarom wordt functieA() niet geactiveerd?

<html>
<head>
<title>programma</title>

<script type="text/javascript">

function functieA() {
alert("FUNCTIE A");
}

function functie1() {
document.write("<form name = 'KeuzeInvoer' method = 'post' action = ' '>functie 1");
document.write("<input type = 'button' name = 'TweedeKeuze' value = 'Invoer' onClick = 'functieA()'>");
document.write("</form>");
}

function functie2() {
alert("Functie TWEE");
}



</script>


</head>

<body>


<form name = 'KeuzeInvoer' method = 'post' action = ' '>

<input type = 'button' name = 'InputKeuze' value = 'Keuze 1' onClick = 'functie1()'>
<input type = 'button' name = 'InputKeuze' value = 'Keuze 2' onClick = 'functie2()'>

</form>

</body>
</html>



Ik dank iedereen die de moeite neemt er even naar te kijken!
Sorry moderator, weet niet hoe ik die tags kan gebruiken...:eek:
 
Ik denk niet dat je document.write moet gebruiken. Je moet namelijk bepalen waar in je HTML pagina de nieuwe elementen moeten komen. Je moet ze niet na het einde van het document schrijven.
Het element waarin je de nieuwe elementen wil toevoegen moet je dan selecteren en daarin moet je de nieuwe elementen schrijven.

Stel dat je het nieuwe form binnen een div wil plaatsen die het id formContainer draagt.

HTML: 
<div id='formContainer'> </div>
PHP: 
//maak hem eerst leeg, zodat je geen dubbele forms krijgt wanneer de functie vaker aangeroepen wordt.
document.getElementById('formContainer').innerHTML = "";

//voeg het form toe
document.getElementById('formContainer').innerHTML = "<form name='InvoerPagina' method='post' action=' '> <textarea name='Templ' rows=10 cols=80></textarea><br><br> <input type='submit' name='verzend' value='Verzend' onClick='functieA()'></form>";

Er zijn nog veel manieren om dit te doen. De nette manier is bijvoorbeeld gebruik te maken van createElement en appendChild , maar dit werkt ook.
 
Laatst bewerkt:
Ha bedankt!,
Ik zal het eens proberen dit weekend. Ik zal dit eerst een beetje uit moeten zoeken aangezien ik ook nog HTML aan het leren ben. Ik heb nog nooit met <div> gewerkt. Ook niet met createElement en appendChild. Misschien is mijn JavaScript-kunde nog te onderontwikkeld om dit voor elkaar te krijgen.

Maar ik kan hier in ieder geval mee verder...
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan