CODEWITHSUNDEEP
javascriptjqueryhtmlxslt
user1689274
user1689274

Reputation: 373

Bug in some Jquery

I have a survey that is displayed via an xsl stylesheet. I have a section that checks to see if the user selects "Neither" for several options, if so display an additional question.

Here is the JQuery:

function block3Check(){
    var neither23 = $('input[name=response23]:checked', '#editForm').val();
    var neither24 = $('input[name=response24]:checked', '#editForm').val();
    var neither25 = $('input[name=response25]:checked', '#editForm').val();
    var neither26 = $('input[name=response26]:checked', '#editForm').val();

    if(neither23 && neither24 && neither25 && neither26 == 'Neither')
    {

        $('#question-27').slideDown(500);
        $('#after-link').hide();
    }
}

I receive no errors or warning on this code, however I think the bug is in my IF statement, or my XSL code. The new question is supposed to slide down if all are selected as neither, however currently does so if 3 of the 4 are selected.

XSL:

<xsl:when test="../@id='23'">
    <div class="block3Glory hidden">
        <hr /><p><br /></p>
        <div id="question-23">
            <strong>Suppose you were considering <u>only the following two</u> study abroad programs. Which, if either, would you be more likely to choose?<br /></strong>
            <p></p>
            <table><tr><td><img src="survey/study_abroad/b3q1-programA.jpg" /></td><td><input name="response23" value="Program-A" type="radio" />Program A</td></tr></table>
            <table><tr><td><img src="survey/study_abroad/b3q1-programB.jpg" /></td><td><input name="response23" value="Program-B" type="radio" />Program B</td></tr></table>
            <table style="padding-top: 8px;"><tr><td style="border-top: 1px solid #000; width: 600px; text-align: center;"><b>I would choose neither</b></td><td style="padding-left: 10px;"><input name="response23" value="Neither" type="radio" onclick="block3Check()"/>Neither<br /></td></tr></table>
            <p><br /></p>
        </div>
    </div>
    </xsl:when>
    <xsl:when test="../@id='24'">
    <div class="block3Glory hidden">
        <hr /><p><br /></p>
        <div id="question-24">
            <strong>Now suppose <u>instead</u> that you were considering <u>only the following two</u> study abroad programs. Which, if either, would you be more likely to choose?<br /></strong>
            <p></p>
            <table><tr><td><img src="survey/study_abroad/b3q2-programA.jpg" /></td><td><input name="response24" value="Program-A" type="radio" />Program A</td></tr></table>
            <table><tr><td><img src="survey/study_abroad/b3q2-programB.jpg" /></td><td><input name="response24" value="Program-B" type="radio" />Program B</td></tr></table>
            <table style="padding-top: 8px;"><tr><td style="border-top: 1px solid #000; width: 600px; text-align: center;"><b>I would choose neither</b></td><td style="padding-left: 10px;"><input name="response24" value="Neither" type="radio" onclick="block3Check()"/>Neither<br /></td></tr></table>
            <p><br /></p>
        </div>
    </div>
    </xsl:when>
    <xsl:when test="../@id='25'">
    <div class="block3Glory hidden">
    <hr /><p><br /></p>
        <div id="question-25">
            <strong>Now suppose <u>instead</u> that you were considering <u>only the following two</u> study abroad programs. Which, if either, would you be more likely to choose?<br /></strong>
            <p></p>
            <table><tr><td><img src="survey/study_abroad/b3q3-programA.jpg" /></td><td><input name="response25" value="Program-A" type="radio" />Program A</td></tr></table>
            <table><tr><td><img src="survey/study_abroad/b3q3-programB.jpg" /></td><td><input name="response25" value="Program-B" type="radio" />Program B</td></tr></table>
            <table style="padding-top: 8px;"><tr><td style="border-top: 1px solid #000; width: 600px; text-align: center;"><b>I would choose neither</b></td><td style="padding-left: 10px;"><input name="response25" value="Neither" type="radio" onclick="block3Check()"/>Neither<br /></td></tr></table>
            <p><br /></p>
        </div>
    </div>
    </xsl:when>
    <xsl:when test="../@id='26'">
    <div class="block3Glory hidden">
    <hr /><p><br /></p>
        <div id="question-26">
            <strong>Now suppose <u>instead</u> that you were considering <u>only the following two</u> study abroad programs. Which, if either, would you be more likely to choose?<br /></strong>
            <p></p>
            <table><tr><td><img src="survey/study_abroad/b3q4-programA.jpg" /></td><td><input name="response26" value="Program-A" type="radio" />Program A</td></tr></table>
            <table><tr><td><img src="survey/study_abroad/b3q4-programB.jpg" /></td><td><input name="response26" value="Program-B" type="radio" />Program B</td></tr></table>
            <table style="padding-top: 8px;"><tr><td style="border-top: 1px solid #000; width: 600px; text-align: center;"><b>I would choose neither</b></td><td style="padding-left: 10px;"><input name="response26" value="Neither" type="radio" onclick="block3Check()"/>Neither<br /></td></tr></table>
            <p><br /><a id="after-link" href="javascript:" onclick="showAfterBlock()">Continue</a></p>
        </div>
    </div>
</xsl:when>

Any help would be appreciated.

Upvotes: 0

Views: 48

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

if(neither23 && neither24 && neither25 && neither26 == 'Neither') If you want to check for all to be equal to Neither, then that's just wrong.

You could use Array.prototype.every() (with polyfill to support older browsers):

if([neither23,neither24,neither25,neither26].every(function(elm){ return elm === 'Neither';})) {
  $('#question-27').slideDown(500);
  $('#after-link').hide();
}

Upvotes: 1

Victor Levin
Victor Levin

Reputation: 1177

Your if-statement is always false. You should check the 'Neither' value for all variables, like so: 

 if(neither23 == 'Neither' && neither24 == 'Neither' && neither25 == 'Neither' && neither26 == 'Neither') {
     $('#question-27').slideDown(500);
     $('#after-link').hide();
 }

Upvotes: 1

Related Questions