[RESOLVED] JavaScript - Problem with form

[johanm]

Hi there,

I posted this in the html forum yesterday, but did get any response, so maybe it's more related to the actual scripting or CGI. Please let me know if I shouldn't post in two places.

I created a form, but have a hard time getting it to work properly when I test it with the cgiecho that I was told to use by my web host. Here's a link to the form page: http://www.harmonihomeconsulting.com/contact-hhc.htm
I used a script that I found in this forum (renamed it to "submitForm") and adjusted it to reflect my inputs etc. with the goal of having certain fields be required when someone fills in the form. It seems to work when I fill in all the fields, but not when some are left blank. I selected the script as it seemed to be the easiest to understand for someone like myself that know basically nothing about scripts.
My web host did provide instructions on another way to make the input required, but it doesn't seem to work either, so I went back to the script in hope of getting that to work, but with no luck. I can upload the text file that goes with this as well if needed. Any assistance with this would be greatly appreciated. Thanks for your help! :)

[omnicity]

It seems to work when I fill in all the fields,

Could you expand on that remark a little, please?

One thing I note is that your validation is only fired if someone clicks the submit button - you should put it onto the form tag instead, so that it intercepts the form submission even if the user just hits the return key.

[johanm]

My comment: "It seems to work when I fill in all the fields" was meant to describe that if someone fills in all the fields in the form and hits submit, then the test page comes up correctly and shows all the text that was input by the visitor. However, if some of the required input fields are left blank, then the visitor just gets a general error message, which is not one telling the visitor which fields were left blank.

I just tried to hit "enter" like you said and was surprised that a visitor could submit the form that way. Thanks for the tip! I'm pretty green at this, but are you telling me that I should add the validation to the opening or closing form tag? Would it still read line this: onclick="submitform();" or should it say something else since the visitor isn't clicking on anything like maybe onenter or something? Just a guess.

Thanks again and I hope the clarification helps a little.

[rangana]

You might find these links useful:

Remove highlighted:

<input type="submit" value="Submit" onclick="submitform();" />


...but instead, place it here:

<form name="contact_form" id="contact_form" method="post" action="http://harmonihomeconsulting.com/cgi-bin/cgiecho/e-mail_template.txt" onsubmit="return submitForm();">


Use this modified script instead:

function submitForm() {
var required=['first_name','last_name','address_1','city','state','zip','country',
'phone','email','lead_type_description' // Ensure the last part don't have a comma
]; // Place in this array, the IDs of the elements that you think is required

for (var i = 0 ; i < required.length ; i++) {
if (document.getElementById(required[i]).value=='') {
alert('Please fill in the fields labeled with asterisk');
return false;
}
}
}





Hope that helps.

[johanm]

rangana,

Thank you for putting that together for me! It seems to work great. However, when I filled out the form and changed the CGIECHO to CGIemail, I get the "success" page where it says an email was sent to me, but then there's no way for the visitor to go back to for example the home page. Do you know if I need to customize the "success" page or something for this to happen. Also, I didn't actually receive the email, but that's probably a different issue that I will need to address with the web host. Thanks again!

Johanm

[rangana]

I suppose the "back" button is enabled ;)

Anyway, do you have control over the CGIemail page? You could setup some redirection on it, either...
html - meta refresh
javascript - location.href()
PHP - header()

Hope that makes sense.

[johanm]

The back button does work, but that just taked them back to the form they just filled out. I'm not sure if I can get control over the CGIemail page, but will try to contact the host. More later... thanks again.

[johanm]

rangana,

I just ran a validation on the page as it didn't show in IE for some reason. I found some leftover code from when I inserted your awesome script, but I still get one validation error. Any idea what to do about that? Here's the link to the revised page: http://www.harmonihomeconsulting.com/contact-hhc.htm
Still working with my web host to get the other issue resolved. Thanks again for all your help!

Johanm

[rangana]

What validation error is it ?

[johanm]

Validation Output: 1 Error
Line 124, Column 20: character "<" is the first character of a delimiter but occurred as data.
for (var i = 0 ; i < required.length ; i++) {
This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "&lt;"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.

Line 124, Column 21: XML Parsing Error: StartTag: invalid element name.
for (var i = 0 ; i < required.length ; i++) {

[rangana]

You either need to place the codes in CDATA islands or make the script external.

For further reading:
http://javascript.about.com/library/blxhtml.htm
http://www.codehouse.com/javascript/tips/xhtml/

[johanm]

That took care of that problem and I learned something in the process - awesome! I would imagine that those two links would be useful to other novices such as myself who know very little about javascript and who are just making the transition from html to xhtml. Thanks again. I will try to bug my host again and will report back later. By the way, I wasn't sure how to call the script from within the htm document if I made it external, so I added the CDATA info inside the htm document instead.

[johanm]

Update on web host. Got the email to work and can now receive the date that's being submitted via the form - yipee! BUT the web host tech support didn't know how to customize the file in the cgi-bin or whatever that would allow me to design a page with links, etc. that the visitors could click on to go somewhere other than hitting the back button that would take them back to the filled-in form. All the visitor gets is a text file page saying that an email was submitted and a copy of what they filled in. Feel free to check out the form page and try to send me a filled in contact form (www.harmonihomeconsulting.com/contact-hhc.htm) to see what I'm talking about here. It's a little frustrating, especially as I have seen this done all over the place, but have no idea how to go about it. So, not quite sure what to do next, but giving up isn't an option, but if anyone here has any suggestions - I'm all ears. Thanks again to rangana for all the awesome help - thank you!

[johanm]

I finally got it to work. I ended up adding the follwing to the html file right after the opening form tag:
<input type="hidden" name="success" value="../../../success.htm" />
Thought I would post the solution to the challenge here in case someone else runs into the same problem. It basically allows me to still send the txt file to the cgi-bin and then send the user to another web page where there are links etc. so they don't get stuck with just the text page. Thanks again for all the help in getting this resolved.
Johanm