Need help with an HTML form - for OmniUnlimited:

Aha, try doing this then:

foreach($_POST as $key => $value) {
      echo "key = " . $key . ", value = " . $value;
      }

This should list your $_POST's on the page.  See if they show up anywhere.

Nothing showed up. The only difference is that the form is broken now, it does not submit.

not broken anymore but I couldn't get the post thing to work.

Sorry, away from the office for a while.

Can you post the contact-form.js file?

contact-form.js

Thank you!  Could you do me a favor and insert the following code at line 261 of that file (right after var mailHandlerURL = "bin/MailHandler." + fileExtension;):

alert(mailHandlerURL);

After doing this can you submit the form and tell me exactly what file shows up in the dialog?

You should know that the datastring being passed to this file does not contain the fields that you said weren't showing up.

bin/MailHandler.php

I'm assuming i need to edit mailhandler.php. I think I tried to edit the datastring and it broke the form saying it wasn't defined.

I am assuming that MailHandler.php is the code you showed me in the other question.  OK, I know how to fix it.  First off change the $messageBody string in the MailHandler.php to the following:

      $messageBody .= '<p>Visitor Name: ' . $_POST["name"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Job Title: ' . $_POST["title"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Company: ' . $_POST["company"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>EMail Address: ' . $_POST["email"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Address: ' . $_POST["address"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Phone Number: ' . $_POST["phone"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Fax: ' . $_POST["fax"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Additional Information: ' . $_POST["additional"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Literature: ' . $_POST["literature"] . '</p>' . "\n";  //note the change to small "l"
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Contact: ' . $_POST["contact"] . '</p>' . "\n";

Erase lines 231 to 232 of the contact-form.js (the phone validate code) as there is not validation html in your contact form.

Erase as well lines 319 to 323 (the isValidPhoneNumber function) and lines 362 to 369 (the validatePhone function) since you do not need these for the above reason.

Next take out line 252 of contact-form.js and substitute the following:

      var address = $("textarea#address").val();
      var phone = $("input#phone").val();
      var fax = $("input#fax").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;

     if ($('input#literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#contact').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + liturature + '&contact=' + contact;

Unless I made a mistake somewhere, that should do it.

Ha!  I knew it.  I did make a mistake.  Try this for your datastring:

var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + literature + '&contact=' + contact;

You're awesome. Thank you very much. I edited the code, I am just waiting to get the e-mail. It takes forever.
I think I want to keep the phone validation, except make it not required. Should I edit the html and put the 2 lines in it for phone?

Um sure, but how are you going to make it not required?  If it is not required, then the form will submit and the user will never see any error message.

The error message for the 4 that worked came up on the fly, before you click submit.

I put this in by phone in the html but it is not validating on the fly like the others.

<label class="error" for="phone" id="phone">*This is not a valid phone number.</label>

Of course not.  In order to make this work, you would need to do the following things:

Add the following to your html:

<label class="error" for="phone" id="phone_error">*This field is required.</label>
<label class="error" for="phone" id="phone_error2">*This is not a valid phone number.</label>

And take out

var phone = $("input#phone").val();

in the code I gave you.

If this is the case, don't you want to validate your fax number as well?

Yes. I would have just done the same for fax.

OK, then add to line 233 of contact-form.js:

            if(validateFax()){
                  fax = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }

Add to line 371

function validateFax(){
      var fax = $("input#fax").val();
      if(!isValidPhoneNumber(fax)){
            return false;
      }else{
            return phone;
      }
}

Take out var fax = $("input#fax").val(); from the code I gave you and add

<label class="error" for="fax" id="fax_error">*This field is required.</label>
<label class="error" for="fax" id="fax_error2">*This is not a valid fax number.</label>

to your html

Dang, it must be late.

function validateFax(){
      var fax = $("input#fax").val();
      if(!isValidPhoneNumber(fax)){
            return false;
      }else{
            return fax;
      }
}

Thank you.

I wntered the info but It does not validate fax or phone. I can put letters instead of numbers and it still goes through.

Also, The form still does not send me anything except the first four entries.

I get this:




Visitor Name: ergewrg

Job Title: ewrgewrg

Company: ergwerg

EMail Address: ewrgewrg@regertg.com

Address:

Phone Number:

Fax:

Additional Information:

Literature:

Contact:
 

I notice that it will validate fax but will not stop the form from submitting and the error shows when you click submit, not after it is typed. ( I think they call that on blur?)

OK, now I gave you a lot of code.  You have to be very careful to put everything EXACTLY the way I presented it or it will not work.

The first thing I saw when I inspected your site was that you did not stick both labels in for the phone input.

As far as the fax is concerned, I thought you said that the error showed up on the fly and didn't stop the form from submittting?  At least that's the way I coded it, based on your description.

I did forget to include these pieces of code.  This one should be placed at line 83 of the contact-form.js file:

      // show message error if after editing
      // the fax field contains improper value
      $("input#fax").blur(function(){
            if(validateInput('fax')){
                  if(!validateFax()){
                        $("label#fax_error").hide();
                        $("label#fax_error2").show();
                  }
            }else{
                  $("label#fax_error2").hide();
            }
      });

and this one at line 148:

      $("input#fax").keydown(function(){
            if(validateInput('fax')){
                  $("label#fax_error").hide();
            }
            if(validatePhone()){
                  $("label#fax_error2").hide();
            }
      });
      

If you want the fax to function the same as the others, you need to change the other code I gave your for line 371 to the following:

            if(validateFax()){
                  phone = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }else{
                  $("label#fax_error").show();
                  $("label#fax_error2").hide();
                  quit = true;
            }

Now to determine what is going on with your output, could you place an alert after the following code at line 252:

      var address = $("textarea#address").val();
      var phone = $("input#phone").val();
      var fax = $("input#fax").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;

      alert(address); // Stick this alert here

Submit your form again with the address field filled in ahd tell me what appears in your dialog box.

I get an error that says validatefax is not defined.

There see, that was my point.  I gave you a lot of code and you missed some.

The instructions to install validateFax is in comment 08/06/11 12:35 AM, ID: 36320988 and 08/06/11 12:37 AM, ID: 36320991 above (cause I made a mistake).

Didn't you say to replace the code that was on 371 with this?
Maybe I am confusing something.


  if(validateFax()){
                  phone = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }else{
                  $("label#fax_error").show();
                  $("label#fax_error2").hide();
                  quit = true;
            }

My apologies.  It does look like I cited the wrong place for the code.  It's not you, it's me.

OK, first off the code you just showed me should be on line 233, not 371:

  if(validateFax()){
                  phone = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }else{
                  $("label#fax_error").show();
                  $("label#fax_error2").hide();
                  quit = true;
            }    

This is the code that should go on line 371:

function validateFax(){
      var fax = $("input#fax").val();
      if(!isValidPhoneNumber(fax)){
            return false;
      }else{
            return fax;
      }
}

Ok looks like that worked. In the popup box the string that I put in the address field showed up.

Did you get your email?

E-mail never came in. Maybe the pop up stopped it?

No, that wouldn't have anything to do with it.  Do you remember if, after you submitted the form the words "Contact form submitted!" and "We will be in touch soon." showed up?

Now, I need you to move and change the alert to the following and submit the form again:

      var address = $("textarea#address").val();
      var phone = $("input#phone").val();
      var fax = $("input#fax").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;

     if ($('input#literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#contact').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + liturature + '&contact=' + contact;

     alert(dataString);

ok, that one showed what I put in address but the e-mail still didnt show it.

Visitor Name: jhvjhvuuytgoiug

Job Title: luighljbhlkj

Company: lhjgljhg

EMail Address: kuyhk@yfkyh.com

Address:

Phone Number:

Fax:

Additional Information:

Literature:

Contact:

They both said "Contact form submitted!" and "We will be in touch soon."

What did the alert say?  Did all the other information show there (the address, phone, fax, additional, literature, and contact)?

The alert said what I put in the address field.

OK, let me understand completely:

You filled in all the fields on the form and the address field is the only one that showed in the alert box?

yes
http://dantechmsp.com/tds/site_pro/index-5.html

Would you be so kind as to upload your contact-form.js file again?  What you are saying makes no sense.  I need to see the changes you made to it.

contact-form.js

Congratulations!  You did an outstanding job of updating the code.  The code is perfect!

I did see a couple of mistakes, however.  Not yours, mine...

The code should read like this:

      var address = $("textarea#address").val();
      var phone = $("input#phone").val();
      var fax = $("input#fax").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;

     if ($('input#Literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#Contactme').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + liturature + '&contact=' + contact;

     alert(dataString);

In looking at the code otherwise, I see no reason for you seeing in the alert only the address.  You should have seen at least the name, title, email, company, address, phone, fax and additional.

I am going to need your help to do some debugging.  Could you stick the following code at the very top of your script.js file:

var $ = jQuery.noConflict();

$('textarea#address').change(function() {
  alert($(this).val());
});  
$('input#phone').change(function() {
  alert($(this).val());
});  
$('input#fax').change(function() {
  alert($(this).val());
});  
$('textarea#additional').change(function() {
  alert($(this).val());
});  
$('input#Literature').change(function() {
  alert($(this).val());
});  
$(''input#Contactme'').change(function() {
  alert($(this).val());
});  

This code will not need you to submit the form.  I just need you to put some values into the address, phone, fax, and additional fields and see if an alert pops up with the value of the field once you change fields.  You need to also check and uncheck the Literature and Contact checkboxes.

Please let me know if this code operates in the way I described to you.  The alert should pop up once you leave the field.

I think that broke it..lol

After I replaced with that code it does not submit.

Ok, it was just a few spelling errors. I got it working.

This is what shows in the popup:
name=fvsf&title=sdfdfs&email=vdfvdsf@hfhf.com&company=fdvdfs&address=vdsfvdsfv&phone=ssdfsdfvsdfv&fax=999-999-9999&additional=sdfsdfv&literature=Yes&contact=Yes

Awesome!  Did you get your email?

yep:


Visitor Name: gjkgjkgjkg

Job Title: jjjjjjjjjjjjjj

Company: ffffffffffffffff

EMail Address: fgdd@tgyfg.com

Address:

Phone Number:

Fax:

Additional Information:

Literature:

Contact:

OK, can you post a copy of your MailHandler.php file?

MailHandler.php

OK, what is happening is making no sense.  Please modify your MailHandler.php so that it looks like this:
 

<?php
	$headers = 'From:' . $_POST["email"];
	$subject = 'A message from your site visitor ' . $_POST["name"];
	$messageBody = "";
	
	  $messageBody .= '<p>Visitor Name: ' . $_POST["name"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Job Title: ' . $_POST["title"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Company: ' . $_POST["company"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>EMail Address: ' . $_POST["email"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Address: ' . $_POST["address"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Phone Number: ' . $_POST["phone"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Fax: ' . $_POST["fax"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Additional Information: ' . $_POST["additional"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Literature: ' . $_POST["literature"] . '</p>' . "\n";  //note the change to small "l"
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Contact: ' . $_POST["contact"] . '</p>' . "\n";





	if($_POST["stripHTML"] == 'true'){
		$messageBody = strip_tags($messageBody);
	}

	try{
		if(!mail($owner_email, $subject, $messageBody, $headers)){
			throw new Exception('mail failed');
		}else{
			echo $_POST['phone']; //'mail sent'
		}
	}catch(Exception $e){
		echo $e->getMessage() ."\n";
	}
?>

Select allOpen in new window

Next, modify the ajax of your contact-form.js file to read:

 

$.ajax({
			type: "POST",
			url: mailHandlerURL,
			data: dataString,
			success: function(msg){
                                alert(msg);
				$('.error').hide();
				$('form#contact-form').clearForm();
				$('#contact_form').html("<div class='download-box'>Contact form submitted!</div>")
					.append("<br><label for='message'><b>We will be in touch soon.</b></label>")
					.hide()
					.fadeIn(1500, function(){
						$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>back</a>");
					});
			}
		});

Select allOpen in new window

Then submit your form.  You should see an alert box pop up when the screen says "Contact form submitted!".  I need to know what that alert box says.  It should be the phone number you put in the form.

Yes, phone number was in the pop up.

OK, then your email is not making any sense.

You said that for some reason, you had huge delays in getting them.  Could it not be possible that you are seeing old emails, and the new ones still have not arrived?

They are coming in faster now and I used specific names in the text fields so i would recognize them.
There is a mailhandler.ashx file, would that have anything in it that needs changing?

A mailhandler file shouldn't modify the message content, but I suppose anything is possible.  Can you post the file for me?

<%@ WebHandler Language="C#" Class="Handler" Debug="true" %>

using System;
using System.Web;
using System.Net.Mail;
using System.Text.RegularExpressions;

public class Handler : IHttpHandler {
	public void ProcessRequest (HttpContext context) {
		SmtpClient mailClient = new SmtpClient(context.Request.Form.Get("smtpMailServer"));
		string owner_email = context.Request.Form.Get("owner_email");
		string subject = "A message from your site visitor " + context.Request.Form.Get("name");
		string email = context.Request.Form.Get("email");
		string messageBody = "";
	
		messageBody += "<p>Visitor: " + context.Request.Form.Get("name") + "</p>\n";
		messageBody += "<br>\n";
		messageBody += "<p>Email Address: " + context.Request.Form.Get("email") + "</p>\n";
		messageBody += "<br>\n";
		messageBody += "<p>Phone Number: " + context.Request.Form.Get("phone") + "</p>\n";
		messageBody += "<br>\n";
		messageBody += "<p>Message: " + context.Request.Form.Get("message") + "</p>\n";
	
			
		MailMessage message = new MailMessage();
	
		try{
			message.From = new MailAddress(email.ToString());
		}catch (FormatException e) {
			context.Response.Write(e.Message);
		}
	
		message.To.Add(owner_email);
		message.Subject = subject;
		if(context.Request.Form.Get("stripHTML") == "true"){
			message.IsBodyHtml = false;
            messageBody = Regex.Replace(messageBody, "<.*?>", string.Empty);
		}else{
		  	message.IsBodyHtml = true;
		}
		message.Body = messageBody;
		
		try{
			mailClient.Send(message);
		}catch (SmtpException e) {
			context.Response.Write("mail failed");
		}
		context.Response.Write("mail sent");
	}

	public bool IsReusable {
		get	{
			return false;
		}
	}
}

Select allOpen in new window

Huh.  I don't even know what this file is doing on your site.  It performs no function as far as I can see, because if it did something, your email should look like this:

Visitor:: gjkgjkgjkg

EMail Address: fgdd@tgyfg.com

Phone Number: jjjjjjjjjjjjjj

Message: ffffffffffffffff

You know what?  I just discovered some problems with your MailHandler.php file.  For one thing, there is no source for the owner email data which determines where the email is to be sent.  Are you the owner?  If so, we could just stick your email address there.

That part is in the html.

Where?

Oh shoot, forget that last statement.  I see them.

OK, you have several hidden fields in your html that your code does not take into consideration.  To get this to work, we need to modify your code as follows:

First make the following modifications to the code that starts at line 296 of your most recent contact-form.js file:
 

var address = $("textarea#address").val();
      var phone = $("input#phone").val();
      var fax = $("input#fax").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;
      var owner_email = $("input#owner_email").val();
      var serverProcessorType = $("input#serverProcessorType").val();
      var smtpMailServer = $("input#smtpMailServer").val();
      var stripHTML = $("input#stripHTML").val();

     if ($('input#literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#contact').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + liturature + '&contact=' + contact + '&owner_email=' + owner_email + '&serverProcessorType=' + serverProcessorType + '&smtpMailServer=' + smtpMailServer + '&stripHTML=' + stripHTML;

Select allOpen in new window

Next, make the following modifications to your MailHandler.php file:
 

$owner_email = $_POST["owner_email"];
	$headers = 'From:' . $_POST["email"];
	$subject = 'A message from your site visitor ' . $_POST["name"];
	$messageBody = "";
	
	  $messageBody .= '<p>Visitor Name: ' . $_POST["name"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Job Title: ' . $_POST["title"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Company: ' . $_POST["company"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>EMail Address: ' . $_POST["email"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Address: ' . $_POST["address"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Phone Number: ' . $_POST["phone"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Fax: ' . $_POST["fax"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Additional Information: ' . $_POST["additional"] . '</p>' . "\n";
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Literature: ' . $_POST["literature"] . '</p>' . "\n";  //note the change to small "l"
      $messageBody .= '<br>' . "\n";
      $messageBody .= '<p>Contact: ' . $_POST["contact"] . '</p>' . "\n";





	if($_POST["stripHTML"] == 'true'){
		$messageBody = strip_tags($messageBody);
	}

	try{
		if(!mail($owner_email, $subject, $messageBody, $headers)){
			throw new Exception('mail failed');
		}else{
			echo 'mail sent';
		}
	}catch(Exception $e){
		echo $e->getMessage() ."\n";
	}
?>

Select allOpen in new window

Ok, now I get a big popup with this:

<?php

	$owner_email = $_POST["owner_email"];

	$headers = 'From:' . $_POST["email"];

	$subject = 'A message from your site visitor ' . $_POST["name"];

	$messageBody = "";

	

	  $messageBody .= '<p>Visitor Name: ' . $_POST["name"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Job Title: ' . $_POST["title"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Company: ' . $_POST["company"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>EMail Address: ' . $_POST["email"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Address: ' . $_POST["address"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Phone Number: ' . $_POST["phone"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Fax: ' . $_POST["fax"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Additional Information: ' . $_POST["additional"] . '</p>' . "\n";

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Literature: ' . $_POST["literature"] . '</p>' . "\n";  //note the change to small "l"

      $messageBody .= '<br>' . "\n";

      $messageBody .= '<p>Contact: ' . $_POST["contact"] . '</p>' . "\n";











	if($_POST["stripHTML"] == 'true'){

		$messageBody = strip_tags($messageBody);

	}



	try{

		if(!mail($owner_email, $subject, $messageBody, $headers)){

			throw new Exception('mail failed');

		}else{

			echo 'mail sent';

		}

	}catch(Exception $e){

		echo $e->getMessage() ."\n";

	}

?>

Select allOpen in new window

I'm confused.  You are getting a popup?

Did you revert your ajax to

$.ajax({
			type: "POST",
			url: mailHandlerURL,
			data: dataString,
			success: function(){
				$('.error').hide();
				$('form#contact-form').clearForm();
				$('#contact_form').html("<div class='download-box'>Contact form submitted!</div>")
					.append("<br><label for='message'><b>We will be in touch soon.</b></label>")
					.hide()
					.fadeIn(1500, function(){
						$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>back</a>");
					});
			}
		});

Select allOpen in new window

Yeah I messed up the ajax.
Ok, it works now except the checkboxes say no either way.

That one is on me, I copied some old code.  Should be

     if ($('input#Literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#Contactme').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

Awesome. That worked. I appreciate it immensely. I noticed that the phone doesn't validate but fax does. I'm scared to mess with it since everything is working. Can you hint me to where I need to edit?  

Yes, there are still some errors.  Change your code to this in the contact-form.js file:

$("a#submit").click(function(){
		// validate and process form
                var name = '';
                var title = '';
                var company = '';
                var email = '';
                var phone = '';
                var fax = '';
		var quit = false;
		if(validateName()){
			name = validateName();
			$("label#name_error").hide();
			$("label#name_error2").hide();
		}else if(validateInput('name')){
			$("label#name_error").hide();
			$("label#name_error2").show();
		}else{
			$("label#name_error").show();
			$("label#name_error2").hide();
			quit = true;
		}
		
		
		if(validateTitle()){
			title = validateTitle();
			$("label#title_error").hide();
			$("label#title_error2").hide();
		}else if(validateInput('title')){
			$("label#title_error").hide();
			$("label#title_error2").show();
		}else{
			$("label#title_error").show();
			$("label#title_error2").hide();
			quit = true;
		}
		
		
		
		if(validateCompany()){
			company = validateCompany();
			$("label#company_error").hide();
			$("label#company_error2").hide();
		}else if(validateInput('company')){
			$("label#company_error").hide();
			$("label#company_error2").show();
		}else{
			$("label#company_error").show();
			$("label#company_error2").hide();
			quit = true;
		}
		
		
		
		if(validateEmail()){
			email = validateEmail();
			$("label#email_error").hide();
			$("label#email_error2").hide();
		}else if(validateInput('email')){
			$("label#email_error").hide();
			$("label#email_error2").show();
		}else{
			$("label#email_error").show();
			$("label#email_error2").hide();
			quit = true;
		}
		if(validatePhone()){
			phone = validatePhone();
			$("label#phone_error").hide();
			$("label#phone_error2").hide();
		}else if(validateInput('phone')){
			$("label#phone_error").hide();
			$("label#phone_error2").show();
		}else{
			$("label#phone_error").show();
			$("label#phone_error2").hide();
			quit = true;
		}
		
		 if(validateFax()){
                  fax = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }else{
                  $("label#fax_error").show();
                  $("label#fax_error2").hide();
                  quit = true;
            }	
		
	var address = $("textarea#address").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;
      var owner_email = $("input#owner_email").val();
      var serverProcessorType = $("input#serverProcessorType").val();
      var smtpMailServer = $("input#smtpMailServer").val();
      var stripHTML = $("input#stripHTML").val();

     if ($('input#literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#contact').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + literature + '&contact=' + contact + '&owner_email=' + owner_email + '&serverProcessorType=' + serverProcessorType + '&smtpMailServer=' + smtpMailServer + '&stripHTML=' + stripHTML;
		if(serverProcessorType == 'asp'){
			fileExtension = 'ashx';
		}else{
			fileExtension = serverProcessorType;
		}
		var mailHandlerURL = "bin/MailHandler." + fileExtension;
		
		$.ajax({
			type: "POST",
			url: mailHandlerURL,
			data: dataString,
			success: function(){
				$('.error').hide();
				$('form#contact-form').clearForm();
				$('#contact_form').html("<div class='download-box'>Contact form submitted!</div>")
					.append("<br><label for='message'><b>We will be in touch soon.</b></label>")
					.hide()
					.fadeIn(1500, function(){
						$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>back</a>");
					});
			}
		});
				
		return false;
	});

Select allOpen in new window

Changed it but it broke it. It complains about if(validateName()){

OK, I didn't see the variable declarations, but now I see them.  Change the code as follows:

$("a#submit").click(function(){
		// validate and process form
		var quit = false;
		if(validateName()){
			name = validateName();
			$("label#name_error").hide();
			$("label#name_error2").hide();
		}else if(validateInput('name')){
			$("label#name_error").hide();
			$("label#name_error2").show();
		}else{
			$("label#name_error").show();
			$("label#name_error2").hide();
			quit = true;
		}
		
		
		if(validateTitle()){
			title = validateTitle();
			$("label#title_error").hide();
			$("label#title_error2").hide();
		}else if(validateInput('title')){
			$("label#title_error").hide();
			$("label#title_error2").show();
		}else{
			$("label#title_error").show();
			$("label#title_error2").hide();
			quit = true;
		}
		
		
		
		if(validateCompany()){
			company = validateCompany();
			$("label#company_error").hide();
			$("label#company_error2").hide();
		}else if(validateInput('company')){
			$("label#company_error").hide();
			$("label#company_error2").show();
		}else{
			$("label#company_error").show();
			$("label#company_error2").hide();
			quit = true;
		}
		
		
		
		if(validateEmail()){
			email = validateEmail();
			$("label#email_error").hide();
			$("label#email_error2").hide();
		}else if(validateInput('email')){
			$("label#email_error").hide();
			$("label#email_error2").show();
		}else{
			$("label#email_error").show();
			$("label#email_error2").hide();
			quit = true;
		}
		if(validatePhone()){
			phone = validatePhone();
			$("label#phone_error").hide();
			$("label#phone_error2").hide();
		}else if(validateInput('phone')){
			$("label#phone_error").hide();
			$("label#phone_error2").show();
		}else{
			$("label#phone_error").show();
			$("label#phone_error2").hide();
			quit = true;
		}
		
		 if(validateFax()){
                  fax = validateFax();
                  $("label#fax_error").hide();
                  $("label#fax_error2").hide();
            }else if(validateInput('fax')){
                  $("label#fax_error").hide();
                  $("label#fax_error2").show();
            }else{
                  $("label#fax_error").show();
                  $("label#fax_error2").hide();
                  quit = true;
            }	
		
	var address = $("textarea#address").val();
      var additional = $("textarea#additional").val();
      var literature;
      var contact;
      var owner_email = $("input#owner_email").val();
      var serverProcessorType = $("input#serverProcessorType").val();
      var smtpMailServer = $("input#smtpMailServer").val();
      var stripHTML = $("input#stripHTML").val();

     if ($('input#literature').is(':checked'))
          literature = "Yes";
     else
          literature = "No";

     if ($('input#contact').is(':checked'))
          contact = "Yes";
     else
          contact = "No";

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + literature + '&contact=' + contact + '&owner_email=' + owner_email + '&serverProcessorType=' + serverProcessorType + '&smtpMailServer=' + smtpMailServer + '&stripHTML=' + stripHTML;
		if(serverProcessorType == 'asp'){
			fileExtension = 'ashx';
		}else{
			fileExtension = serverProcessorType;
		}
		var mailHandlerURL = "bin/MailHandler." + fileExtension;
		
		$.ajax({
			type: "POST",
			url: mailHandlerURL,
			data: dataString,
			success: function(){
				$('.error').hide();
				$('form#contact-form').clearForm();
				$('#contact_form').html("<div class='download-box'>Contact form submitted!</div>")
					.append("<br><label for='message'><b>We will be in touch soon.</b></label>")
					.hide()
					.fadeIn(1500, function(){
						$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>back</a>");
					});
			}
		});
				
		return false;
	});

Select allOpen in new window

Still broken

Place an alert below the dataString:

     var dataString = 'name=' + name + '&title=' + title +'&email=' + email + '&company=' + company  +'&address=' + address + '&phone=' + phone + '&fax=' + fax + '&additional=' + additional + '&literature=' + literature + '&contact=' + contact + '&owner_email=' + owner_email + '&serverProcessorType=' + serverProcessorType + '&smtpMailServer=' + smtpMailServer + '&stripHTML=' + stripHTML;
alert(dataString);

Wait, can you post the contact-form.js file again?  I can fix it.

contact-form.js

LOL!  You replaced your ENTIRE FILE with the code I gave you.  That code was just a code snippet of the submit function.  You were just supposed to replace that part.

No worries.  I fixed it. contact-form.js

lol..sorry, I fell asleep.

Ok, I think it is almost there. I replaced the file but when I tried it, the form would submit if the phone was entered correctly but would not if it was in a bad format.

It said phone not defined.

The behavior you saw, that the form did not submit with an ill-formed phone number is the result of validation.  This brings us back to the question I asked you in 08/05/11 11:39 PM, ID: 36320887 about how you were going to have validation and not make it required.  In order to have a person see an error message, you need to stop the form submit.

Is there a way to go around that? Say we made an IF statement that said "if phone == "Phone:" {OK} else if (validation) {OK}, else error message. Would that be a good way around that? I would like to be able to make sure they put a valid number but still not make it required. Same for fax.


Oh, and sorry for the bad psuedocode, I took c++ in the early part of the last decade and haven't used it much. I'm a network guy.

OK, forgive me for being so dense, but I simply do not understand what you are trying to tell me.  I just submitted your form and the entire form disappeared and left a green box with "Contact Form Submitted" in its place.

If you have an ill-formatted phone number, what do you want the form to do?

I would like both phone and fax to be optional but if the user decides to fill in either of the categories I want it to validate that it is the format of a phone number.

I noticed that fax validates fine but if you leave it empty it says that it isn't a valid fax number. (before you click submit) That's why I was thinking that we could add an if statement to correct this.

Maybe something like this

if fax == ("Fax:") { do nothing }
else if fax = (valid phone/fax number) { do nothing }
else {error message}

OK, just so I understand you, if the user types in an ill-formatted phone (or fax) number, you want the form to stop and give an error message.  If they stick nothing in there at all, you want the form to submit.

correct

Try this:

contact-form.js

after replacing that file it is the same. I don't see any change.

Huh, that's strange.  Listen, I have placed two alerts in this file.  Please try submitting this form without doing anything to the phone and fax fields.  You should see two alert dialogs, one right after the other.  The first one will start with "Phone=" and the second with "Fax=", I need to know what it says after that.
contact-form.js

http://dantechmsp.com/tds/site_pro/index-5.html

No alert dialogs.

Did I do something wrong?

Can you post the file you are using on your site?  It is important that you download a fresh copy of contact-form.js from your server so that I can see it.

http://dantechmsp.com/tds/site_pro/js/contact-form.js

OmniUnlimited:

Hey thank you for all of your help on the site. I really appreciate it.

I just need to finish up on the form and I am finished. Right now the form validates and requires phone and fax. I would like to require the phone and not require fax. Validation for phone would be nice but is not necessary. I feel greedy asking you to help but i am a bit confused by now on what i need to do to achieve this.

Sure DantechIT, and I want to help get you up and running, but I do not see the alerts I placed in the file, so that tells me you are running a different copy.  Would you please upload this to your site and tell me if you see the alerts on submit?
contact-form.js

Ok, thanks. I just uploaded it.

Ok I get alerts but only after I type the first number into the field. I can't put in any more than 1 because of the alerts.
Kinda hard to explain. I uploaded it so you can see:

http://dantechmsp.com/tds/site_pro/index-5.html

OK perfect.  That tells me that it is seeing both the phone and fax fields.  Now would you be so kind as to remove the two alerts from the file?  They are found on line 372 and line 381 of the contact-form.js file.

Try to submit a form and let me know what happens.

Ok, I took out the alerts and the form submits as long as there are actual phone numbers in the text field. As of now, fax makes me validate and is required and phone makes me validate and is required but does not show an error, it just does nothing when I hit submit. So I want to get it so that fax validates but is not required, and phone both validates and is required.

http://dantechmsp.com/tds/site_pro/index-5.html

link is current

OK, before I make those changes, let me make sure I understand you.  The phone is fine the way it is?  And you just want validation on the fax if someone types in a fax number?

Right now the phone is fine except it doesn't display a message if there is an error, it just won't submit.
You are correct about the fax.

OK, the phone issue is because I see that you never implemented my suggestion on the labels from 08/06/11 12:15 AM, ID: 36320959.  You need to replace the label on the phone with these:

<label class="error" for="phone" id="phone_error">*This field is required.</label>
<label class="error" for="phone" id="phone_error2">*This is not a valid phone number.</label>

I will work on the javascript and upload it for you soon.

Awesome. Thank you.

OK, try this contact-form.js

Phone looks good but fax is still required.


updated link
http://dantechmsp.com/tds/site_pro/index-5.html

Really?  That's strange.  I went ahead and put an alert in this file, would you be so kind as to run it and tell me what you see? contact-form.js

it says fax=fax (or whatever I put in fax)

updated link
http://dantechmsp.com/tds/site_pro/index-5.html

OK, thanks. What happens when your DON'T put in a fax number?

Awesome. That works. Thank you very much, I REALLY appreciate all of your help.

No problem.  I am happy to help.  Thank you very much for the points!