Javascript voor het invullen van het attribuut "action" bij submit

Status
Niet open voor verdere reacties.

JohanDerks

Verenigingslid
Lid geworden
2 dec 2006
Berichten
82
Ik heb een formulier "fontVortMetodo", dat ik gedeclareerd heb als var fM = document.forms["fontVortMetodo"]; De user heeft de keuze verder te gaan naar een van de volgende pagina's: 1. private_php/Zamenhofa.php, 2. private_php/intereuropeco.php of 3. private_php/tutmondeco.php one Ik laat hem die keuze maken met een van de radiobuttojn genaamd "select". Dan moet hij een knop indrukken, die de output van de pagina doorstuurt naar de gekozen pagina. Daarvoor gebruikte ik de functie
function destinu() {
if (fM.elements("select")[0].checked) {fM.action = "private_php/Zamenhofa.php"; }
else if (fM.elements("select")[1].checked) {fM.action = "private_php/intereuropeco.php"; }
else if (fM.elements("select")[2].checked) {fM.action = "private_php/tutmondeco.php"; }
}
(Ook dacht ik aan getElementsByName("select"), want de drie buttons hebben alle drie dezelfde naam.)
Ik kreeg als foutmelding "fM.elements("select")[0].checked is not a function". Moet ik misschien proberen
var destiny = getElementsByName("elekt")
en dan verder met
if (destiny[0].checked) of if (destiny[0].checked == true).
Iemand raadde mij jQuery aan, maar op mijn leeftijd begin ik niet meer aan het leren van een andere programmeertaal, die naar mijn indruk helemaal voor dit soort vrij eenvoudige problemen niet nodig is. Ik beheers javascript zelf, als amamteur programmeur voor Esperanto-doeleinden, nog onvoldoende (en PHP).
Ook voor Javascript heb ik geen naslagwerk, maar dat is niet dringend nodig. Wel, als niemand mij kan helpen, voor jQuery.
Ik hoop, dat iemand hiermee aan de slag wil, al is het maar met een kritische opmerking. Dank je wel.
Johan Derks
 
Iemand raadde mij jQuery aan, maar op mijn leeftijd begin ik niet meer aan het leren van een andere programmeertaal, die naar mijn indruk helemaal voor dit soort vrij eenvoudige problemen niet nodig is. Ik beheers javascript zelf, als amamteur programmeur voor Esperanto-doeleinden, nog onvoldoende (en PHP).
**ZOEMER**
jQuery is geen programmeertaal maar een library. Je kan er heel makkelijk de DOM-elementen van HTML mee beheren en manipuleren. Waar je in Vanilla JavaScript normaal een paar regels voor nodig hebt, kan je dit met jQuery in een enkele regel al vaak oplossen. Het is is verder gewoon gebouwd op JavaScript, dus er valt niet gek vele extra's aan te leren.
Als je Vanilla JavaScript wilt gebruiken, dan kan dat ook gewoon. Die keuze ligt bij jouw, maar ik wou even dit misverstand van je uitleggen.

Maar kan je jouw probleem niet even op een JSfiddle plaatsen? Dan kunnen we meteen even praktisch meekijken.
 
Zonder meegeleverde html is het lastig of het in jouw code past maar ik ga uit van deze html. Ik heb de werking niet getest.
Code:
<form id="fontVortMetodo" onchange="destinu(this)">
  <input type="radio" name="select" value="0"><label>zamenhofa</label>
  <input type="radio" name="select" value="1"><label>intereuropeco</label>
  <input type="radio" name="select" value="2"><label>tutmondeco</label>
</form>

<script>
function destinu(fM) {
  if (fM.elements("select")[0].checked){
    fM.action = "private_php/Zamenhofa.php";
  } else if (fM.elements("select")[1].checked) {
    fM.action = "private_php/intereuropeco.php";
  } else if (fM.elements("select")[2].checked) {
    fM.action = "private_php/tutmondeco.php";
  }
}
</script>
Vind je coderen leuk en doet de tijd die je nodig hebt er niet zo veel toe en vind je het niet erg dat het soms op bepaalde browsers niet werkt... dan kan je gewoon Javascript blijven gebruiken. Wil je sneller en makkelijker een cross-browser resultaat dan is de jQuery library voor Javascript een betere keuze.
 
Laatst bewerkt:
mijn oorspronkelijke code

Dank!!
JSHint levert geen fouten op in de javascriptcode. De geschoonde code is (Ik weet niet, hoe code te "normaliseren") wel iets ingewikkelder dan je schreef, geloof ik:
[JS]<html>
<head>
<script type="text/css">
function destinu() {
if (fM.elements("elekt")[0].checked == true){fM.action = "private_php/Zamenhofa.php"; }
else if (fM.elements("elekt")[1].checked == true) {fM.action = "private_php/intereuropeco.php"; }
else if (fM.elements("elekt")[2].checked == true) {tutm = true; fM.action = "private_php/tutmondeco.php"; }
}
</script>
</head>
<body>
<table>
<tr><td>
<input type="radio" name="elekt" style="background-color: #BFD9DA; width: 20px; height: 30px; text-align: left;" value="LZ1" onclick="javascript: return destinu('lZ');"/>
</td></tr>
<tr><td>
<input type="radio" name="elekt" style="background-color: #BFD9DA; width: 20px; height: 30px; text-align: left;" value="LZ2" onclick="javascript: fM.pI.value='-1'; destinu('lE');"/>
</td></tr>
<tr><td>
<input type="radio" name="elekt" style="background-color: #BFD9DA; width: 20px; height: 30px; text-align: left;" value="LZ3" onclick="javascript: destinu('lT');"/>
</td></tr>
</table>
</body>
</html>[/JS]
Ik vind via Google wel JS-fiddle, maar dat schrikt me ook een beetje af.
Kun je me daarmee op weg helpen?
Ik heb ook nooit met DOM gewerkt. Werkt dat niet met innerHTML?
 
