cancel
Showing results for 
Search instead for 
Did you mean: 

javascript help

FIXED
Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

javascript help

anyone any good at javascript?

 

i have a html form with various fields (mostly drop-downs)
i have a couple of form fields i want hide unless some of the drop-downs have specific values>
I can get it working when it's checking against just one of the drop-down, but not sure how to get it to check against two (or more).

this is what i have already

$(document).ready(function () {
    toggleFields();
    $("#warnlabel").change(function () {
        toggleFields();
    });

});

function toggleFields() {
    if ($("#warnlabel").val() == 'YES')
    {
        $("#warnlabelcontainer").show();
    }
    else
    {
        $("#warnlabelcontainer").hide();      
    }
}

"warnlabel" is the current drop-down it is looking at.
"warnlabelcontainer" is the section i am hiding or showing depending on what is selected in "warnlabel"

I need to it also check against "outcome" being a specific value before it shows "warnlabelcontainer".

 

26 REPLIES
Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

I just recreated it on jsfiddle.

https://jsfiddle.net/p3afj1hf/

Seems to work fine in its current state, just need to make sure the value of the selected option matches what you are checking for in the function (javascript is case sensitive).

Edit: what would 'outcome' be in terms of a value being returned? I misread what you were asking in terms of extended functionality..

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

that just does exactly what i already have?

 

the "outcome" field is just a selection of words, but essentially for testing could simply be "YES or "NO".

Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

Okay, I see what you mean.

So both drop downs are visible, you want to select options in both and have it evaluate the value each time you change either one to see if it matches a conditional statement. Your script is only checking the onChange on the first drop down and so it would only ever trigger the evaluation when the first drop down is changed. You need to make it so it triggers the check when either one of those drop downs are changed.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

yes that is correct.
i only want the "warnlabelcontainer" to show when field 1 matches 1 certain value AND field 2 matches a certain value.
Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

Okay, I have updated the jsfiddle:

https://jsfiddle.net/p3afj1hf/1/

What I have done is added the 'outcome' drop down and repeated the call to the function when the second drop down is changed.

In the function, I have added a secondary check using && which tells the function that both conditions must be met in order to proceed otherwise it will just do the else part of the function.

Maybe this is closer to what you need?

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

yeah that works!
i've tweaked it to suit the possible options from the drop-down

 

$(document).ready(function () {
    toggleFields();
    $("#warnlabel").change(function () {
        toggleFields();
    });
    $("#outcome").change(function () {
        toggleFields();
    });
});

function toggleFields() {
    if ($("#warnlabel").val() == 'YES' && ($('#outcome').val() == 'RD' || $('#outcome').val() == 'PR' || $('#outcome').val() == 'F')) {
        $("#warnlabelclasscontainer").show();
    } else {
        $("#warnlabelclasscontainer").hide();      
    }
}
Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

Nice one Smiley

Do you need to evaluate the values on dom ready? I would just hide the warnlabelclasscontainer at this stage but it depends on whether your page is reloading with those values as well?

$(document).ready(function () {
    $("#warnlabelclasscontainer").hide();
    $("#warnlabel").change(function () {
        toggleFields();
    });
    $("#outcome").change(function () {
        toggleFields();
    });
});

function toggleFields() {
    if ($("#warnlabel").val() == 'YES' && ($('#outcome').val() == 'RD' || $('#outcome').val() == 'PR' || $('#outcome').val() == 'F')) {
        $("#warnlabelclasscontainer").show();
    } else {
        $("#warnlabelclasscontainer").hide();      
    }
}

 

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

this is just an initial build/test of a new form.

however i've just realised that the #warnlabel drop-down should not always be visible initially.
it should only show if #outcome is RD, PR or F (otherwise it should be hidden).
and then obvioulsly #warnlabelclasscontainer should then only show if #warnlabel is YES (after it has become visible from the previous visibilty check.
Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

Fix

If that's the case you don't need to check the value on both instances when changing the values as the second drop down would not be visible if the first one doesn't evaluate to the one you wanted. You could just have a single function for each onchange event instead?

https://jsfiddle.net/p3afj1hf/2/

$(document).ready(function () {
    $("#warnlabelclasscontainer").hide();
    $("#steptwo").hide();
    $("#warnlabel").change(function () {
        toggleFieldOne();
    });
    $("#outcome").change(function () {
        toggleFieldTwo();
    });
});

function toggleFieldOne() {
    if ($("#warnlabel").val() == 'YES') {
        $("#steptwo").show();
    } else {
        $("#steptwo").hide();      
    }
}

function toggleFieldTwo() {
    if ($("#warnlabel").val() == 'YES' && ($('#outcome').val() == 'RD' || $('#outcome').val() == 'PR' || $('#outcome').val() == 'F')) {
        $("#warnlabelclasscontainer").show();
    } else {
        $("#warnlabelclasscontainer").hide();      
    }
}

Or if you want to be super slim in your coding, you could have the togglefields be more generic and you pump your conditions into the () on the function at the onchange so you end up with a single function that does it all.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

ah that's in the wrong order, but the general idea.
in your fiddle, step 2 should actually be step 1.

step one options are RD,F,PR, NA
step two is YES/NO, but should only show when step 1 is RD,F and PR (NOT when NA)
then the last section only shows then step is YES.
Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

well after a lot of fiddling, this is what my end result is.
it now has lots of checks and different results based on a few selected fields.

 

$(document).ready(function () {

	$("#warnlabelcontainer").hide();
    $("#warnlabelclasscontainer").hide();
    $("#partsusedcontainer").hide();
    $("#partsuseddesccontainer").hide();
    $("#bercontainer").hide();
    $("#furtheractioncontainer").hide();    
    $("#berreasoncontainer").hide();
    $("#partscontainer").hide();
    
    $("#outcome").change(function () {
        toggleFieldOne();
    });
    
    $("#warnlabel").change(function () {
        toggleFieldTwo();
    });
    
    $("#partsused").change(function () {
        toggleFieldThree();
    });
    
    $("#berquestion").change(function () {
        toggleFieldFour();
    });    
    
});

function toggleFieldOne() {
    if ($("#outcome").val() == 'RD')
    {
        $("#warnlabelcontainer").show();
        $("#partsusedcontainer").show();
    	$("#bercontainer").hide();
   		$("#furtheractioncontainer").hide();
   		$("#partscontainer").hide();
   		$("#berreasoncontainer").hide();
	    $("#warnlabelclasscontainer").hide();
	    $("#partsuseddesccontainer").hide();
	
    }
    else if (($('#outcome').val() == 'PR'))
    {
        $("#warnlabelcontainer").show();
        $("#partsusedcontainer").hide();
    	$("#bercontainer").hide();
   		$("#furtheractioncontainer").hide();
   		$("#partscontainer").show();
   		$("#berreasoncontainer").hide();
	    $("#warnlabelclasscontainer").hide();
	    $("#partsuseddesccontainer").hide();
    }
    else if (($('#outcome').val() == 'F'))
    {
        $("#warnlabelcontainer").show();
        $("#partsusedcontainer").hide();
    	$("#bercontainer").show();
   		$("#furtheractioncontainer").show();
   		$("#partscontainer").hide();
	    $("#warnlabelclasscontainer").hide();
	    $("#partsuseddesccontainer").hide();
	    $("#berreasoncontainer").hide();
    }    
    else
    {
        $("#warnlabelcontainer").hide();
        $("#partsusedcontainer").hide();
    	$("#bercontainer").hide();
   		$("#furtheractioncontainer").hide();
   		$("#partscontainer").hide();
   		$("#berreasoncontainer").hide();
	    $("#warnlabelclasscontainer").hide();
	    $("#partsuseddesccontainer").hide();
    }
}
function toggleFieldTwo() {
    if ($("#warnlabel").val() == 'YES') {
        $("#warnlabelclasscontainer").show();
    } else {
        $("#warnlabelclasscontainer").hide();
    }
}

function toggleFieldThree() {
    if ($("#partsused").val() == 'YES') {
        $("#partsuseddesccontainer").show();
    } else {
        $("#partsuseddesccontainer").hide();
    }
}

function toggleFieldFour() {
    if ($("#berquestion").val() == 'YES') {
        $("#berreasoncontainer").show();
        $("#partscontainer").show();
    } else {
        $("#berreasoncontainer").hide();
        $("#partscontainer").show();
    }
}
Community Veteran
Posts: 3,274
Thanks: 339
Fixes: 12
Registered: 24-10-2013

Re: javascript help

an update to this.
form working well apart from one thing.

say someone says YES to one of the questions, which results in a sub-question appearing which they also answer.
but then change their mind and change the original question to NO. the sub-question gets hidden but the answer to that sub-question still remains in place.

is there a way to null such answers should the parent question get changed?

example form here - https://jsfiddle.net/chenks/8dw3pk5f/
Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

You will need to use a function to reset specific questions.

Something like this:

function resetSelectElement(selectElement) {
    selectElement.selectedIndex = 0;  // first option is selected, or
                                     // -1 for no option selected
}

Then call that function where needed, passing over the ID of element you wish to select.

You can do other stuff for text inputs. Maybe a function like this:

function resetTextElement(textElement){
    textElement.val('');
}

just place those functions at the bottom and call them whenever you switch questions. Just putting a jsfiddle together...

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Gaffer
Community Gaffer
Posts: 3,118
Thanks: 1,768
Fixes: 69
Registered: 22-02-2016

Re: javascript help

After looking into it a bit more, it looks like jquerys .val function will work on more than just text inputs, seems to work on select options too. You might need something different if you have radio or checkboxes though.

I have added a function and applied it to the general onchange event at the top of the form

https://jsfiddle.net/dm423yy0/6/

This should get you started on what you want to reset and at what point.

Hope it helps!

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.