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!

Hide drop-down box on basis of text result using javascript

I want to hide a drop-down on the basis of a selected user input.
So far I have done
var getText = document.getElementById('issuemeters-issuance_type').value;
Then in if else condition
if(getText == 'HESCO/OEM')
{
$('.field-issuemeters-issuer').hide();// the drop-down which i want to hide
$('#issuemeters-issuer').val('');// setting the text value to null
}
else
{
$('.field-issuemeters-issuer').show();
}
It will work when getText is equal to HESCO/OEM. I have also checked the value in console but I don't know why it's not working.
Any help would be highly appreciated.

try with a listener on "issuemeters-issuance_type" change:
$('#issuemeters-issuance_type').on('change',function(){
if($(this).val() === 'HESCO/OEM')
{
$('.field-issuemeters-issuer').hide();// the drop-down which i want to hide
$('#issuemeters-issuer').val('');// setting the text value to null
}
else
{
$('.field-issuemeters-issuer').show();
}
});
assuming that "issuemeters-issuance_type"

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

get selected value from drop down

I want to change the zip code according to drop down list for example if i select Canada from drop down list name "ddlselcountry" and Canada is at 40th place in drop down, for that only zip code should change (what is the condition i should put in for 'if condition') and for other country it should go to else condition.
I have tried this in upper example but i am not going inside if condition,It is generating error.
if ($("#ddlselcountry")[0].selectedindex == "40"){
var zipCodePattern = /^[A-Za-z0-9]{3}[ ]{1}[A-Za-z0-9]{3}$/;
return zipCodePattern.test(zipcode);
}

It is selectedIndex not selectedindex. It is case sensitive.
$("#ddlselcountry")[0].selectedIndex
Instead of this you can use
$("#ddlselcountry").val() == 'value of canada';

Please change selectedindex to selectedIndex
$("#ddlselcountry").selectedIndex

U can try this
if ($("#ddlselcountry").selectedIndex == "40"){
var zipCodePattern = /^[A-Za-z0-9]{3}[ ]{1}[A-Za-z0-9]{3}$/;
return zipCodePattern.test(zipcode);
}

add and remove a certain value from a text field

each checkbox that i check, i fill the input with it's id
now, how can i retrieve this id that i put inside the input if the user uncheck the checkbox?
exp:
estate SC,SP was checked;
input recieve SC,SP value in this format = SC,SP
but the user uncheck the checkbox with SC value, then SC should be removed from the input.
this is what i'm doing to fill the input with the checkboxes.
var separador = ",";
var estadosS = "";
$(".checkboxEstados").live("click", function(){
if($(this).is(":checked")){
estadosS += (estadosS == "") ? "" : separador;
estadosS += $(this).attr("id");
$("#holdEstados").val(estadosS);
}else{
// now i'm just cleaning all the input,
// but i need to clean only the checkbox that was unchecked
$("#holdEstados").val("");
}
});
dont know if i was clear, any question, be my guest.
Thanks.

An easy way to solve this is to avoid parsing and removing parts of the data. Instead of trying to remove 'SC', instead regenerate the entire contents of the text field each time any checkbox is selected.
When a checkbox click event is detected, deleted the contents of the text input field, scan all of the selected checkboxes, and include their IDs in the text input field.

You're logic can be greatly simplified. Simply grab each checkbox that is checked when the click event fires:
$(".checkboxEstados").live("click", function() {
var aryIds = new Array();
$(".checkboxEstados:checked").each(function() {
aryIds.push($(this).attr("id"));
});
$("#holdEstados").val(aryIds.toString());
});
Here's a working fiddle.

I would store the value in an array and add and remove values from it and then write the array to the output instead of trying to parse the text each time:
var estadosS = [];
$(".checkboxEstados").live("click", function(){
var index;
if($(this).is(":checked")){
// append the id to the list
estadosS.push($(this).attr("id"));
}else{
index = estadosS.indexOf($(this).attr("id"));
if(index > -1) {
estadosS.splice(index, 1);
}
}
$("#holdEstados").val(estadosS.join(separador));
});

If all you are aiming to do is get a list of the checked values from all the check boxes, you could do:
$('.checkboxEstados:checked').each(function(){
alert($(this).val());
});
And that should return all the check box items that have been checked. Then you don't have to worry about adding and removing data from a text box. I'm just alerting the value, you would want to store them into an object or something more useful.