How to Show/Hide Column Fields Based on Other Fields - SharePoint - javascript

I have a table with multiple columns in SharePoint and I am frequently adding new records into this table. The hard part of this, having a lot of columns make it difficult and causes confusing.
In below code, I hide all the columns and based on selection in the dropdown list, the fields will be shown to be key in. This test dropdown list consists of Country, Fruit, Animal and Colour it only gives me two option showing and hiding but I want to do same process for multiple fields. I am not sure how to do it. I will be grateful for your help, if you could direct me on how to do it.
Thanks
<script src="/SiteAssets/jquery-3.3.1.js"></script>
<script src="/SiteAssets/sputility.js "></script>
<script>
$(document).ready(function ()
{ // Get a the choice field
var choiceField = SPUtility.GetSPField('Selection');
// Hide the target fields in form load
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
SPUtility.HideSPField('Animal');
SPUtility.HideSPField('Colour');
// create a function to show or hide a field based on the selected choice Field value
var ShowHideField = function() {
var selectedFieldValue = choiceField.GetValue();
if (selectedFieldValue != 'Country') {
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Animal');}
else if (selectedFieldValue != 'Fruit') {
SPUtility.ShowSPField('Fruit');
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Animal');}
};
$(choiceField.Dropdown).on ('change', ShowHideField); });
</script>
#LZ_MSFT thank you for your help and I am sorry for misleading you.
I actually wanted to show the multiple fields based on particular selection in the dropdown list.
Let's say, as shown in the script above, when I choose country in the dropdown list both country and animal fields should appear or when I choose Fruit in dropdown list fruit, country and animal fields should appear. In above script, it works perfectly. However, I want to apply same process for more than 2 cases. Like, I want to choose Color and display only animal and fruit but I am not sure how to apply it after using If else statement.
If you could show me, I would be grateful for your help.
Thank you

The following code for your reference:
<script src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var fields=["Country","Fruit","Animal","Colour"];
hideFields(fields);
$("select[title='Selection']").change(function(){
$(".ms-standardheader nobr:contains('"+$(this).val()+"')").closest("tr").show();
});
});
function hideFields(fields){
for(var i=0;i<fields.length;i++){
$(".ms-standardheader nobr:contains('"+fields[i]+"')").closest("tr").hide();
}
}
</script>
If the code not meet your requirement, I suggest you provide more information for further research.

Related

Hide and show contact form 7 field using Select optiond field values

I am using contact form 7 plugin for my carrier form. Right now i am hide/show some field using Select option values using java script.
Example:
IF First select box option value is (i) Faculty then display another Second select option field and if in First select box user select other options then hide second select options fields.
For this please see this screen shot -> http://nimb.ws/uxHNjy
For this i have used following JS:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#subject_forpost").hide();
});
</script>
<script type="text/javascript">
jQuery(".career_postapplied").change(function(){
var value = this.value;
if (value == "(i) Faculty"){
jQuery("#subject_forpost").show();
}
else
{
jQuery("#subject_forpost").hide();
}
});
</script>
Above JS works good for me. But i have facing one issues in email body. When user select "(i) Faculty " options and then in second select option select any subject and again if user change their mind and in First select option select other options then second select options field hide. That's good but when admin received that mail then in email body also display Second select options values.
This one is issues. So How can i clear second select options value before form mail send if user change their mind and select other options in First select option field.
Thanks.
I have added following code in else condition part and issues fixed.
jQuery("#subject_forpost").find('select').val('');
So working code is:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#subject_forpost").hide();
});
</script>
<script type="text/javascript">
jQuery(".career_postapplied").change(function(){
var value = this.value;
if (value == "(i) Faculty"){
jQuery("#subject_forpost").show();
}
else
{
jQuery("#subject_forpost").find('select').val('');
jQuery("#subject_forpost").hide();
}
});
</script>

Hide an option in a dropdown menu, when a specific option has been selected in another menu

