fadeIn和fadeOut div基于带有if条件的单选按钮

时间:2014-01-22 05:34:57

标签: javascript jquery fadein

我非常感谢您的帮助。有人可以帮我弄清楚为什么我的最后一个if语句不起作用?

我收到一个错误“Uncaught TypeError:无法在控制台中读取属性'''',但仅限于最后一个if。

//html for radio buttons 
<p><input type="radio" name="radio" value="generalPurpose" id="gp-toggle"><label for="gp-toggle" >General Purpose</label></p>
<p><input type="radio" name="radio" value="client" id="cc-toggle-one"><label for="cc-toggle-one">Client</label></p>
<p><input type="radio" name="radio" value="contractor" id="cc-toggle-contractor"><label for="cc-toggle-contractor">Contractor</label></p>
<p><input type="radio" name="radio" value="urgent" id="urgent-toggle"><label for="urgent-toggle">Urgent Request</label></p>

///js
      $(function() {
         $("#contact-form .button").click(function() {
           var data = {
            radio: $("input:radio[name=radio]:checked").val(),
            firstName: $("#f-name").val(),
            lastName: $("#l-name").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            comments: $("#comments").val(),
            coverage: $("#coverage").val(),
            services: $("#services-two").val(),
            covered: $("#covered").val(),
            provided: $("#provided").val(),
            reason: $("#reason").val()
        };

        $.ajax({
            type: "POST",
            url: "formmail.php",
            data: data,
            success: function() {
                $('.form-inner').fadeOut(1000);
                setTimeout(function() {
                    if (document.getElementById('gp-toggle').checked) {
                        $('.gp-reply').fadeIn(1000);
                    } else if (document.getElementById('cc-toggle-one').checked) {
                        $('.client-reply').fadeIn(1000);
                    } else if (document.getElementById('cc-toggle-two').checked) {
                        $('.contractor-reply').fadeIn(1000);
                    } else if (document.getElementById('urgent-toggle').checked) {
                        console.log('perform fadein');
                        $('.urgent-reply').fadeIn(1000);
                    }
                }, 1200);
            }
        });
        return false;
    });
});
再次感谢。我真的希望有一个愚蠢的错字;但我想我需要更多地了解这一点。

基于这个问题,这里&gt;&gt; Uncaught TypeError: Cannot read property 'checked' of null index.html:24建议的https://stackoverflow.com/users/1421098/ameya-rote 我做了一些变数,现在似乎工作正常。

        var gp = document.getElementById('gp-toggle').checked;
        var client = document.getElementById('cc-toggle-one').checked;
        var contractor = document.getElementById('cc-toggle-contractor').checked;
        var urgent = document.getElementById('urgent-toggle').checked;

 $(document).ready(function() {
   $(function() {
    $("#contact-form .button").click(function() {
        var data = {
            radio: $("input:radio[name=radio]:checked").val(),
            firstName: $("#f-name").val(),
            lastName: $("#l-name").val(),
            email: $("#email").val(),
            phone: $("#phone").val(),
            comments: $("#comments").val(),
            coverage: $("#coverage").val(),
            services: $("#services-two").val(),
            covered: $("#covered").val(),
            provided: $("#provided").val(),
            reason: $("#reason").val()
        };


        $.ajax({
            type: "POST",
            url: "formmail.php",
            data: data,
            success: function() {
                $('.form-inner').fadeOut(1000);
                setTimeout(function() {
                    if ('gp') {
                        $('.gp-reply').fadeIn(1000);
                    } else if ('client') {
                        $('.client-reply').fadeIn(1000);
                    } else if ('contractor') {
                        $('.contractor-reply').fadeIn(1000);
                    } else if ('urgent') {
                        console.log('perform fadein');
                        $('.urgent-reply').fadeIn(1000);
                    }
                }, 1200);
            }
        });
        return false;
     });
   });
});

1 个答案:

答案 0 :(得分:0)

尝试下面给出的代码,希望它能运作。

function get_checked_val() {
    var inputs = document.getElementsByName("selected");
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].checked) {
        return inputs[i].value;
      }
    }
}

function onSubmit() {
    var id = get_checked_val();
    alert("selected input is: " + id);
}

或者您可以尝试这样做以检查值

$(document.getElementById('cc-toggle-one')).attr('checked', true);