Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JavaScript] Mail formulier + terugkoppeling gebruiker

None
13 antwoorden
  • [code:1:baa97e4c74]
    <html>
    <head>
    <title>Mailform</title>

    <style>
    .input {
    color: #CC0000;
    font-size: 9px;
    border: 0px;
    background: #fff;
    }
    </style>

    <script type="text/javascript">
    var input = new Array();
    var hidden = new Array();

    function validateForm(input, nr) {
    var mailfilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var completeform = true;
    var count = 4;

    var fault1 = "Naam is fout";
    var fault2 = "Email is fout";
    var fault3 = "Onderwerp is fout";
    var fault4 = "bericht is fout";


    if(nr == 0) {

    for(i=1; i<count+1; i++) {

    if(eval('document.contactform.veld' + i + '.value == ""') || eval('document.contactform.hidden' + i + '.value != ""')) {
    eval('document.contactform.hidden' + i + '.value = fault' + i);
    completeform = false;
    }

    }

    if(!completeform) {
    return false;
    } else {
    document.contactform.submit();
    return true;
    }

    } else {

    input[nr] = input.value;

    if(input.name == "veld2") {

    if(!mailfilter.test(document.contactform.veld2.value)) {
    hidden[nr] = true;
    } else {
    hidden[nr] = false;
    }

    } else {

    if(input[nr] == "" || input[nr].length < 3) {
    hidden[nr] = true;
    } else {
    hidden[nr] = false;
    }
    }

    if(hidden[nr] == true) {
    eval('document.contactform.hidden' + nr + '.value = fault' + nr);
    } else {
    eval('document.contactform.hidden' + nr + '.value = ""');
    }

    }

    }
    </script>

    </head>

    <body>

    <form method="post" action="" name="contactform">

    Afzender: <input type="text" class="input" name="hidden1" size=64 disabled /><br />
    <input type="text" name="veld1" size=34 maxlength=30 onBlur="return validateForm(this, 1);" /><br />

    Email: <input type="text" class="input" name="hidden2" size=64 disabled /><br />
    <input type="text" name="veld2" size=34 maxlength=30 onBlur="return validateForm(this, 2);" /><br />

    Website: <br />
    <input type="text" name="url" value="http://" size=34 maxlength=30 /><br />

    Onderwerp: <input type="text" class="input" name="hidden3" size=64 disabled /><br />
    <input type="text" name="veld3" size=46 maxlength=40 onBlur="return validateForm(this, 3);" /><br />

    Bericht: <input type="text" class="input" name="hidden4" size=64 disabled /><br />
    <textarea name="veld4" cols=45 rows=8 onBlur="return validateForm(this, 4);"></textarea><br />

    <input type="button" name="verzenden" value="Verzenden" onClick="return validateForm(this, 0);"/>

    </form>

    </body>

    </html>


    *** EDIT
    Script is aangepast[/code:1:baa97e4c74]

    Ik heb 4 verborgen velden in mijn formulier, wanneer iemand zijn naam niet goed invult moet er een melding komen in 'hidden1', wanneer iemand vervolgens ook zijn email niet goed invult moet er een melding in 'hidden2' komen.

    Dit werkt opzich wel alleen over-ruled de melding van de email vervolgens ook het bericht van de naam, ditzelfde bij onderwerp en bericht.

  • [quote:f9e277e08d="xanuex"][code:1:f9e277e08d]<script language="JavaScript">
    <!–
    <KNIP>
    for(i=1; i<count+1; i++) {

    if(hidden[i] == true) {
    eval('document.contactform.hidden' + i + '.value = "* U heeft uw '+input.name+' niet of onvolledig ingevuld."');
    } else {
    eval('document.contactform.hidden' + i + '.value = ""');
    }

    }

    }

    <KNIP>
    [/code:1:f9e277e08d]

    Volgens mij ben ik er bijna, maar ik weet niet hoe ik het moet oplossen.

    -marcel[/quote:f9e277e08d]
    Je bent er inderdaad bijna. Het gaat fout in de for-loop. Die moet je niet gebruiken. Je loopt namelijk alle hidden-velden langs en dat hoeft niet. Je functie valideert maar 1 veld. Je hoeft dus ook alleen maar dat specifieke veld te controleren. Vervang
    [code:1:f9e277e08d] for(i=1; i<count+1; i++) {

    if(hidden[i] == true) {
    eval('document.contactform.hidden' + i + '.value = "* U heeft uw '+input.name+' niet of onvolledig ingevuld."');
    } else {
    eval('document.contactform.hidden' + i + '.value = ""');
    }

    }[/code:1:f9e277e08d]
    maar eens door
    [code:1:f9e277e08d] if(hidden[nr] == true) {
    eval('document.contactform.hidden' + nr + '.value = "* U heeft uw '+input.name+' niet of onvolledig ingevuld."');
    } else {
    eval('document.contactform.hidden' + nr + '.value = ""');
    } [/code:1:f9e277e08d]
    Dat werkt zoals je bedacht had.
  • Het werkt (natuurlijk!) :lol:

    bedankt !
  • Graag gedaan 8)
  • Ik heb nog een klein probleem, ik krijg het niet voor elkaar om te checken of alles goed is ingevuld om vervolgens het formulier te posten.

    hij heeft op dit moment ook een probleem met:
    onBlur="return validateField(this, 0);"

    omdat hij hidden input 0 niet kent.


    Iemand daar nog een goede oplossing voor ?
  • [quote:59dca59e41="xanuex"]Ik heb nog een klein probleem, ik krijg het niet voor elkaar om te checken of alles goed is ingevuld om vervolgens het formulier te posten.
    [/quote:59dca59e41]
    Ja, vervang <form…> door het volgende:
    [code:1:59dca59e41] <form method="post" action="<doelpagina>" name="contactform" onsubmit="return validateForm();"> [/code:1:59dca59e41]
    Voeg de volgende (simpele) functie toe:
    [code:1:59dca59e41] function validateForm() {
    var completeform = true;
    if(document.contactform.naam.value == "" || document.contactform.hidden1.value != "") {
    completeform = false;
    }
    if(document.contactform.email.value == "" || document.contactform.hidden2.value != "") {
    completeform = false;
    }
    if(document.contactform.onderwerp.value == "" || document.contactform.hidden3.value != "") {
    completeform = false;
    }
    if(document.contactform.bericht.value == "" || document.contactform.hidden4.value != "") {
    completeform = false;
    }
    if(!completeform) {
    alert('Niet alle velden zijn (correct) ingevuld!');
    return false;
    }
    else {
    return true;
    }
    }[/code:1:59dca59e41]
    en vervang de knop door de volgende code:
    [code:1:59dca59e41]<input type="submit" value="Verzenden" />[/code:1:59dca59e41]
    [quote:59dca59e41="xanuex"]
    hij heeft op dit moment ook een probleem met:
    onBlur="return validateField(this, 0);"

    omdat hij hidden input 0 niet kent.


    Iemand daar nog een goede oplossing voor ?[/quote:59dca59e41]
    Niet gebruiken? Waar staat deze code? Ik zag alleen een aanroep bij de knop…
    [edit]Zoek ook eens met google.[/edit]
  • hehe wederom bedankt, het werkt wel..


    Nu ga ik het een stapje moeilijker maken ;)
    Ik heb nu het idee dat ik dubbele dingen aan het doen ben, eerst controleer ik met een functie alle input velden apart en vervolgens ga ik met een andere functie alle input velden samen controleren.

    Bovendien zit je nu aan het aantal input velden vast door deze apart te controleren in de nieuwe functie.

    Dit moet efficienter kunnen volgens mij…

    Ben al de hele dag aan het stoeien maar krijg het niet voor elkaar :)


    Wat is wil bereiken is het volgende;
    1- wanneer je uit je input gaat moet hij controleren of het veld goed is ingevuld (onBlur) zo niet dan moet deze een melding geven in het hidden veld.

    2- wanneer er op de submit knop gedrukt wordt moet deze alle velden langs gaan en kijken of deze goed zijn ingevoerd, als dit niet het geval is moet deze per input veld een melding in het daarvoor bestemde hidden veld geven.

    3- wanneer alles wel goed is ingevuld dan moet het formulier gepost worden.

    optie 2 zorgt ervoor dat wanneer het veld nog leeg is en er wordt op submit gedrukt het niet gepost wordt maar de hidden velden worden aangeroepen.
  • [quote:f24a27d2d5="xanuex"]hehe wederom bedankt, het werkt wel..


    [/quote:f24a27d2d5]Wederom graag gedaan.
    [quote:f24a27d2d5="xanuex"]
    Nu ga ik het een stapje moeilijker maken ;)

    Ik heb nu het idee dat ik dubbele dingen aan het doen ben, eerst controleer ik met een functie alle input velden apart en vervolgens ga ik met een andere functie alle input velden samen controleren.
    [/quote:f24a27d2d5]
    Klopt. Probeer de functie validateField eens zo aan te passen dat deze alleen het input-veld controleert die de functie aanroept. Is niet zo heel moeilijk :wink:
    [quote:f24a27d2d5="xanuex"]
    Bovendien zit je nu aan het aantal input velden vast door deze apart te controleren in de nieuwe functie.

    Dit moet efficienter kunnen volgens mij…
    [/quote:f24a27d2d5]
    Klopt ook. Het was ook maar een voorbeeld. Hint: je kan door de velden van een formulier loopen. Tip:
    [code:1:f24a27d2d5] var checkform = document.contactform;
    for(var i = 0; i < checkform.elements.length; i++) {
    alert(checkform.elements[i].name);
    }[/code:1:f24a27d2d5]
    Zo kun je aan de hand van de naam van het element bepalen wat ermee moet gebeuren.
  • Ik heb net de beginpost aangepast :P


    Dit werkt prima alleen heb ik op dit moment nog het 'probleem' dat je 'vast' zit aan de 4 velden die je opgeeft. Voor mij niet zo'n probleem maar het zou wel leuk zijn als het efficienter zou kunnen (strevertje, ik weet het)


    Anyway, zie je nog problemen of zijn er dingen die je anders zou doen ?
  • [quote:1da3378593="xanuex"]
    Dit werkt prima alleen heb ik op dit moment nog het 'probleem' dat je 'vast' zit aan de 4 velden die je opgeeft. Voor mij niet zo'n probleem maar het zou wel leuk zijn als het efficienter zou kunnen (strevertje, ik weet het)
    [/quote:1da3378593]
    Volgens mij zit je niet vast aan die 4 velden. Als jij een vijfde en zesde (of meer) veld wil toevoegen, dan hoef je volgens mij alleen maar de count variabele op te hogen, en extra foutmeldingen toe te voegen. Maar dat zou je even moeten testen.
    [quote:1da3378593="xanuex"]
    Anyway, zie je nog problemen of zijn er dingen die je anders zou doen ?[/quote:1da3378593]
    Ik zie geen problemen, maar ik zou wel eens kijken of iemand jouw wiel al heeft uitgevonden :wink: . Er zijn al zoveel validatiescripts in omloop, er zit vast wel iets tussen wat je kan gebruiken. Dit is een heel uitgebreide, bijvoorbeeld. En hier heb je er nog veel meer…
  • [quote:4c45ccc46c]Volgens mij zit je niet vast aan die 4 velden. Als jij een vijfde en zesde (of meer) veld wil toevoegen, dan hoef je volgens mij alleen maar de count variabele op te hogen, en extra foutmeldingen toe te voegen. Maar dat zou je even moeten testen. [/quote:4c45ccc46c]

    Dit hoef ik niet te testen, dit werkt wel hehe ;)
    Maar het mooiste is natuurlijk dat je aan het script niks meer hoeft te doen maar gewoon input velden erbij kan zetten.


    En wat mijn mooie sportvelgen betreft…
    Ja het zal vast wel eens eerder uitgezocht zijn, had zelf ook al een mooi script maar wilde het wat uitbreiden/gebruikersvriendelijker maken.

    Heb je de scripts van die gasten wel eens gezien?
    Wanneer we het over onoverzichtelijk hebben…. :D

    Ik laat het hierbij (tenzij iemand me nog een hele mooie verbetering kan laten zien) dus mag ik je bij deze enorm bedanken.
  • [quote:dd01db412c="xanuex"]Maar het mooiste is natuurlijk dat je aan het script niks meer hoeft te doen maar gewoon input velden erbij kan zetten.
    [/quote:dd01db412c]
    Doe dan eens iets met deze code:
    [code:1:dd01db412c]for(var i = 0; i < document.contactform.elements.length; i++) {
    // doe hier je controle dingetjes
    }[/code:1:dd01db412c]
    [quote:dd01db412c="xanuex"]
    Heb je de scripts van die gasten wel eens gezien?
    Wanneer we het over onoverzichtelijk hebben…. :D
    [/quote:dd01db412c]
    Nee, ik vind ook liever mijn eigen wielen uit :lol:
    [quote:dd01db412c="xanuex"]
    mag ik je bij deze enorm bedanken.[/quote:dd01db412c]
    Altijd. Graag gedaan
  • hehe voorlopig vind ik hem even prima.

    Wanneer ik weer wat meer zin heb zal ik daar ook nog eens naar kijken, ik krijg het nu niet zo snel voor elkaar.

    - marcel

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.