CODEWITHSUNDEEP
javascriptif-statementconditional-statements
learning_curve
learning_curve

Reputation: 53

Javascript conditional hide/show issue

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>

Upvotes: 0

Views: 105

Answers (3)

Matt S
Matt S

Reputation: 15364

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"))
 ...

Upvotes: 3

KpTheConstructor
KpTheConstructor

Reputation: 3291

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 .

Upvotes: 1

Paul Humphreys
Paul Humphreys

Reputation: 338

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

Upvotes: 1

Related Questions