Clear fields modal box

[smith.james0]

I am using modal box, the problem I have is that after the form has been submitted, I open it again it displays the "thank you" message. I need to reset the form, after the form has been submitted so it can be used again without refreshing the page.

	function validateEmail(emaila) { 
		var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return reg.test(emaila);
	}
	function validateEmail(emailb) { 
		var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return reg.test(emailb);
	}

	$(document).ready(function() {
		$(".modalbox").fancybox();
		$("#email").submit(function() { return false; });

		
		$("#sendemail").on("click", function(){
			var plant = document.getElementById('emaillink');
            var pageid = plant.dataset.id; 
            var pagetitle = plant.dataset.title; 
			
			var emailvala  = $("#emaila").val();
			var emailvalb  = $("#emailb").val();
			var msgval    = $("#name").val();
			var msglen    = msgval.length;
			var mailvalida = validateEmail(emailvala);
			var mailvalidb = validateEmail(emailvalb);
			
			if(mailvalida == false) {
				$("#emaila").addClass("error");
			}
			else if(mailvalida == true){
				$("#emaila").removeClass("error");
			}
			if(mailvalidb == false) {
				$("#emailb").addClass("error");
			}
			else if(mailvalidb == true){
				$("#emailb").removeClass("error");
			}
			
			if(msglen < 4) {
				$("#name").addClass("error");
			}
			else if(msglen >= 4){
				$("#name").removeClass("error");
			}
				
			
			if(mailvalida == true && mailvalidb == true && msglen >= 4) {
				// if both validate we attempt to send the e-mail
				// first we hide the submit btn so the user doesnt click twice
				$("#sendemail").replaceWith("<em>sending...</em>");
				
				$.ajax({
					type: 'POST',
					url: 'includes/share/sendmessage.php?pageid=' + pageid +'&title=' + pagetitle +'',
					data: $("#email").serialize(),
					success: function(data) {
						if(data == "true") {
							$("#email").fadeOut("fast", function(){
								$(this).before("<p><strong>Your email have been sent</strong></p>");
								setTimeout("$.fancybox.close()", 1000);
							});
						}
					}
				});
	

			}
		});
	});
	

I have tried using document.forms["#email"].reset(); but I can not get it to work.

 

Can anyone help?

 

James

[denno020]

Give this a try

 

document.getElementById("myForm").reset();

[smith.james0]

Would that go after 

 

setTimeout("$.fancybox.close()", 1000);

 

James

[denno020]

You can put it either side of the setTimeout. Putting it after won't delay it from being executed.

[smith.james0]

I have tried this

if(data == "true") {
							$("#email").fadeOut("fast", function(){
								$(this).before("<p><strong>Your email have been sent</strong></p>");
								setTimeout("$.fancybox.close()", 1000);
								document.getElementById("#email").reset();
							});
						}

The script seams slower, but it doesn't reset the fields

 

James