javascript help
FIXED- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: javascript help
24-03-2017 2:51 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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".
Fixed! Go to the fix.
Re: javascript help
24-03-2017 3:23 PM - edited 24-03-2017 3:26 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
24-03-2017 3:26 PM - edited 24-03-2017 3:27 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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".
Re: javascript help
24-03-2017 3:37 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
24-03-2017 3:38 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
i only want the "warnlabelcontainer" to show when field 1 matches 1 certain value AND field 2 matches a certain value.
Re: javascript help
24-03-2017 3:41 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
24-03-2017 3:58 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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(); } }
Re: javascript help
24-03-2017 4:01 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Nice one
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.
Re: javascript help
24-03-2017 4:11 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
24-03-2017 4:37 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
24-03-2017 5:25 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
27-03-2017 11:23 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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(); } }
Re: javascript help
28-04-2017 4:00 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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/
Re: javascript help
28-04-2017 4:08 PM - edited 28-04-2017 4:10 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: javascript help
28-04-2017 4:42 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page