Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15

Thread: Form help

  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post

    Form help

    Hey Guys,

    A friend of mine helped me develop a 'required' field for my form. When I click the submit button and one of the fields doesn't have anything in it, a "Please fill in this form" appears underneath it.

    However when all fields are filled in, It doesn't actually submit. I'm guessing that's because the SUBMIT button is called button instead of submit.

    It's hard to explain, but I'm hoping someone can help me.

    Here it is: http://kupengalodge.co.nz/contactus.php
    Source code: http://kupengalodge.co.nz/help.txt

    Any help is appreciated.

    Cheers,
    LTC

    p.s The reason I've done it this way is because I do NOT want it to come up in an Alert box.

  2. Users who have thanked lordtopcat for this post:

    Ninjamonkey (06-23-2008)

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    127.0.0.1
    Posts
    43
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Try changing the checkform function to this:

    Code:
    function checkForm(form, fields, errorMSG, errorBox, no_fields)
    {
    	for (i = 0; i < no_fields; i++)
    	{
    		if (document.getElementById(fields[i]).value == "")
    		{
    			document.getElementById(errorBox[i]).innerHTML = errorMSG[i];
    		}
    		else
    		{
    			document.getElementById(errorBox[i]).innerHTML = "";
    			document.contact.submit();
    
    		}
    	}
    }
    However, your form action is set to contactus.php which is the page where your form is on and I don't see any script that would process the values of the form fields so I doubt that anything would happen.

    What would you want to see after submitting the page btw?

  • Users who have thanked Dondon for this post:

    lordtopcat (06-21-2008)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Yeah, I don't plan to have it pointing to that page, it was just while I was testing it .

    What you gave me worked! TYvm

    How hard would it be to have the border of the form change to red if it's not filled in?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by lordtopcat View Post
    How hard would it be to have the border of the form change to red if it's not filled in?
    have a look at http://www.w3schools.com/HTMLDOM/prop_style_border.asp
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by lordtopcat View Post
    How hard would it be to have the border of the form change to red if it's not filled in?
    You mean the form or its element? Anyway, feel free to ammend:
    Code:
    function checkForm(form, fields, errorMSG, errorBox, no_fields)
    {
    	for (i = 0; i < no_fields; i++)
    	{
    		if (document.getElementById(fields[i]).value == "")
    		{
    			document.getElementById(errorBox[i]).innerHTML = errorMSG[i];
    			document.contact.style.border='1px solid #ff0'; // Border of the form
    			document.getElementById(fields[i]).style.border='1px solid #ff0'; // border of the fields		
    }
    		else
    		{
    			document.getElementById(errorBox[i]).innerHTML = "";
    			document.contact.submit();
    
    		}
    	}
    }
    The one that appears earlier is to highlight your form, the later highlights the form's element.

    Hope it helps.
    Last edited by rangana; 06-21-2008 at 11:34 AM. Reason: hex for color red
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    lordtopcat (06-21-2008)

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rangana View Post
    You mean the form or its element? Anyway, feel free to ammend:
    Code:
    function checkForm(form, fields, errorMSG, errorBox, no_fields)
    {
    	for (i = 0; i < no_fields; i++)
    	{
    		if (document.getElementById(fields[i]).value == "")
    		{
    			document.getElementById(errorBox[i]).innerHTML = errorMSG[i];
    			document.contact.style.border='1px solid #ff0'; // Border of the form
    			document.getElementById(fields[i]).style.border='1px solid #ff0'; // border of the fields		
    }
    		else
    		{
    			document.getElementById(errorBox[i]).innerHTML = "";
    			document.contact.submit();
    
    		}
    	}
    }
    The one that appears earlier is to highlight your form, the later highlights the form's element.

    Hope it helps.
    Thank you very much!

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Hey guys,

    A new problem has come up.

    When I click Submit, the Please fill in xxx comes up. However if I just fill in ONE of those fields, when the rest are still blank it goes ahead and submits, with the rest of the fields being blank.

    How can I make sure that the form doesn't submit UNTIL the required fields have been filled in?

    Cheers,
    LTC

    p.s The form and source code can still be located in the top post.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    function checkForm(form, fields, errorMSG, errorBox, no_fields)
    {
         var flag=0;	
         for (i = 0; i < no_fields; i++)
    	{
    		if (document.getElementById(fields[i]).value == "")
    		{
    			document.getElementById(errorBox[i]).innerHTML = errorMSG[i];
    			document.contact.style.border='1px solid #ff0'; // Border of the form
    			document.getElementById(fields[i]).style.border='1px solid #ff0'; // border of the fields		
                            flag=1;
                    }
    		else
    		{
    			document.getElementById(errorBox[i]).innerHTML = "";
    			
    
    		}
    	}
       if(flag==0)
         document.contact.submit();
    }
    PS: When there is no javascript support in the browser, your form won't submit any data. So, the best way is to change the input type from button to submit and call the validation procedure in the onsubmit of the form.
    Last edited by abduraooft; 06-21-2008 at 01:00 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    lordtopcat (06-22-2008)

  • #9
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Thank you very much.

    Last question. When a user clicks submit when a field is empty, the background color changes and the 'Required' comes up. When I then enter something into that field, the 'Required' disappears but the background color stays. How can I get it to change back to the white background?

    Cheers,
    LTC

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by lordtopcat View Post
    When a user clicks submit when a field is empty, the background color changes and the 'Required' comes up. When I then enter something into that field, the 'Required' disappears but the background color stays. How can I get it to change back to the white background?
    W3C DOM2 Style

    Code:
    document.getElementById("field1").style.backgroundColor = "";
    Replace document.getElementById("field1") with the respective element reference for each form control element.

    Note that I assumed that by “white” you meant the previous background color of the element (which could be based upon browser or OS defaults, a user style sheet, or something specified in a linked or embedded style sheet); if you literally wanted “white”, add that word between the two adjacent double quotation marks ("") in the code shown above.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Arbitrator View Post
    W3C DOM2 Style

    Code:
    document.getElementById("field1").style.backgroundColor = "";
    Replace document.getElementById("field1") with the respective element reference for each form control element.
    Lol how? I'm a novice with JS and don't know anything really. Can you walk me through it?

    Quote Originally Posted by Arbitrator
    Note that I assumed that by “white” you meant the previous background color of the element (which could be based upon browser or OS defaults, a user style sheet, or something specified in a linked or embedded style sheet);
    Yep that's what I meant

  • #12
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Another error has popped up. All this works fine in FireFox, but not in Internet Explorer? In IE the form bg and border colors change, and the required pops up for only a second, and then it goes back to an empty form?

    How can I make it browser compatible?

    Cheers,
    LTC

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Probably the IE timing bug.

    Try:-

    setTimeout(function() {
    document.getElementById("fieldName").focus();
    }, 100); // 100ms delay

  • #14
    New Coder
    Join Date
    Jun 2008
    Posts
    31
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    Probably the IE timing bug.

    Try:-

    setTimeout(function() {
    document.getElementById("fieldName").focus();
    }, 100); // 100ms delay
    That's inserted where ?

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Code:
    if (document.getElementById(fields[i]).value == "") {
    
    setTimeout(function() {
    document.getElementById(errorbox[i]).focus();
    }, 100); // 100ms delay 
    
    document.getElementById(errorBox[i]).innerHTML = errorMSG[i];
    document.contact.style.border='1px solid #ff0'; // Border of the form
    document.getElementById(fields[i]).style.border='1px solid #ff0'; // border of the fields		
    flag=1;
    Last edited by Philip M; 06-23-2008 at 01:46 PM.


  •  

    Posting Permissions

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