Form to mail

[tj.willems]

Ik heb een formuliertje gebouwd die met javascript valideert http://newgarta.garta.nl/index/contact.html.
Hij werkt nu helemaal naar behoren... alleen nu moet ik als er op de versturen knop wordt gedrukt een mailtje laten versturen.

Ik heb het volgende php script gebruikt:

PHP:

<?php
    require_once("validation.php");
?>

    <div id="container-contact">
        <?if( isset($_POST['send']) && (!validateName($_POST['name']) || !validateEmail($_POST['email']) || !validateOnderwerp($_POST['onderwerp']) || !validateMessage($_POST['message']) ) ):?>
                <div id="error">
                    <ul>
                        <?if(!validateName($_POST['name'])):?>
                            <li><strong>Uw naam is niet of verkeerd ingevuld:</strong> Uw naam moet minstens uit 2 letters bestaan.</li>
                        <?endif?>
                        <?if(!validateEmail($_POST['email'])):?>
                            <li><strong>Uw e-mail is niet of verkeerd ingevuld:</strong> [e-mail]</li>
                        <?endif?>
                        <?if(!validateOnderwerp($_POST['onderwerp'])):?>
                            <li><strong>Uw onderwerp is niet of verkeerd ingevuld:</strong> Uw onderwerp moet minstens uit 2 letters bestaan.</li>
                        <?endif?>
                        <?if(!validateMessage($_POST['message'])):?>
                            <li><strong>U heeft geen bericht ingevuld:</strong> U moet minstens 10 tekens invullen.</li>
                        <?endif?>
                    </ul>
                </div>
            <?elseif(isset($_POST['send'])):?>
                <div id="error-contact" class="valid">
                    <ul>
                        <li>Bedankt voor uw reactie. Uw bericht is verzonden.</li>
                    </ul>
                </div>
        <?endif?>

        <form method="post" id="customForm" action="/includes/pages/formtomail.php">
            <div>
                <label for="name">Naam: *</label>
                <input id="name" name="name" type="text" />
                <span id="nameInfo">Vul uw naam in.</span>
            </div>
            <div>
                <label for="bedrijf">Bedrijf:</label>
                <input id="bedrijf" name="bedrijf" type="text" />
                <span id="bedrijfInfo">Vul uw bedrijfsnaam in.</span>
            </div>
            <div>
                <label for="tel">Telefoonnummer:</label>
                <input id="tel" name="tel" type="text" />
                <span id="telInfo">Vul uw telefoonnummer in.</span>
            </div>
            <div>
                <label for="email">E-mail: *</label>
                <input id="email" name="email" type="text" />
                <span id="emailInfo">Vul uw emailadres in.</span>
            </div>
            <div>
                <label for="onderwerp">Onderwerp: *</label>
                <input id="onderwerp" name="onderwerp" type="text" />
                <span id="onderwerpInfo">Vul uw onderwerp in.</span>
            </div>
            <div>
                <label for="message">Bericht: *</label>
                <textarea id="message" name="message" cols="" rows=""></textarea>
            </div>
            <div>
                <input id="send" name="send" type="submit" value="Versturen" />
            </div>
        </form>
    </div>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/validation.js"></script>

Nou de vraag hoe verzend ik een email met de gegevens uit het formulier, maar hij moet niet naar een andere pagina linken. Het boxje wat je bovenin krijgt als je op verzenden drukt moet zo blijven.

Als er nog meer code nodig is hoor ik het graag

[Bosmonster]

Moeilijke oplossing: Velden posten via XHR
Makkelijke oplossing: Formulier posten naar een verborgen iframe

Over hoe je mail verstuurt via PHP is genoeg te vinden op internet lijkt me. PHP heeft daar gewoon een mail() functie voor.

[ Voor 37% gewijzigd door Bosmonster op 06-11-2009 16:32 ]

[tj.willems]

Kun je van dat XHR een voorbeeld geven ?? hoe ik dat erin moet bouwen

[Cartman!]

Heb je al iets gezocht of gooi je gewoon je vraag maar neer?

Sowieso post je nu html met php-code erdoor terwijl je contact.html dus een html file is. Het makkelijkste is gewoon die contact-pagina een .php extensie geven en dan naar zichtzelf posten, waarom moeilijk doen als t makkelijk kan? Vergeet in php niet nogmaals te valideren want javascript kun je natuurlijk niet vertrouwen

[tj.willems]

Ik krijg het echt niet werkend heb hem nu op http://tjwillems.nl/_backup/validateform/ staan.
Kan iemand mij nog helpen.

Kan het misschien via mijn javascript...

JavaScript:

/***************************/
//@Author: Garta | Tom Willems
//@website: www.garta.nl
//@email: [e-mail]
/***************************/

$(document).ready(function(){
    //global vars
    var form = $("#customForm");
    var name = $("#name");
    var nameInfo = $("#nameInfo");
    var email = $("#email");
    var emailInfo = $("#emailInfo");
    var onderwerp = $("#onderwerp");
    var onderwerpInfo = $("#onderwerpInfo");
    var message = $("#message");
    
    //On blur
    name.blur(validateName);
    email.blur(validateEmail);
    onderwerp.blur(validateOnderwerp);
    //On key press
    name.keyup(validateName);
    onderwerp.keyup(validateOnderwerp);
    message.keyup(validateMessage);
    //On Submitting
    form.submit(function(){
        if(validateName() & validateEmail() & validateOnderwerp() & validateMessage())
            return true
        else
            return false;
    });
    
    //validation functions
    function validateName(){
        //if it's NOT valid
        if(name.val().length < 2){
            name.addClass("error");
            nameInfo.text("Uw naam moet minstens uit 2 letters bestaan");
            nameInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            name.removeClass("error");
            nameInfo.text("Vul uw naam in.");
            nameInfo.removeClass("error");
            return true;
        }
    }
    function validateEmail(){
        //testing regular expression
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9.-]+.[a-z]{2,4}$/;
        //if it's valid email
        if(filter.test(a)){
            email.removeClass("error");
            emailInfo.text("Uw e-mail is niet correct. ([e-mail])");
            emailInfo.removeClass("error");
            return true;
        }
        //if it's NOT valid
        else{
            email.addClass("error");
            emailInfo.text("Uw e-mail is niet correct. ([e-mail])");
            emailInfo.addClass("error");
            return false;
        }
    }
    function validateOnderwerp(){
        //if it's NOT valid
        if(onderwerp.val().length < 2){
            onderwerp.addClass("error");
            onderwerpInfo.text("Uw onderwerp moet minstens uit 2 letters bestaan");
            onderwerpInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            onderwerp.removeClass("error");
            onderwerpInfo.text("Vul een onderwerp in.");
            onderwerpInfo.removeClass("error");
            return true;
        }
    }
    function validateMessage(){
        //it's NOT valid
        if(message.val().length < 1){
            message.addClass("error");
            return false;
        }
        //it's valid
        else{           
            message.removeClass("error");
            return true;
        }
    }
});

[ Voor 91% gewijzigd door een moderator op 13-11-2009 10:41 ]

[Bosmonster]

Gaat het nu om de validation of om het submitten via XHR? Want van dat laatste kan ik geen code vinden in je formulier?

[tj.willems]

het gaat erom dat hij nu submit dat hij het formulier naar een e-mail stuurt

[Bosmonster]

http://docs.jquery.com/Ajax

Kijk specifiek eens naar de jQuery.post en jQuery.serialize functies. Combineer die 2 en voila.

Opmerkinkje trouwens. Je gebruikt nog een oude jQuery. Pak 1.3.2 van de website.

Daarnaast include je die scripts nu onderaan je pagina, maar het is beter die gewoon in je head te zetten.

En ongerelateerd: Pak een strict doctype ipv een transitional. Dat scheelt je een hoop xbrowser problemen bij het bouwen van je website.

[ Voor 56% gewijzigd door Bosmonster op 13-11-2009 11:17 ]

[tj.willems]

ga ik doen, je hoort wel van me als het niet lukt

Bedankt!

[tonyisgaaf]

Bosmonster schreef op vrijdag 13 november 2009 @ 11:14:
[...]
Daarnaast include je die scripts nu onderaan je pagina, maar het is beter die gewoon in je head te zetten.
[...]

Waarom is dat beter? Zodat de browser wacht met renderen totdat alle bestanden in de head zijn geladen?

[Bosmonster]

tonyisgaaf schreef op vrijdag 13 november 2009 @ 11:42:
[...]

Waarom is dat beter? Zodat de browser wacht met renderen totdat alle bestanden in de head zijn geladen?

Dat doet de browser sowieso niet, die werkt met meerdere threads en connecties. Het zorgt juist voor een goede parallelle verwerking.

Ze onderaan in de body zetten heeft dan juist een averechts effect, aangezien die de body pas af kan sluiten als die scripts zijn geladen. Daarom horen scripts in principe in de head, zodat de browser kan bepalen wat de meest efficiente manier is om de pagina in te laden.

[ Voor 33% gewijzigd door Bosmonster op 13-11-2009 11:54 ]

[tonyisgaaf]