Laatst bewerkt:
Wat schrikt je af aan JSfiddle? Het is een sandbox waarin je jouw code kan uittesten.
Niets meer en niet minder.

Verder heb je zelf stiekem wel met de DOM gewerkt.
Lees dit maar eens: https://www.w3schools.com/js/js_htmldom.asp
 
Laatst bewerkt:
Nou, u zult wel zien, hoe ingewikkeld de pagina is (en dat is er nog maar één van vele). Wat ik in myfiddle niet weet onder tebrengen is een apart stukje javascript:
Code:
<script type="text/javascript" charset="utf-8">
   var fM = document.forms["fontVortMetodo"];	
</script>
en verwijzing naar included javascriptdocumenten:
en
Code:
<script type="text/javascript">
	document.getElementById("eL").style.display="none";
    document.getElementById("dif").style.display="none";
</script>
Die zijn natuurlijk te vinden in het HTML gedeelte. Ik kan HTML toch niet opsplitsen?
Het zal trouwens wel grote problemen opleveren vanwege de omvang van het HTML-script (waar ik overigens al driekwart uit gehaald heb, ik hoop niet te veel .....) en vanwege de taal Esperanto.
De naam van mijn document is "startpagina" en ik heb "set as base" aangeklikt. Ik zag geen knop om het allemaal op te slaan. Hopelijk is dat vanzelf gebeurd.
Bij voorbaat sterkte en dank voor uw poging.
Johan Derks
Wat bedoelt u trouwens met "stiekem" van DOM gebruik maken?
 
@johan8derks. Je kan de html wat meer in deze tijd zetten. Tables zijn voor data overzichten, niet voor een pagina layout. Styling komt in een apart stylesheet bestand of als style in de head sectie. Een pagina begint met een doctype. Een title is verplicht. Geen 'javascript' meer bij onclick. Ter info: class="formulier" verwijst naar .formulier in <style> en daar kan je alles vormgeven.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulier</title>
<style>
.formulier div {margin: 8px 0;}
.formulier input[type="radio"] {background-color: #bfd9da; width: 20px; height: 30px;}
</style>
<script>
function destinu() {
  if (fM.elements("elekt")[0].checked == true) { fM.action = "private_php/Zamenhofa.php"; }
  else if (fM.elements("elekt")[1].checked == true) { fM.action = "private_php/intereuropeco.php"; }
  else if (fM.elements("elekt")[2].checked == true) { tutm = true; fM.action = "private_php/tutmondeco.php"; }
}
</script>
</head>
<body>
<form class="formulier">
  <div>
    <input type="radio" name="elekt" value="LZ1" onclick="destinu('lZ');">
  </div>
  <div>
    <input type="radio" name="elekt" value="LZ2" onclick="fM.pI.value='-1'; destinu('lE');">
  </div>
  <div>
    <input type="radio" name="elekt" value="LZ3" onclick="destinu('lT');">
  </div>
</form>
</body>
</html>
Er zit nog een foutje in. Bij iedere input geef je een parameter mee bij het aanroepen van de functie, bijv: destinu('lZ')
Echter bij de functie is de parameter niet aanwezig: function destinu(???)
 
Laatst bewerkt:
Wat bedoelt u trouwens met "stiekem" van DOM gebruik maken?

Heb je de link al gelezen? ;-)

Verder werkt JSfiddle echt niet lastig. Je moet je code gewoon even opsplitsen. En dan kan je het zelf uitvoeren en zien wat je code doet.
ideaal voor debuggen.
 
Ja. DOM is gewoon een structuur van Javascript, zie ik.
Ik doe mijn best.
 
zonder jQuery

Ik heb de volgende oplossing gevonden voor het bepalen van de "action" bij "submit". Daarbij is bijna alles bij het oude gebleven. De formulieraanzet luidde:
HTML:
<form name="fontVortMetodo" method="post" action="" accept-charset="utf-8">
met direct daaronder in javascript
Code:
var fM = document.forms["fontVortMetodo"];
Die fM probeerde ik te gebruiken om via getElementsByName drie radiobuttons te bereiken, maar dat gaat niet via de formuliernaam, maar via document zelf:
Vandaar in Javascript de functie "destinu()" met
Code:
var x = document.getElementsByName("elekt"); 
if (x[0].checked === true) {fM.action = "private_php/Zamenhofa.php"; } 
else if (x[1].checked === true) {fM.action = "private_php/intereuropeco.php"; }
else if (x[2].checked === true) {tutm = true; fM.action = "private_php/tutmondeco.php";}
Dat betekent niet, dat mijn programma klaar is. Er liggen in de volgende PHP-pagina's nog heel wat problemen op de loer. Ik zal mijn best doen er alleen uit te komen, maar zal zeker ook andere hulp nodig hebben.
Vriendelijk bedankt!
 
Laatst bewerkt:
Je kan elke radio input alvast een goede value geven (Zamenhofa, intereuropeco, tutmondeco) en dan de volgende js gebruiken
Code:
radioValue = document.querySelector('input[name="elekt"]:checked').value;
fM.action = "private_php/" + radioValue + ".php";
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan