fadeIn and fadeOut divs based on radio button with if conditions

Question

I really appreciate your help in advance. Can someone help me figure out why my last else if statement is not working?

I am getting an error "Uncaught TypeError: Cannot read property 'checked' of null" in the console, but only for the last else 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;
    });
});

thanks again. I was really hoping for a stupid typo; but I guess I will need to look more into this.

so based on this question here >> Uncaught TypeError: Cannot read property 'checked' of null index.html:24 suggested by https://stackoverflow.com/users/1421098/ameya-rote I made some variables and it seems to be working fine now.

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

Did you try to log something if that condition is actually not being performed? — HTTP, Jan 22 '14 at 05:37
Check out this, might be helpful to you for error http://tinyurl.com/nzu3s42 — ameya rote, Jan 22 '14 at 05:45
The error what you told means there is no such html element whoose id is urgent-toggle, because its showing null — Voonic, Jan 22 '14 at 05:55
I validated the html, no errors, and no matter what element i put last, the last else if doesnt work. — lookingGlass, Jan 22 '14 at 05:59
@allieAllbright If you put strings in IF condition it will be always true i guess — Voonic, Jan 22 '14 at 06:18

score 0 · Answer 1 · answered Jan 22 '14 at 06:03

Try the code given below, Hope it will work.

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

Or you may try this to make the value checked

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

fadeIn and fadeOut divs based on radio button with if conditions

1 Answers1