jQuery form

[jrock2004]

Ok I have a page that has a list of teachers on it that has their email address. What I want to do is when the teacher's email link is clicked a lightbox type form comes up. So would it best to code what my form is in a separate file and then use jQuery to call it in? Or should I place a div at the bottom of the page and just hide it until I need it? Thanks

[scrappedcola]

My $0.02 is that both are about the same in effort. I would go with the have a div on the page or dynamically draw it rather than bringing in another file.

[jrock2004]

I got it. Thank you very much

[jrock2004]

Ok so I got the form to pop up and I can enter my data but when I click the submit button nothing happens. Here is my jquery

$(document).ready(function() {
	$("#contactForm").hide();

	$("pre").click(function() {
		$('body').css('overflow-y', 'hidden');

		$('<div id="overlay"></div>')
			.css('top', $(document).scrollTop())
			.css('opacity', '0')
			.animate({'opacity': '0.5'}, 'slow')
			.appendTo('body');
	
		$("#contactForm").show().appendTo('overlay');
		
		positionBox();
		
		var emailAddress = $(this).attr("title");
		
		$("#submit").click(function() {
			var name = $("#username").val();
			var usersEmail = $("#emailaddress").val();
			var message = $("#message").val();
			var messageSubject = "Email from GVHS Site";
			
			if(name == '') {
				$("#username").after('<span id="usererror" style="color:#ff0000;">Must enter your name</span>');
				$("#username").click(function() {
					$("#usererror").hide();
				});
			}
			
			if(usersEmail == '') {
				$("#emailaddress").after('<span id="emailerror" style="color:#ff0000;">Must enter an email address</span>');
				$("#emailaddress").click(function() {
					$("#emailerror").hide();
				});
			}
			
			if(message == '') {
				$("#message").after('<span id="messageerror" style="color:#ff0000;">Must enter a message</span>');
				$("#message").click(function() {
					$("#messageerror").hide();
				});
			}
			
			if(name != '' || usersEmail != '' || message != '') {
				var dataString = 'emailTo' + emailAddress + "emailFrom" + usersEmail + "subject" + messageSubject + "message" + message;

				$.ajax({ type: "POST", url: "includes/sendEmail.php", data: dataString, success: function() {
						$("#contactForm").before("<h5>Message was sent</h5>");	
						removeBox();
					}
				});	
			}
		});
	});

	$("#cancel").click(function() {
		removeBox();
	});
});

function positionBox() {
  var top = ($(window).height() - $('#contactForm').height()) / 2;
  var left = ($(window).width() - $('#contactForm').width()) / 2;
  $('#contactForm')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
}

function removeBox() {
  $('#overlay, #contactForm')
    .fadeOut('slow', function() {
      $(this).remove();
      $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}

Any ideas?

[jrock2004]

If I hit cancel the box does go away so I know those functions work

[jrock2004]

Ok I figured out the code. There was 2 things wrong in the jQuery.

var dataString = 'name=' + name + '&emailTo' + emailAddress + "&emailFrom=" + usersEmail + "&subject=" + messageSubject + "&message=" + message;

Should be

var dataString = 'name=' + name + '&emailTo=' + emailAddress + "&emailFrom=" + usersEmail + "&subject=" + messageSubject + "&message=" + message

Also I was pointing to includes/sendemail.php when it should have been includes/sendmail.php