【问题标题】:Radio button value with Ajax/PHP使用 Ajax/PHP 的单选按钮值
【发布时间】:2014-07-26 15:15:12
【问题描述】:

我有一个显然简单的邮件列表订阅表单问题。

HTML5 表单包含 3 个字段:

  1. 文本输入 用于电子邮件地址:<input type="email" name="email"
  2. 单选按钮 控件有 2 个选项:
    • <input type="radio" value="subscribe" name="radio"
    • <input type="radio" value="unsubscribe" name="radio"
  3. 文本输入用于CAPTCHA检查:<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">
        <a href="javascript:void(0);" name="submitlink" id="submitlink" class="btn">Invia richiesta</a>
        </section>
    
        </form>
    
    </div>
    

我们有一个允许请求订阅的域列表,包含在外部文件 .dat 中,PHP 中的某行动态创建正则表达式来检查电子邮件地址(仅在订阅的情况下,否则任何有效的电子邮件地址是允许的)

<?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');   
            }
        }       
    }

然后它检查验证码是否正常(它将数据发送到 PHP 页面 captcha_check),然后提交到 sendmail.php(负责向我们的邮件服务器发送订阅/取消订阅请求)

    // 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>

谁能给我解释一下: - 当脚本验证电子邮件地址时,给出的单选按钮的值始终是“订阅”,无论如何,即使我检查取消订阅 - 但是如果我输入一个包含在 domain.dat 中的域的电子邮件地址并检查取消订阅按钮,传递给 sendmail.php 的值是“取消订阅”(当我收到电子邮件时可以看到)

希望它足够清楚......提前感谢您的宝贵帮助!

【问题讨论】:

    标签: php jquery ajax html email-validation


    【解决方案1】:

    您的问题是,除非电子邮件有效并且 仅在电子邮件有效时。

    您会看到,您在 JavaScript 中检查有效电子邮件地址的所有验证都是然后:

    • 淡化你的错误 => $("#subscrlabel").children(".err").fadeIn('slow');

    • 消除你的错误 => $("#subscrlabel").children(".err").fadOut('slow');

    但是,这仅发生在页面上

    当您实际提交时,如果电子邮件无效,AJAX 请求将失败,但是,它仍然正常提交表单,因此它重置为“已检查”的默认订阅输入状态

    您需要做的是在您关闭函数后将您的 .ajax(...) 语句/调用包含在您的验证中,而不是下方:

    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
          ...
        }
    }
    

    【讨论】:

    • 谢谢@FlakDiNenno!但是我已经解决了这个问题,只需将var subscrvalue = $("#radio").val(); 替换为var subscrvalue = $("input[name=radio]:radio:checked").val();,现在它完美验证了:) 无论如何谢谢!
    猜你喜欢
    • 1970-01-01
    • 2011-01-09
    • 1970-01-01
    • 1970-01-01
    • 2011-02-04
    • 2014-03-14
    • 2014-04-05
    • 1970-01-01
    • 2016-07-03
    相关资源
    最近更新 更多