...

View Full Version : Form help



lordtopcat
06-21-2008, 06:41 AM
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.

Dondon
06-21-2008, 06:55 AM
Try changing the checkform function to this:


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?

lordtopcat
06-21-2008, 10:49 AM
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?

abduraooft
06-21-2008, 11:03 AM
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

rangana
06-21-2008, 11:29 AM
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:


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.

lordtopcat
06-21-2008, 12:03 PM
You mean the form or its element? Anyway, feel free to ammend:


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!

lordtopcat
06-21-2008, 12:46 PM
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.

abduraooft
06-21-2008, 12:55 PM
Try

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.

lordtopcat
06-22-2008, 02:21 AM
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

Arbitrator
06-22-2008, 03:49 AM
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


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.

lordtopcat
06-22-2008, 06:52 AM
W3C DOM2 Style


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?


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 :)

lordtopcat
06-23-2008, 03:45 AM
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

Philip M
06-23-2008, 08:30 AM
Probably the IE timing bug.

Try:-

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

lordtopcat
06-23-2008, 12:17 PM
Probably the IE timing bug.

Try:-

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

That's inserted where ?

Philip M
06-23-2008, 01:43 PM
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;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum