sciencetalk

hallo allemaal,

Ik ben bezig met een website, en daarop moet een contactformulier komen te staan.

Ik heb er een gemaakt in JavaScript, inclusief validatie.

Nu heb ik de volgende vraag;

Waar moet het emailadres staan, waar het formulier heen verzonden moet worden. (Mijn eigen emailadres, dus)

Het formulier ziet er op dit moment zo uit:

In het <head> gedeelte:

<script language="JavaScript" type="text/JavaScript">

function checkWholeForm(Contact) {

var leeg = "";

leeg += checkDropdown(Contact.choose.selectedIndex);

if (leeg !=" ") {

alert(leeg);

return false;

leeg += checkUsername(Contact.gebruikersnaaam.value);

}

leeg += checkEmail(Contact.email.value);

leeg += isEmpty(Contact.nietleeg.value);

return true;

}

//keuzelijst

function checkDropdown(choice) {

var error = ""

if (choice == 0) {

error = "U hebt geen keuze gemaakt uit de keuzelijst.\n;"

}

return error;

}

// Naam

function checkUsername (strng) {

var error = " ";

if (strng == " ") {

error = "U hebt geen naam ingevuld.\n";

}

var magniet = /[\<\>\,\;\:\\\/\"\[\]]/]

if (strng.match(magniet)) {

error = "De naam bevat verboden tekens.\n"

}

return error;

}

//Email

function checkEmail (strng) {

var error="";

if (strng == "") {

error = "U hebt geen emailadres ingevuld\n"

}

var emailFilter=/^.+@.+\..{2,3,4,5}$/;

if (!(emailFilter.test(strng))) {

error = "Vul aub een geldig emailadres in.\n";

}

else {

var illegalChars=/[\<\>\,\\;\:\\\"\[\]]/

if (strng.match(illegalChars)) {

error = "Het e-mailadres bevat verboden tekens.\n";

}

}

return error;

}

//Invoervak

function isEmpty(strng) {

var error = "";

if (strng.length == 0) {

error = "u moet iets invullen\n"

}

return error

}

</script>

En in het <body>gedeelte:

<form name="Contact" onSubmit="java script:checkWholeForm(this);">

<table widht="100%" cellpadding="10">

<tr>

<td>Onderwerp</td>

<td><select name="choose">

<option>Kies het onderwerp</option>

<option>Vraag</option>

<option>Opmerking</option>

<option>Technische fout op de website</option>

<option>Overig</option>

</select>

</td>

<tr>

<td>Naam</td>

<td><input type="text" name="name" size="30"></td>

</tr>

<tr>

<td>Emailadres</td>

<td><input type="text" name="email" size="30"></td>

</tr>

<tr>

<td>Hier kunt u uw bericht schrijven:<br /></td><td>

<textarea name="nietleeg" rows="4" cols"20"></textarea>

</td>

</tr>

<tr>

<td><input type="submit" name="submit" value="Versturen"xxxxxxxxxx@gmail.com; <input type="reset" value="reset" />

</td>

</table>

hopenlijk kan iemand mij helpen.

Alvast bedankt!

Er zijn een hoop dingen mis met die code. Het antwoord op je effectieve vraag staat bij punt 7, daar verwijs ik dan door naar de code. Je mail adres staat rechtstreeks in het form element.

1) De syntax om Javascript aan te geven strookt niet met de internationale standaard. Correct is dit:

Code: Selecteer alles

<script type="text/javascript">hier dan alle code</script>

2) Form element was niet afgesloten.

3) Het Javascript vraagt op verschillende plaatsen waarden op, op een manier dat die ze niet kan verkrijgen. De HTML elementen moeten voorzien worden van een id-attribuut, niet enkel een name-attribuut. Het is via het id-attribuut dat Javascript deze waarden kan vinden. Name-attributen zijn nog steeds belangrijk, als je het formulier naar een server verstuurt om het te laten afhandelen. Server-software zoals PHP en ASP.NET bekijken dan de name-attributen, in tegenstelling tot Javascript die de id-attributen bekijkt.

4) Het Javascript controleert of de geselecteerde index leeg is. Zo niet komt er een foutmelding. Dus moet het volgens dit Javascript leeg zijn. Dat laat de mogelijkheid open om helemaal geen onderwerp te selecteren. Beter is indexen te gebruiken. Het Javascript zal de geselecteerde index niet kunnen controleren, als deze niet ingegeven is in de HTML. Onderaan deze post staat een opgekuiste versie van uw script, de correcte code kan je daar zien.

5) Je houdt de pagina niet echt tegen. Er is helemaal niks om je true of false waarden op te vangen. In je attribuut bij je form ook een return aanduiden. Eventjes gedaan voor je. Hoeft ook geen vermelding dat het Javascript is. Dat attribuut onSubmit is internationaal herkend en alle browsers verwachten er automatisch Javascript in, als het voorkomt.

6) Je controle op illegale karakters in de e-mail werkt niet. Waarschijnlijk een slechte reguliere expressie. Als je even kan zeggen welke karakters je wil verbieden, zal ik kijken of ik die ook kan aanpassen.

7) Deze manier van mailen gebruikt een andere syntaxis. Aangepast in je code, hieronder te zien. Let wel op dat als je met HTML emails gaat versturen, dat niet automatisch gebeurt. Ik weet niet wat je verwachtingen zijn, maar ik kan je zeggen dat het niet zo zal zijn dat de gebruiker op "Versturen" klikt en dat het dan effectief in jouw mailbox zal zitten.

Wat er zal gebeuren is dat de browser waarmee gebruiker werkt, het formulier zal herleiden naar diens ingestelde email applicatie. Dit kan een programma zijn op de computer, dit kan een email-dienst online zijn, zoals gmail. Er zal dus een nieuw scherm openen, in de browser of via een ander programma, en daar zal de gebruiken nog eens moeten bevestigen.

Wil je dat dit allemaal niet moet, dan zul je een server moeten opzetten met PHP of ASP.NET, en de nodige pagina(s) moeten coderen om het correct af te handelen.

Je code, wat verbeterd:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function checkWholeForm(Contact) {

var leeg = "";

leeg += checkDropdown(Contact.choose.selectedIndex);

if (leeg == "0") {

leeg = "";

leeg += checkUsername(Contact.gebruikersnaam.value);

leeg += checkEmail(Contact.email.value);

leeg += isEmpty(Contact.nietleeg.value);

alert(leeg);return false;

}

return true;

}

//keuzelijst

function checkDropdown(choice) {

var error = ""

if (choice == 0) {

error = "U hebt geen keuze gemaakt uit de keuzelijst.\n;"

}

return choice;

}

// Naam

function checkUsername (strng) {

var error = "";

if (strng == "") {

error = "U hebt geen naam ingevuld.\n";

}

var magniet = "/[\(\)\<\>\,\;\:\\\/\"\[\]]/]";

if (strng.match(magniet)) {

error = "De naam bevat verboden tekens.\n"

}

return error;

}

//Email

function checkEmail (strng) {

var error="";

var emailFilter=/^.+@.+\..{2,3,4,5}$/;

if (!(emailFilter.test(strng))) {

error = "Vul aub een geldig emailadres in.\n";

}

else {

var illegalChars=/[\(\)\<\>\,\\;\:\\\"\[\]]/

if (strng.match(illegalChars)) {

error = "Het e-mailadres bevat verboden tekens.\n";

}

}

if (strng == "") {

error = "U hebt geen emailadres ingevuld\n"

}

return error;

}

//Invoervak

function isEmpty(strng) {

var error = "";

if (strng.length == 0) {

error = "U moet iets invullen"

allesOk = false;

}

return error;

}

</script>

</head>

<body>

<form id="contact" action="MAILTO:xxxxxxxxxx@gmail.com" onSubmit="return checkWholeForm(this);" method="post" enctype="text/plain">

<table cellpadding="10">

<tr>

<td>Onderwerp</td>

<td><select id="choose" name="choose">

<option value="0">Kies het onderwerp</option>

<option value="1">Vraag</option>

<option value="2">Opmerking</option>

<option value="3">Technische fout op de website</option>

<option value="3">Overig</option>

</select>

</td>

<tr>

<td>Naam</td>

<td><input type="text" name="name" id="gebruikersnaam" size="30"></td>

</tr>

<tr>

<td>Emailadres</td>

<td><input type="text" name="email" id="email" size="30"></td>

</tr>

<tr>

<td>Hier kunt u uw bericht schrijven:<br /></td><td>

<textarea name="nietleeg" id="nietleeg" rows="4" cols="20"></textarea>

</td>

</tr>

<tr>

<td><input type="submit" name="submit" id="submit" value="Versturen" />

<input type="reset" id="reset" value="reset" />

</td>

</table>

</form>

</body>

</html>

Harstikke bedankt!

Je reactie was erg nuttig.

Groeten

FrankW

sciencetalk

[informatica] javascript contactformulier

[informatica] javascript contactformulier

Re: [informatica] javascript contactformulier

Re: [informatica] javascript contactformulier