faelsendoorn
Gebruiker
- Lid geworden
- 2 jun 2012
- Berichten
- 16
Naar aanleiding van een eerdere vraag over het berekenen van de korting per 3 stuks (welke is opgelost) loop ik nu tegen al een paar dagen tegen het volgende aan in mijn eigen gemaakte casus:
Als klant heb ik een bestelling gedaan maar nu wil ik op onderstaande pagina mijn klantgegevens invoeren. Als ik op de knop 'controleer gegevens' klik moeten de gegevens die ik heb ingevoerd onder het formulier te voorschijn komen. In de browser krijg ik bij elke veld 'undefined' staan en in de console komt de foutmelding 'Pattern attribute value [0-9]{A-Z} is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[0-9]{A-Z}/: Incomplete quantifier' maar volgens mij is er wat anders aan de hand? De console.log wordt niet uitgevoerd.
Edit 04-05-2021:
Ik heb het al kunnen oplossen. De RegEx is correct maar er wordt uit de verkeerde HTML element de info opgevraagd door de JS.
Als klant heb ik een bestelling gedaan maar nu wil ik op onderstaande pagina mijn klantgegevens invoeren. Als ik op de knop 'controleer gegevens' klik moeten de gegevens die ik heb ingevoerd onder het formulier te voorschijn komen. In de browser krijg ik bij elke veld 'undefined' staan en in de console komt de foutmelding 'Pattern attribute value [0-9]{A-Z} is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[0-9]{A-Z}/: Incomplete quantifier' maar volgens mij is er wat anders aan de hand? De console.log wordt niet uitgevoerd.
Code:
<html>
<head>
<title>Bezorggegevens</title>
<style>
body {
background-color: #E8F8F5;
}
</style>
</head>
<body>
<h1 style="color: #7FB3D5;">Uw bezorggegevens</h1>
<form name="personalia">
<fieldset id="bezorggegevens-form">
<legend style="color: #7FB3D5;">Personalia</legend>
<label id="firstname-label" for="firstname">Voornaam:</label><br>
<input type="text" id="firstName" name="firstname" placeholder="Henk" required></div>
<label id="lastname-label" for="lastname">Achternaam:</label>
<input type="text" id="lastName" name="lastname" placeholder="Ring" required></div><br>
<label id="telephone-label" for="telephone">Telefoonnummer:</label><br>
<input type="telephone" id="telephone" name="telephone" placeholder="0612345678" required><br>
<label id="email-label" for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="haring@haring.nl" required></div><br><br>
<label id="postalcode-label" for="postalcode">Postcode:</label><br>
<input type="postal" pattern ="[1-9][0-9]{3}\s?[a-zA-Z]{2}/" id="postalcode" name="postalcode" placeholder="9834 NX" required></div>
<label id="housenumber-label" for="housenumber">Huisnummer:</label>
<input type="number" id="housenumber" name="housenumber" placeholder="12" required></div><br><br>
<label id="address-label" for="address">Adres:</label>
<input type="text" id="address" name="address" placeholder="Meeuwenlaan" required></div>
<label id="residence-label" for="residence">Woonplaats:</label>
<input type="text" id="residence" name="residence" placeholder="Meeuwwijk" required></div>
<p>Wilt u de bestelling ophalen of in de winkel laten bezorgen?</p>
<label for="ophalen"><input id="ophalen" type="checkbox" name="ophalen">Ophalen in de winkel</label>
<label for="bezorgen"><input id="bezorgen" type="checkbox" name="bezorgen">Laten bezorgen</label>
<input type = "button" id = "btn1" value = "Controleer bezorggegevens" onsubmit = "bezorggegevens()">
</fieldset>
</form>
Voornaam: <span id = "label1"></span> <br>
Achternaam: <span id = "label2"></span> <br>
Telefoonnummer: <span id = "label3"></span> <br>
Email: <span id = "label4"></span> <br>
Postcode: <span id = "label5"></span><br>
Huisnummer: <span id = "label6"></span><br>
Adres: <span id = "label7"></span><br>
Woonplaats: <span id = "label8"></span><br><br><br>
<br>
<input type = "button" id = "btn1" value = "Bestelling afronden" onclick = "bestellingAfronden()"><br>
</body>
<script>
function bezorggegevens () {
//Aanmaken van variabelen
var voornaam, achternaam, telefoonnummer, email, postcode, huisnummer, adres, woonplaats;
var aantallenArray = [];
voornaam = document.getElementById("firstname-label").value;
achternaam = document.getElementById("lastname-label").value;
telefoonnummer = document.getElementById("telephone-label").value;
email = document.getElementById("email-label").value;
postcode = document.getElementById("postalcode-label").value;
huisnummer = document.getElementById("housenumber-label").value;
adres = document.getElementById("address-label").value;
woonplaats = document.getElementById("residence-label").value;
console.log(voornaam);
console.log(achternaam);
console.log(telefoonnummer);
console.log(email);
console.log(postalcode);
console.log(huisnummer);
console.log(adres);
console.log(woonplaats);
label1.innerHTML = voornaam;
label2.innerHTML = achternaam;
label3.innerHTML = telefoonnummer;
label4.innerHTML = email;
label5.innerHTML = postcode;
label6.innerHTML = huisnummer;
label7.innerHTML = adres;
label8.innerHTML = woonplaats;
}
</script>
</html>Edit 04-05-2021:
Ik heb het al kunnen oplossen. De RegEx is correct maar er wordt uit de verkeerde HTML element de info opgevraagd door de JS.
Laatst bewerkt:
