SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem With Contact form

    hey guys,
    I have some trouble with my contact form of my website . The problem is that I have written a JavaScript function to check if all the fields were filled in and if the input is valid . Now I wrote the JavaScript in a different file witch I have include in my website but for some reason it won't work . If i put my script in the head everything works fine but that's not allowed . It's a project for school .
    here I provide you with the js and the html code .

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>
            Welkom bij videotheek productia
    
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Video's" />
        <link rel="stylesheet" href="./css/style.css" type="text/css" />
    <script type="text/javascript" src="./js/contact.js"></script>
    
    
    </head>
    
    <body>
    <div id="header">
    
        <div class="banner">
    
    	<img src="./img/banner.jpg" height="175" width="750" alt="SlideShow"  />
    
        </div>
    
        <div class="menu">
            <a href="index.html">Home</a>
            <a href="overzicht.html">Overzicht</a>
            <a href="portfolio.html">Portfolio</a>
            <a href="betaling.html">Betaling</a>
            <a href="facturatie.html">Facturatie</a>
            <a class="active" >Contact</a>
        </div>
    
    </div>
    
    <div id="body">
    
        <div class="mid">
    					<p id="error"> </p>
    
    					<form  id="contact" action="mailto:email@email.com"  method="post" enctype="text/plain">
    			<p>
    				<label for="naam">Naam</label>
    				<input name="naam" id="naam" type="text" size="25" />
    			</p>
    			<p>
    				<label for="email">E-mail</label>
    				<input name="email" id="email" type="text" size="25" />
                
    			</p>
    
    			<p>
    					<label for="onderwerp">Onderwerp</label>
    					<select id="onderwerp" name="onderwerp" >
    										<option value="Kies het onderwerp">Kies het onderwerp</option>
    										<option value="Vraag">Vraag</option>
    										<option value="Opmerking">Opmerking</option>
    										<option value="Fout op website">Fout op website</option>
    										<option value="Overig">Overig</option>
    									</select>
    			</p>
    			<p>
    				<label for="bericht">Bericht</label>
    				<textarea name="bericht" id="bericht" rows="9" cols="40"></textarea>
    			</p>
    			<p>
    				<input name="submit" type ="submit" id="submitbutton" value="Verstuur" />
    				<input name="reset"	type="reset" value="Reset" />
    			</p>
    			</form>
    
        </div>
    
    </div>
    
    
    <div id="footer">
        <p> &copy; Alexander Coopmans Inf 106 B </p>
    </div>
    
    </body>
    
    </html>
    

    Js file:

    PHP Code:


    var theForm;
    document.getElementById("submitbutton").addEventListener(submit'click', function() {
        
    theForm.naam = $('naam').value;
        
    theForm.email = $('email').value;
        
    theForm.onderwerp = $('onderwerp').value;
        
    theForm.bericht = $('bericht').value;
        
    validateFormOnSubmit(theForm)
    });


    function 
    validateFormOnSubmit(theForm) {
        var 
    reason;

        
    reason+=checkname(theForm.naam);
        
    reason+=validateEmail(theForm.email);
        
    reason+=checkDropdown(theForm.onderwerp);
        
    reason+=validateEmpty(theForm.bericht);

        if (
    reason != "") {
            
    document.getElementById("error")= Element("Sommige velden hebben uw aandacht nodig : \n" reason);
            return 
    false;
        }
        else{

            return 
    true;

        }
    }

    function 
    checkDropdown(fld) {
        var 
    error " ";

        if (
    fld.value == "Kies het onderwerp") {
            
    fld.style.background 'Red';
            
    error "U hebt geen keuze gemaakt uit de keuzelijst.\n";
        }
        else{
            
    fld.style.background 'White';

        }
        return 
    error;
    }

    function 
    checkname (fld) {
        var 
    error "";
        if (
    fld.value == "") {
            
    fld.style.background 'Red';
            
    error "U hebt geen naam ingevuld.\n";

        }
        else{
            
    fld.style.background 'White';

        }
        var 
    magniet '/[\(\)\<\>\,\;\:\\\/"\[\]]/]';
        if (
    fld.value.match(magniet)) {
            
    fld.style.background 'Red';
            
    error="De naam bevat verboden tekens.\n";

        }
        else{
            
    fld.style.background 'White';

        }
        return 
    error;
    }


    function 
    validateEmpty(fld) {
        var 
    error "";

        if (
    fld.value.length == 0) {
            
    fld.style.background 'Red';
            
    error "Je hebt geen bericht geschreven.\n"
        
    } else {
            
    fld.style.background 'White';
        }
        return 
    error;
    }


    function 
    trim(s)
    {
        return 
    s.replace(/^\s+|\s+$/, '');
    }
    function 
    validateEmail(fld) {
        var 
    error="";
        var 
    tfld trim(fld.value);                        // value of field with whitespace trimmed off
        
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
        var 
    illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

        if (fld.value == "") {
            fld.style.background = 'Red';
            error = "
    Je heb geen e-mail adres ingevuld .\n";
        } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
            fld.style.background = 'Red';
            error = "
    Vul een geldig e-mail adres in alstublieft.\n";
        } else if (fld.value.match(illegalChars)) {
            fld.style.background = 'Red';
            error = "
    Het e-mail adres bevat niet toegelaten tekens.\n";
        } else {
            fld.style.background = 'White';
        }
        return error;


  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Alexander_003. Welcome to SitePoint.

    Where is your file located in relation to the page?

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what do you mean you can see the include in the header op my html page .

    <script type="text/javascript" src="./js/contact.js"></script>

    I want to do the following thing I want to send the form to the js function so all fields can be checked.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Alexander_003 View Post
    what do you mean you can see the include in the header op my html page
    You said it wasn't working, so the first thing to check is that your path is correct. So I am asking you to describe where the js file is in relation to this page so that we can tell you if it's right or not. Your current link is asking the page to look for the /js/ folder in the same folder as the current page. Is that where it's located?

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes me js files are located in the js folder wich is located in de root so the files are in ../js/

    I think the problem is the comunication between the form and the js file.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Alexander_003 View Post
    I think the problem is the comunication between the form and the js file.
    Still may be worth playing with the file path, though. If the /js/ folder is in the root, I would link to it like this (without the dot):

    Code:
    <script type="text/javascript" src="/js/contact.js"></script>
    If the JS works when embedded in the page, I would think the problem is most likely to be a file path.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •