Accepting $_POSTs with AJAX / Form query

I was hoping that if ctype=1 is submitted, it would show the error messages next to the fields(name, tel, company).

And if ctype=2 is submitted, it would show the error messages next to the fields(name, email, company).

$(“#ctype”).val() will retrieve the value of the first element that it encounters. Multiple identical identifiers is an absolute no-no.

Instead, use the name of the radio elements to retrieve the currently checked radio button value.

var ctype = $(‘[name=“ctype”]:selected’).val();

Hi Paul,

I’ve updated the script, but now it doesn’t seem to do anything.

Once I submit, my submit button disappears and that’s it.

Current submit.js code:

$(document).ready(function(){
	$("#submit").click(function(){					   				   
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/;
		
		var ctype = $('[name="ctype"]:selected').val();

    switch (ctype) {
    case "1":		
    		
    		var unameVal = $("#uname").val();
    		if(unameVal == '') {
    			$("#uname").after('<span class="error">You forgot to enter your Name.</span>');
    			hasError = true;
    		}	
    		
    		var telnumVal = $("#telnum").val();
    		if(telnumVal == '') {
    			$("#telnum").after('<span class="error">You forgot to enter your Telephone.</span>');
    			hasError = true;
    		}	
    		
    		var cnameVal = $("#cname").val();
    		if(cnameVal == '') {
    			$("#cname").after('<span class="error">You forgot to enter your Company Name.</span>');
    			hasError = true;
    		}
    
    break;
    case "2":	
    		
    		var unameVal = $("#uname").val();
    		if(unameVal == '') {
    			$("#uname").after('<span class="error">You forgot to enter your Name.</span>');
    			hasError = true;
    		}
    		
    		var emailFromVal = $("#emailFrom").val();
    		if(emailFromVal == '') {
    			$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
    			hasError = true;
    		} else if(!emailReg.test(emailFromVal)) {	
    			$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
    			hasError = true;
    		}
    		
    		var cnameVal = $("#cname").val();
    		if(cnameVal == '') {
    			$("#cname").after('<span class="error">You forgot to enter your Company Name.</span>');
    			hasError = true;
    		}
    
    break;
    case "3":
    		
    		var subjectVal = $("#subject").val();
    		if(subjectVal == '') {
    			$("#subject").after('<span class="error">You forgot to enter the subject.</span>');
    			hasError = true;
    		}
    		
    		var messageVal = $("#message").val();
    		if(messageVal == '') {
    			$("#message").after('<span class="error">You forgot to enter the message.</span>');
    			hasError = true;
    		}
    
    default:
    		
    		var subjectVal = $("#subject").val();
    		if(subjectVal == '') {
    			$("#subject").after('<span class="error">You forgot to enter the subject.</span>');
    			hasError = true;
    		}
    		
    		var messageVal = $("#message").val();
    		if(messageVal == '') {
    			$("#message").after('<span class="error">You forgot to enter the message.</span>');
    			hasError = true;
    		}
    		
    } // end switch
    
    var emailToVal
    emailToVal = 'michael@test.com';
		
		if(hasError == false) {
			$(this).hide();
			$("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
			
			$.post("/wp-content/uploads/2008/01/sendemail.php",
   				{ emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
   					function(data){
						$("#sendEmail").slideUp("normal", function() {				   
							
							$("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');											
						});
   					}
				 );
		}
		
		return false;
	});						   
});

Have I missed something obvious?

Thanks once again for the help.

Yes, this sleep-deprived person managed to use selected instead of checked.

Eeek. Hope I’m not putting you off your sleep.
If so, please head to the land of nod :slight_smile:

Wow, it works!

Brilliant Paul. You’re a legend.

Many thanks once again. Sleep well :slight_smile:

Thank you.

I certainly aim to. Cheers.

Hi Paul,

Back again, with more ammunition :slight_smile: I hope you don’t mind helping again.
I’m sure once I get by this, I’m in the clear.

As I’m taking in three bits of data from the form (uname, telnum and cname) how do I then send these variables in my email?

The form submits fine and the email is received without issues, but where the values of uname, telnum and cname are supposed to be, these are blank :frowning:


<?php
# sendemail.php

$mailTo = $_POST['emailTo'];
$mailFrom = 'no-reply@mysite.co.uk';
$subject = 'Callback Request';

$message = 'test';

$message .= "Name: ".$_POST['uname'];
$message .= "Telephone: ".$_POST['telnum'];
$message .= $_POST['cname'];

mail($mailTo, $subject, $message, "From: ".$mailFrom);
?>

My submitemail.js remains the same as it was in Post#20.

I realise this is a lot to take in, but I’m hoping it’s something fairly simple to fix.

Really appreciate any help you can give with this.

Dump the whole of $_POST into the message (or echo it to the screen) to confirm that what you expect to be in $_POST, really is there in $_POST

var_dump($_POST)

Thanks for the reply Paul.

Unfortunately I haven’t got access to the server right now. But I do hope to try it out later today.

Thanks again.

Just to confirm, I would do this in my sendemail.php script?

Yes. :agree:

OK, but I think because of the AJAX, it doesn’t show the data.
It just gives me the ‘Success! Email sent’ message.

Sorry to be a pain :slight_smile:

You were saying that you were having trouble with this part of the code:


$mailTo = $_POST['emailTo'];
...
$message .= "Name: ".$_POST['uname'];
$message .= "Telephone: ".$_POST['telnum'];
$message .= $_POST['cname'];

you were saying that they get emailed correctly, but the $_POST values for $message were missing.
That implies that $_POST is available, but it only contains partial data.

Why? Is data missing? Is it misplaced? Is it misspelled? Why?
Find out what is actually in $_POST, and what is not, and you can then track the issue back further, to its root cause.

You can use this code for entire application, even if your page contains multiple forms and they have different IDs. Just put this code inside a common js file and include it in every page.

$(function() {

$(“form”).bind(“keypress”, function(e) {
if (e.keyCode == 13) return false;
});

});
Eliza

OK, that’s it all sorted.

I tried this:


var messageVal
messageVal = unameVal + cnameVal + telnumVal;

and it worked perfectly! :slight_smile:

I’ve got one final final question if it’s ok. This is truly final :slight_smile:

If I then wanted to insert these values into a database, how would I do this.
Would this be in both my sendemail.php and submitform.js?

Many thanks again

Got the db connection/insertion working perfectly.

Thanks again for all your help Paul, brilliant!