Javascript conditional hide/show issue

Question

I need some help with some javascript logic. I have this code which hides/shows. I need to it to work if any of the or conditions are met. it is currently working for the first two conditions. I am fairly new to javascript so not sure if I am writing the conditions correctly.

javascript:

$("input[name=JECT]").click(function() {
        if ((this.value == "no" || this.value == "JECTindividual_electronic") || document.getElementById("JECTRenewal")== "yes")
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

here is the html:

<h2>Subscription Options</h2>
<h3>Please choose the options you desire.</h3>

    <div id="JECTshow" style="display:none">
    <p style="text-indent:30px;">Length of subscription:</br>
            <label><input type="radio" name="JECTsub" value="1" checked <?php if(@$JECTsub=="1"){ echo "checked";}?>> 1 year</label></br>
            <label><input type="radio" name="JECTsub" value="2" <?php if(@$JECTsub=="2"){ echo "checked";}?>> 2 years</label></br>
            <label><input type="radio" name="JECTsub" value="3" <?php if(@$JECTsub=="3"){ echo "checked";}?>> 3 years</label></br>
            <label><input type='checkbox' name='JECTrenewal' value='yes' <?php if(@$JECTrenewal=="yes"){ echo "checked";}?>> Check box if this is a renewal</label></p></br>
            <div id="JECTvolumeshow" style="display:none">
            <p style="text-indent:30px;">I would like my subscription to start with:</br></p>
            <label><input type="radio" name="JECTvolume" value="current" checked<?php if(@$JECTvolume=="current"){ echo "checked";}?>><?php echo "Volume ".$JECTsubscribeVolume['vol'].", Year ".$JECTsubscribeVolume['year']?></label></br>
            <label><input type="radio" name="JECTvolume" value="next"<?php if(@$JECTvolume=="next"){ echo "checked";}?>><?php echo "Volume ".++$JECTsubscribeVolume['vol'].", Year ".++$JECTsubscribeVolume['year']?></label></p>
           </div>
    </div>

You can't compare a DOM element to a string.

user663031
– user663031

2016-05-19 17:55:11 +00:00
Commented May 19, 2016 at 17:55 — user663031
– user663031, Commented May 19, 2016 at 17:55

Matt S · Accepted Answer · 2016-05-20 19:55:37Z

3

document.getElementById("JECTRenewal") returns a DOM node, not any single property of the element. Therefore you wouldn't directly compare it to "yes". To see if the checkbox is checked, set JECTrenewal as the id of the element and look for the checked attribute:

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || document.getElementById("JECTrenewal").checked)
 ...

Or, using jQuery:

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || $("input[name=JECTrenewal]").is(":checked"))
 ...

edited May 20, 2016 at 19:55

answered May 19, 2016 at 17:58

Matt S

15.5k6 gold badges60 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mpallansch Over a year ago

This answer is correct, but in addition to this, the element has a name attribute of "JECTRenewal" but not an id of "JECTRenewal". He will have to make it an id as well for this to work.

learning_curve Over a year ago

I appreciate your help, but I still can't get it. I have added altered the html as follows:

code<label><input type="checkbox" name="JECTrenewal" id="JECTrenewal" value='yes' <?php if(@$JECTrenewal=="yes"){ echo "checked";}?>> Check box if this is a renewal</label></p></br>

and implemented the suggested changes. Neither of them work, but do not return an error either.

Matt S Over a year ago

@learning_curve Element names and IDs are case sensitive. I capitalized an extra R. Code fixed.

learning_curve Over a year ago

This is what eventually worked for me. I believe Matt had a correct answer but it just didn't work for me - still not sure why - maybe the way I had some other stuff written. '$("input[name=JECT], #JECTrenewal").click(function() { var JECTrenewal=document.getElementById('JECTrenewal').value; var JECT = $("input[name=JECT]:checked").val(); if ( JECT == "no" || JECT == "JECTindividual_electronic" || $("input[name=JECTrenewal]").is(":checked") ) $('#JECTvolumeshow').slideUp(); else $('#JECTvolumeshow').slideDown(); });'

Paul Humphreys · Accepted Answer · 2016-05-20 15:48:20Z

document.getElementById will return null when an id that's not in the DOM is used as a parameter. so is the following code what you want?

$("input[name=JECT]").click(function() {
        if (this.value == "no" || this.value == "JECTindividual_electronic" || document.getElementById("JECTRenewal") !== null)
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

If you're looking to compare what the text content of that element is, it's probably easiest to use jquery, like so:

$("input[name=JECT]").click(function() {
        if (this.value == "no" || this.value == "JECTindividual_electronic") || $("#JECTRenewal").text() == "yes")
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

KpTheConstructor · Accepted Answer · 2016-05-20 16:06:29Z

1

When using jquery you must select "this" in jquery fashion ex. $(this) ; also you must use .val() instead of value .

Example .

  $("input[name=JECT]").click(function() {

            if ( $(this).val() == "no" || $(this).val() == "JECTindividual_electronic" || $("#JECTRenewal").text() == "yes"){

               $('#JECTvolumeshow').slideUp();

            } else {

               $('#JECTvolumeshow').slideDown();

            }


        });

Fyi I've corrected a few other small issues also in this code ...

hope this helps .

answered May 20, 2016 at 16:06

KpTheConstructor

3,2991 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript conditional hide/show issue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related