Bosmonster schreef op vrijdag 13 november 2009 @ 11:52:
[...]


Dat doet de browser sowieso niet, die werkt met meerdere threads en connecties. Het zorgt juist voor een goede parallelle verwerking.

Ze onderaan in de body zetten heeft dan juist een averechts effect, aangezien die de body pas af kan sluiten als die scripts zijn geladen. Daarom horen scripts in principe in de head, zodat de browser kan bepalen wat de meest efficiente manier is om de pagina in te laden.

Bosmonster, ik weet dat je hier veel reageert en altijd op niveau, maar hier trek ik toch je standpunt in twijfel. Om deze discussie niet te laten verzanden een meningsverschil, heb ik geprobeerd wat bronnen te vinden die mijn idee van "wat een browser doet" ondersteunen.

Volgens mij is het verstandig om de style sheets in de head te zetten, zodat de browser niet een redraw hoeft te doen van de content, wanneer deze een <style> block tegenkomt in de body, maar is het evenzozeer verstandig scripts onderaan de body te includen, zodat de browser niet blijft hangen wanneer een (extern) script wordt geladen of geëvalueerd.
Want volgens mij (en enkele bronnen) moet een browser eerst een script laden en evalueren voordat deze verder gaat met het laden en evalueren van de rest van de pagina.

• Google: Optimize browser rendering: Put CSS in the document head
• Yahoo: Best Practices for Speeding Up Your Web Site: Put Scripts at the Bottom
• Optimizing Your External Javascript References

Dit is volgens mij ook de reden dat Google voor het Analytics script aangeeft dit nét voor de </body> tag te plaatsen.

EDIT: zie ook deze voorbeelden over het waarom van scripts onderaan de body.

Ik benader overigens elk javascript hier als "extern", ook wanneer het op je eigen domein staat, maar niet in de pagina is opgenomen.

Dit gaat overigens heel hard offtopic, maar ik vind het wel een interessante discussie.

[ Voor 3% gewijzigd door tonyisgaaf op 13-11-2009 14:41 ]

[Bosmonster]

Misschien, het zal ook wel per browser verschillen. Kan me niet voorstellen dat het veel verschil zal maken als het al verschil maakt.

Persoonlijk vind ik het ook erg lelijk om scripts in de body te zetten, maar dat is een stukje persoonlijke voorkeur.

Als je ze dan al onderaan je pagina zet, zet ze dan iig na je /body ipv erin.

[ Voor 13% gewijzigd door Bosmonster op 13-11-2009 14:46 ]

[tonyisgaaf]

Bosmonster schreef op vrijdag 13 november 2009 @ 14:44:
[...]
Als je ze dan al onderaan je pagina zet, zet ze dan iig na je /body ipv erin.

En daarmee je pagina invalideren? Dat vind ik geen goed advies.

quote: http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT

The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.

[Bosmonster]

Bah gezeik... En dat om scriptjes onderin je pagina te zetten

Ik heb een persoonlijke aversie tegen scripts in de body. Geeft me nogal een jaren 90 document.write gevoel.

Niet helemaal terecht blijkbaar.

[ Voor 53% gewijzigd door Bosmonster op 13-11-2009 15:25 ]

[tonyisgaaf]

Bosmonster schreef op vrijdag 13 november 2009 @ 15:23:
Bah gezeik... En dat om scriptjes onderin je pagina te zetten

Ik heb een persoonlijke aversie tegen scripts in de body. Geeft me nogal een jaren 90 document.write gevoel.

Don't worry, het gaat me niet om wat jij doet, maar hetgeen je anderen adviseert te doen en dan vooral waarom.
En meestal is het ook heel onpraktisch om de JS niet in de head te laden, zeker omdat je er dan vervolgens niet van kunt uitgaan dat bepaalde functies al bestaan, wanneer je inline nog wat scripting wilt doen.

Dus ook ik heb meestal de JS in de head staan, zeker wanneer die van het eigen domein komt...

[Bosmonster]

Je hebt helemaal gelijk.

* Bosmonster kruipt in hoekje

[Cartman!]

tonyisgaaf schreef op vrijdag 13 november 2009 @ 16:43:
En meestal is het ook heel onpraktisch om de JS niet in de head te laden, zeker omdat je er dan vervolgens niet van kunt uitgaan dat bepaalde functies al bestaan, wanneer je inline nog wat scripting wilt doen.

Daar heb je domready en load events voor natuurlijk. Ik plaats ook bijna altijd scripts onderaan de body voor een snelle gebruikerservaring. Geleerd bij Kings of Code 2008 waar die gast van Yahoo! stond te vertellen over dat onderwerp