We Keep Coding

Show/hide multiple fields based on drop down selection

I am using SharePoint Calendar and we are using multiple columns and it is 25 columns, in each time when we want to add new record, we have to skip a lot of columns. So using a dropdown list by showing or hiding multiple columns based on my selection would be a good idea.
What I did after discovering below code, I create a dropdown named Selection and applied the script code below but however it does not work based on my selection. I will be grateful if you guys could help me on this issue.
Thank you
<script src="/SiteAssets/jquery-3.3.1.js"></script>
<script src="/SiteAssets/sputility.js "></script>
<script>
$(document).change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Country') {
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Animal');
SPUtility.HideSPField('Fruit');
}
if (ddlValue == 'Fruit') {
SPUtility.ShowSPField('Fruit');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Animal');
}
if (ddlValue == 'Animal') {
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
SPUtility.HideSPField('Colour');
}
if (ddlValue == 'Colour') {
SPUtility.ShowSPField('Colour');
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
}
});
</script>

First thing you need to do is create a change() function linked to your dropdown so that the function triggers every time you change the values. You can do that by doing this:
$("your selector for your dropdownfield").change(function() {
//your actions here
});
The next thing you need to do is get the value of the dropdown field then perform the hiding of the fields based from its value. To do that, you need to do the following:
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
So if we combine the two together you will end up with:
$("your selector for your dropdownfield").change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
});
You can just add more if conditions within the change() function and you should now be able to hide/show fields based on the value of the dropdown.
Let me know if it works!

javascript add value to id based on select option value conditional

First off, I know I should know this. I am just not connecting the dots.
I have jquery working with a select menu so that when an option is selected, it's value is added to a hidden id in my form.
What I need, is that when an option is selected in this same select menu, depending on which option is selected, an email becomes the value in a different hidden id in the form.
I have an if conditional in my jsfiddle but it is not working. Any help is appreciated. Thanks! Peter T
jQuery(document).ready(function() {
// pass the title of the selected topic option to a hidden 'topic' form field
jQuery('select#recipient_email').change(function() {
var topic = jQuery('select#recipient_email option:selected').attr('title')
// set the hidden input's value
jQuery('#college2').val(topic);
//var topic_var = jQuery('#college2').val(topic);
if ((jQuery('#college2').val(topic)) == "Var 1")
{
$("#recipient_email_user").val("John.Doe#mail.com");
}
if ((jQuery('#college2').val(topic)) == "Var 2")
{
$("#recipient_email_user").val("Jane.Doe#mail.com");
}
})
})
jsfiddle

This line is wrong
if ((jQuery('#college2').val(topic)) == "Var 1")
You are setting the value and it returns the jQuery object, it is the equivilant of jQuery('#college2') == "Var 1"
If should just be
if (topic == "Var 1")

Javascript if a dropdown button is selected, textboxes must change color

Hi I have a simple question.
I want to change the textbox color when a dropdown button is selected to "Future". This is what I have tried so far. There are no errors and if I put the $('[name="strike"]').css("background-color", "red"); line in the console then the textbox goes red. So I assume there is something wrong with the if condition ?
if ($('[name="putCallButton"]').text() == "Future"){
$('[name="strike"]').css("background-color", "red");
}

use on event :
$('[name="putCallButton"]').on("select", function() {
if ($('[name="putCallButton"]').text() == "Future"){
$('[name="strike"]').css("background-color", "red");
}
})

Please add the value attribute to your option tag and set its value same as the option text.
$('[name="putCallButton"]').on('change', function() {
if ($('[name="putCallButton"]').val() == "Future"){
$('[name="strike"]').css("background-color", "red");
}
});

You should use .value() instead of .text(). .text() returns all the options of the selected item

Javascript catch unselected radio button along with textboxes and alert

I'm practically new here and i'm a beginner in programming.
I am creating an html/js based template for my team for easy consolidation of data and copy to clipboard so we can easily paste it in our main tool.
The problem is that doesn't seem to work properly (at least here at the office, at home it does work).
It doesn't prompt when the radio selection is empty, so I am resorting to using my current function that catches any textboxes/textarea that is empty. (sample code below)
if (document.getElementById('INbrief').value == "") {
errCatch +="-Issue/Request \n";
valid = false;
}
if (document.getElementById('INdesc').value == "") {
errCatch +="-Issue/Request Description \n";
valid = false;
}
if (!valid) {
document.body.removeChild(dummyTxtArea);
alert(errCatch);
return valid;
} else {
document.body.removeChild(dummyTxtArea);
alert ("Data has been copied to Clipboard.");
}
The above if else is inside a Function that is called when the Evenlistener is triggered via "click" of the submit button. I tried inserting a 'for' statement above the if else inside the function but it wont work and the alert will only show that the textbox/area are empty. Thanks in advance for your help

Your code was throwing errors at lines 4 and 5 when you were trying to get the value of an unchecked radio box and set the variable to that value:
var selectedLOB = document.querySelector('input[name="INlob"]:checked').value; //LOB selected
var selectedSev = document.querySelector('input[name="INsev"]:checked').value; //Severity selected
In order to fix this you must first check if the radio is selected, and then if it is get the value that is selected. You can do that by replaceing your lines 4 and 5 with the following:
var selectedLOB = document.querySelector('input[name="INlob"]:checked') ? document.querySelector('input[name="INlob"]:checked').value :false;
var selectedSev = document.querySelector('input[name="INsev"]:checked') ? document.querySelector('input[name="INsev"]:checked').value :false;
This code will first check to see if the radio is checked, if it is it will set the variable to the value, if it is not it will set the variable to false.
(The a ? b : c is know as the conditional or ternary operator and is just a short if() else()statement). This change will stop the errors from being thrown.
You will also need to update your checks further down for the radios to:
if (selectedLOB == false) {
errCatch +="-Choose LOB \n";
valid = false;
}
if (selectedSev == false) {
errCatch +="-Choose Severity \n";
valid = false;
}
As a side note you don't have to set uncheck radios to false, you could set them to a string like 'unchecked' or ''empty' if it helps make your code more readable. Just be sure to make sure that your checks match what you set it to.

jQuery - append string to input when changed

I have multiple select inputs on a page and I'd like to set all of them to have a particular option selected if a checkbox is checked
Once the form is submitted the inputs that have been updated will be looped through and sent to the database, so I have a function to append a string to the option value which is called on change of the select
This is all working great, however I'd like to append the updated string (to the value, not text) when the select option is changed by the checkbox being checked, but can't seem to get this to work
Fiddle https://jsfiddle.net/69zzr6xa/2/
I've tried looping through each select like so and then checking if the second option is already selected. If not, append the string, but it doesn't appear to work
$('select').each(function() {
if (!$(this).$('option').text == 'Two') {
var inputname = $(this).find(":selected")[0].value;
$(this).(":selected").val(inputname + "-updated");
}
});

I think this is what you are looking for.
function set_to_two() {
$('option:nth-child(2)').each(function(){
$(this).prop('selected', true);
if( $(this).val().indexOf('-updated') < 0 ){
$(this).val( $(this).val() + "-updated" );
}
});
set_updated();
}