I'm stuck right now on the following problem:
I have 2 dropdown menus next to each other, that both offer the same options to choose from (users can choose their travel route by choosing their point of departure and their destination).
The items on these dropdown menus are taken from a table in my database.
I want to achieve the following:
Locations "A", "B" and "C" are choosable as start or destination. When a user chooses "B" as point of departure (in the 1st dropdown menu), this option should not be shown anymore in the 2nd dropdown menu (destination). (EDIT: But it should reappear, when another option is selected in the 1st dropdown)
Same with "A" and "C" of course.
The code I use right now to fill the dropdown menus is:
<select name="anfang">
<?php
$sql = "SELECT * FROM orte";
$result = mysqli_query($dblogin,$sql);
while($zeilestart=mysqli_fetch_array($result))
{
include("includes/database.php");
$ortname=$zeilestart['name'];
$ortkurz=$zeilestart['kurz'];
echo "<option value=\"$ortkurz\">";
echo $ortname;
echo "</option>";
}
?>
</select>
This is the code for the 1st dropdown menu (start), the code for the 2nd menu is pretty much the same.
I assume that some JavaScript-code can solve my problem, but I don't really know how to do it... Can anyone help me? :)
Thanks and kind regards
weheri
The following code should be easy to understand - it basically queries the DOM for the first dropdown list's select element and the second dropdown lists' options elements. It attaches an event handler to the onchange event of the first select, so that whenever its value changes, the handler function is called to check all the options on the second select against the selected value. If the value matches, it sets a disabled attribute on the option, otherwise if the option has a disabled attribute (from a previous selection), it removes it.
You can add this to your page before the closing body tag, changing secondSelect to the name of your second dropdown.
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].setAttribute('disabled',true);
else if(secondList[i].getAttribute('disabled'))
secondList[i].removeAttribute('disabled');
}
}
</script>
If you would like to hide the element altogether (instead of disabling it), you can to use the style attribute instead of disabled:
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].style.display = "none";
else if(secondList[i].style.display == "none")
secondList[i].removeAttribute('style');
}
}
</script>
I was writing the code when I saw this already have been answered, but here is my contribution (full code example, using a php array to get the data from instead of a mysqli object/array)
http://pastebin.com/0J31FK15

Disable toggle switch in Javascript

This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.

Single Choice Dropdown

I am building a form to rank series of items. The user will read the item and select in a dropdown the rating from 1 to 20. All 20 items will be displayed at the same time. What is the best way to make sure that the user didn't select the same number for more than one choice? Then I would display an error message, "You've already ranked an item as number 5"
Thanks
Put the items in a list with options to move an element up or down in the list.
I would suggest something like the following function. You may want to add something to revert the selection to some default value if it is a duplicate.
function checkDupe(element) {
var dupe = false;
$("select").each(function() {
if ($(this).attr("id") != $(element).attr("id") && $(this).attr("value") == $(element).attr("value")) {
dupe = true;
alert("You have already ranked an item number " + $(element).attr("value"));
return;
}
});
return dupe;
}
Just add that to the onchange event for all the dropdown lists like this.
<select id="a1" onchange="checkDupe(this)">
It's important to note that each list must have a unique ID.
There is a jquery plug-in for validation, that can help you define rules. It only works on submit, though but it'll still wont send the form and tell you which entry is wrong. Take a look at it, may be it can help you.

Simple javascript form reset when certain text boxes are clicked

Morning all...thicky, newbie Rich here!
I have a very simple set up, three different search options for finding product information i.e. a cascading drop down list, a product search text box and a radio button list.
Ideally, I do not want the form to get cluttered with information or have to use a 'click here to reset' button.
What I would like is for the form to reset/clear itself when a user either hits the drop down, the text box or the radio button list. Therefore this will ensure the searching does not get cluttered with information that potentially isn't being used.
How would one go about doing this? As per my other questions, please excuse my ignorance.
What you want to do is fairly simple with jquery if you're using it. Without knowing your exact markup I can really only pseudo-code it out for you, but something like this should be a start:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$inputs = $("#places, #search, #radio_search");
$.each($inputs, function() {
$(this).focus(function() {
$.each($inputs, function() {
$(this).val('');
$(this).attr('checked', false);
})
});
})
});
</script>
You want to inlcude the jquery library and add this to the head tag of the html page you want to do this on. You'll also need to make sure the $inputs = $("#places, #search, #radio_search"); matches the specific ids of the inputs you're trying to change.
Ok dokey, got it to work, lovely stuff.
However, in my drop down list, I wish to retain the orignal value rather than clear it all together, the current working code is as follows.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$inputs = $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx");
$.each($inputs, function() {
$(this).focus(function() {
$.each($inputs, function() {
$(this).val('');
$(this).attr('checked', false);
})
});
})
});
Is there a way I can specify the individual values i.e. tbxProdAC ='',
ddlBuyer = Original Value, txtbxHowMany='', radTopx =''?

Categories