[Shane Hudson]

Hi,

Basically what I am doing is adding a contact form module to Open Cart, currently I am only trying to get it working rather than perfect so I only have three fields at the moment.

Name:
Email:
Comments:

At first I could not get the event handler working, turns out that was down to AJAX for some reason so adding the if ($(event.target).is('#submit')) worked. Technically this should be very easy to do, it does send emails so the PHP side is working but the Javascript does not seem to be getting the values properly.

		<form name="contact" action="" method="post">
			<fieldset>
				<h4>Arrange a Print</h4>
				<label for="name">Name: <span class="star">*</span></label>
				<input name="name" id="name" type="text" value="" />
				
				<label for="email">email <span class="star">*</span></label>
				<input name="email" id="email" type="text" />
				
				<label>Comments / Message:</label>				
                		<textarea name="comments" id="comments"> </textarea> 

				<div class="button" id="submit">Submit</div>
			</fieldset>
		</form>
[/quote]

[quote]
$(document).ready(function() {
       $("body").click(function(event) {
	 if ($(event.target).is('#submit')) {
    		var isError = false;
		var errStr = 'Could not proceed further, there is/are some error(s) in your form submission. Have a look on the error(s) below:\n\n';
			
		var varName;
		var varEmail;
		var varComments;

       	 	var varName = $("#name").val();
			alert(varName);
			if (varName == null) {
				errStr += '* Please Enter Your Name.\n';	
				isError = true;
			}

       	 	var varEmail = $("#email").val();
			if (varEmail == null) {
					errStr += '* Please Enter Your Email.\n';	    
					isError = true;
				} else {
				if (!isValidEmail($.trim(varEmail))) {
					errStr += '* Incorrect Email Format.\n';	
					isError = true;	
				}
			}	

			if (isError) {
				alert(errStr);
			}

			else {
				submitForm();
			}
		}
       });

		function isValidEmail(email)
		{
			var filter = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			return filter.test(email);
		}

		function submitForm()
		{ 
	
       	 		var varComments = $("#comments").val();
			var data = 'name=' + varName + '&email=' + varEmail + '&comments=' + varComments; 
	
			$.ajax({
				type : "post",
				url : "/catalog/view/theme/shoppica/template/cms/pricelist_form.php",
				data: data,
				success : function(msg){
					if(msg=="Mail successfully sent")
					{
						alert("yay");
						$("#name").val('');
						$("#email").val('');
						$("#comments").val('');
					}
		  		}
			});
		}
       
});

There seems to be no tabbing so I have uploaded it to pastie.

I cannot figure out why it is not working. I am using Open Cart but that should not be any problem with regards to the javascript.

To verify: The problem is that the Javascript is not getting the values from the input boxes. The alert is not showing anything... I don't understand why it is not finding it!

Thanks,

Shane

This post has been edited by Shane Hudson: 09 August 2011 - 02:25 AM

[Jstall]

Hi there,

Your code is alerting the proper value for me using FireFox. I'm not sure why this is happening.

One thing I can suggest is try changing the name of your input from name to something else. I've seen problems arise due to elements having id's and such that correspond to attribute's. e.g. id of submit,name,type etc.

When I tried this in IE 8 I got an error saying varName is undefined, in my experience IE errors are usually pretty useless but it did draw my attention to the fact that you are declaring varName with var twice, once to initialize it and again when you assign it a value, I don't think this would cause the problem you are seeing, but it couldn't hurt to change.

Edit: Also, I imagine tabs are not working properly because you put your code in quote tags instead of code tags

This post has been edited by Jstall: 08 August 2011 - 10:40 AM

[Shane Hudson]

LOL Stupid me about the quote tags!

I didn't think it was working in firefox... will have another check. Which version were you using?

Thank you for your help.

[Jstall]

Hi,

It was my computer at work(I'm taking the day off) so I can't say for sure but I am 90% certain it was ver 3.6.

[Shane Hudson]

I have copy and pasted the code to a different server, after changing what you said... if I load it in an iframe it works