Radio button value with Ajax/PHP - php

Question

I have a problem with an apparently simple form for a mailing list subscription.
The HTML5 form contains 3 fields:
text input for e-mail address: <input type="email" name="email"
radio button control with 2 choices:
<input type="radio" value="subscribe" name="radio"
<input type="radio" value="unsubscribe" name="radio"
text input for a CAPTCHA check: <input type="text" name="captchavalue"
<form id="contact" name="contact" method="post" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="check" value="01">
<small>*tutti i campi sono obbligatori</small>
<label for="email" id="emailabel">E-mail:<span class="err topp">INDIRIZZO NON VALIDO</span></label>
<input type="email" name="email" id="email" class="textemail">
<label for="subscr" id="subscrlabel">Scelta:<span class="err topp">devi selezionare una scelta</span></label>
<p><input type="radio" name="radio" id="radio" value="subscribe" checked>Iscrizione</p>
<p><input type="radio" name="radio" id="radio" value="unsubscribe">Cancellazione</p>
<img src="captcha.php" id="captchaimg">
<label for="captcha" id="captchalabel">Copiare il codice di verifica<span class="err capter">CAPTCHA ERRATO</span></label>
<input type="text" name="captchavalue" id="captchavalue" class="textcaptcha">
<section id="subber">
Invia richiesta
</section>
</form>
</div>
We have a list of domains which are allowed to ask for subscription contained in an external file .dat, some line in PHP to dynamically create a regular expression to check the email address (just in case of subscription, otherwise any valid email address is allowed)
<?php
$domains = file("domains.dat");
$domcount = count($domains);
for ($i=0; $i < $domcount; $i++) {
$regex .= "(".trim($domains[$i]).")|";
}
$regex = str_replace(".", "\.", $regex);
$regex = "/^([a-zA-Z\.-_0-9]*#(".substr($regex, 0, strlen($regex)-1).")$)/i";
?>
function checkValidCNRAddress(emailAddress) {
var pattern = new RegExp(<? echo $regex ?>);
return pattern.test(emailAddress);
};
function checkValidEmailAddress(emailAdd) {
var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(#((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
return pattern.test(emailAdd);
};
var mailsendstatus;
function userSendMailStatus(uemail,usubscr, ucaptcha) {
// statement below is for DEBUG purposes only -- to show the
// value of the radio button (subscription status) in ALL CASES
document.write(usubscr); //DEBUG
//check that a radio button option is checked (default: "subscribe" is checked )
if(!usubscr) {
$("#subscrlabel").children(".err").fadeIn('slow');
}
else if(usubscr) {
// we have *something* selected in the radio button for subscription
$("#subscrlabel").children(".err").fadeOut('slow');
// next, check for validate email addresses using regular expressions
//check on dynamic regex
if (usubscr == "subscribe") {
if(!checkValidCNRAddress(uemail)) {
$("#emailabel").children(".err").fadeIn('slow');
}
else if(checkValidCNRAddress(uemail)) {
$("#emailabel").children(".err").fadeOut('slow');
}
} //else check at least for a valid email address
else if (usubscr == "unsubscribe"){
if(!checkValidEmailAddress(uemail)) {
$("#emailabel").children(".err").fadeIn('slow');
}
else if(checkValidEmailAddress(uemail)) {
$("#emailabel").children(".err").fadeOut('slow');
}
}
}
Then it checks whether the captcha it's OK or not (it sends data to a PHP page captcha_check) and then submits to sendmail.php (which is in charge to send the subscribe/unsubscribe request to our mailserver)
// captcha check
$.ajax(
{
type: 'POST',
url: 'captcha_check.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "false") {
mailsendstatus = false;
$("#captchalabel").children(".err").fadeIn('slow');
}
else if(data == "true"){
$("#captchalabel").children(".err").fadeOut('slow');
if((checkValidCNRAddress(uemail))||(checkValidEmailAddress(uemail))) {
// in this case it's alright
// TRUE
mailsendstatus = true;
$("#subber").html('<img src="img/load.gif" alt="loading...">');
$.ajax(
{
type: 'POST',
url: 'sendmail.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "yes") {
$("#contactwrapper").slideUp(650, function(){
$(this).before("<p>La tua richiesta è stata inviata, grazie.</p>");
});
}
}
}
); //
} //
} //
} //
} //
);
return mailsendstatus;
}
$(document).ready(function(){
$("#contact").submit(function() { return false; });
$("#submitlink").bind("click", function(e){
var usercaptvalue = $("#captchavalue").val();
var emailvalue = $("#email").val();
var subscrvalue = $("#radio").val();
//sends values to sendmail.php
var postchecks = userSendMailStatus(emailvalue, subscrvalue, usercaptvalue);
});
});
</script>
</body>
Can anybody explain this to me:
- when the script verifies the email address, the value of the radio button given is always "subscribe", in any case, even if I check for unsubscription
- but if I type an email address which domain is contained in domains.dat and check the button for unsubscription, the value passed to sendmail.php is "unsubscribe" (as I can see when I receive the e-mail message)
Hope it's clear enough...thank you in advance for your precious help!

Answer 1

Your problem is that you're NOT actually making any AJAX request to sendmail.php AT ALL unless the email is valid and ONLY when the email is valid.
You see, all your validations in JavaScript to check for valid email addresses, are ONLY then:
fading your errors IN => $("#subscrlabel").children(".err").fadeIn('slow');
or
fading your errors OUT => $("#subscrlabel").children(".err").fadOut('slow');
but, this is occurring on the page only
When you actually submit, it fails the AJAX request if the email is invalid, BUT, it is still submitting the form normally and therefore it resets to the default subscribe input state of "checked"
What you need to do is include your .ajax(...) statement/call inside of your validation, not below it, after you've closed the function:
var mailsendstatus;
function userSendMailStatus(uemail,usubscr, ucaptcha) {
//verify radio button (it's checked by default in our case)
if(!usubscr) {
$("#subscrlabel").children(".err").fadeIn('slow');
}
else {
$("#subscrlabel").children(".err").fadeOut('slow');
//check on dynamic regex
if (usubscr == "subscribe") {
if(!checkValidCNRAddress(uemail)) {
$("#emailabel").children(".err").fadeIn('slow');
}
else if(checkValidCNRAddress(uemail)) {
$("#emailabel").children(".err").fadeOut('slow');
mailsendstatus = true;
}
} //else check at least for a valid email address
else if (usubscr == "unsubscribe"){
if(!checkValidEmailAddress(uemail)) {
$("#emailabel").children(".err").fadeIn('slow');
}
else if(checkValidEmailAddress(uemail)) {
$("#emailabel").children(".err").fadeOut('slow');
mailsendstatus = true;
}
}
}
if (mailsendstatus = true;) {
...
//make your AJAX request here
...
}
}