We Keep Coding

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

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.

Can CSS or JS effect the submission of a form?

I have a large form spread over 3 tabs. The tabs are controlled by JS which simply changes the css property display: block to display:none depending what tab you click on.
This form also submits data to 3 different tables via php. When i submit my form at the end of the the 3rd tab some of my data is missing in a table that accepts multiple rows (the other two tables only accept a single row) In this section of the form I let the user add as many "Rooms" as they need. The rooms are just a few selection boxes, and the extra selection boxes are also added with JS. When i submit my form only the first "room" is added to the table.
I am positive every thing is working as if I remove the tabs it works perfectly or even if i add all three sections of the form to one tab it works. Below is the PHP that inputs the rooms and loops depending how many there are. Sorry this is a very large form so i dont want to just stick it all in, but it is all very simple and all working. Please let me know if I should add any other part of my code if that helps.
$level = $_POST['level'];
$room_type = $_POST['room_type'];
$width = $_POST['width'];
$length = $_POST['length'];
$num_rooms = count($level);
for($x=0;$x<$num_rooms;$x++)
{
$room_insert = mysqli_query($dbcon, "INSERT INTO listing_rooms (Listing_ID, Level, Type, Length, Width) VALUES ('$listing_id', '$level[$x]', '$room_type[$x]', '$length[$x]', '$width[$x]')") or die(mysql_error());
}
To trigger this I have an if(isset()) just above this. Thanks for any help.
This is the JS that shows and hides the tabs...
function showHideTab(tab_id) {
if (tab_id == 'details_tab'){
document.getElementById('listing_details').style.display='block';
document.getElementById('listing_info').style.display='none';
document.getElementById('photo_upload').style.display='none';
}else if (tab_id == 'info_tab') {
document.getElementById('listing_info').style.display='block';
document.getElementById('listing_details').style.display='none';
document.getElementById('photo_upload').style.display='none';
}
else if (tab_id == 'upload_tab') {
document.getElementById('photo_upload').style.display='block';
document.getElementById('listing_info').style.display='none';
document.getElementById('listing_details').style.display='none';
}
}

As I thought this was a very simple error. As i said I have 3 divs being shown or hidden by JS. My issue was I had my opening FORM tag inside my first div!
I still dont know why everything other then the array of "rooms" worked fine regardless of where the opening form tag was, and even the array held the first value?

Show/Hide with Multiple Radio Buttons

I am very new to building forms with js. I copied and applied a bit of code to get fields to pop up depending on the Radio button I select. This works great for two radio buttons, but my issues is that I want to include several (5+) and would like to reset the fields with every change.
I was thinking I can input additional code to reset all fields "onchange" but I can't get this piece of code to work... here is what I copied and modified for my use:
works great with 2 buttons as designed:
{
toggleSelectionFields: function() {
var isLaptop = ca_fdIsSelectRadio('showhide','group','short');
if (isLaptop) {
ca_fdHideField('showhide','longfields');
ca_fdShowField('showhide','shortfields');
} else {
ca_fdHideField('showhide','shortfields');
ca_fdShowField('showhide','longfields');
}
}
}
Here is what I tried to do:
{
toggleSelectionFields: function() {
Var discovery = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','discovery');
Var headset = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','headset');
Var fac = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','feature');
Var calls = ca_fdIsSelectRadio('phone','deskphone4610','selectproblem','SelectIssue','calls');
if (discovery)
{ca_fdShowField('phone','deskphone4610','selectproblem','discovermode')}
if (headset)
{ca_fdShowField('phone','deskphone4610','selectproblem','headset')}
if (fac)
{ca_fdShowField('phone','deskphone4610','selectproblem','feature')}
if (calls)
{ca_fdShowField('phone','deskphone4610','selectproblem','calls')}
}
}
}

This appears to be a JavaScript question (not Java) and related to a particular framework (CA Service Catalog), so questions about how to do things with particular CA functions would probably be best answered on the CA Service Management Global User Community message boards.
As a general logic/JavaScript question, though, you need to hide the fields you don't want to see in addition to showing the ones you do want to see. Notice that your first example calls ca_fdHideField to hide one set of fields, then ca_fdShowField to show the other. If you don't want to duplicate a lot of code, you could hide them all before the if statements, then just show the one that corresponds with the radio button that was selected:
ca_fdHideField(...)
ca_fdHideField(...)
...
if (discovery) {
...
}
etc.

Display textbox due selected option, and add new divs --jQuery

I have articles that I want to get recorded. Each article has mutliple references (up to 100), and a reference might be a book or an article.
If a reference is a book, I have to get author name, page number etc.
If it is an article, then I have to get published journal, year etc. (there are differences).
So, I want to let the user select if it is an article or a book from a dropdown menu. Then related textboxes have to come visible. The user fills in related information and reference 1 is ok.
But, because when a reference number is unknown, and might be 10-20-30 etc., I have to add a add button, when reference 1 information is done, reference 2 have to be displayed.
If the add button is clicked first, the very same selection menu appears and related to that selection a new textbox become visible, and so on...
Here is a little jquery for displaying textboxes after selected option:
$(function() {
//This hides all initial textboxes
$('label').hide();
$('#sel').change(function() {
//This saves some time by caching the jquery value
var val = $(this).val();
//this hides any boxes that the previous selection might have left open
$('label').hide();
//This just opens the ones we want based off the selection
switch (val){
case 'option1':
case 'option4':
case 'other':
$('#label1').show();
break;
case 'option2':
$('#label1').show();
$('#label2').show();
$('#label3').show();
break;
case 'option3':
$('#label1').show();
$('#label2').show();
break; }
});
And this is for adding new div's:
<script type="text/javascript">
var initial=0;
function addReference(){
var newDiv= addNewDiv();
var htcontents="";
document.getElementById(newDiv).innerHTML=htcontents;
}
function addNewDiv(){
initial=initial+1;
var ni = document.getElementById('area');
var newdiv=document.createElement('div');
var divIdName = 'Div #' +initial;
newdiv.setAttribute('id', divIdName);
ni.appendChild(newdiv);
return divIdName;
}
</script>
Of course htcontents is filled with html form.
How to do that efficiently?
Thanks very much in advance.

conditional change of quantity text box using jquery?

I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.
The crucial part for kit products is:
if (parseInt($("#kitProduct #Quantity").val()) < 25) {
$("#kitProduct #Quantity").attr("value", "25");
It knows its a kit product because i have a div.id wrapped around the page called Kit Product.
My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:
<div class="ProductNameText">Exclusive Handmade Box</div>
If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.
I have tried the following code:
quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
if(quantity)
{
$("#kitProduct #Quantity").attr("value", quantity);
$("#kitProduct #Quantity").keypress(function(){
var quantity = parseInt($.trim($(this).val()));
if( quantity < 1) {
$(this).val('1');
} else {
$(this).val(quantity);
}
But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.
Really hope you can help?
More infomation:
For the most part Kit products are defined in an xml package which is applyed to a kit product in the admin section. However i have a few products which are still products but dont require 25 to be put into the quantity.
At the moment the jquery checks for a text area box because if the user adds a personalisation into that it means they are wanting a kit product therefore min quantity is 25.
But i have a product i want to check based on its div contents that i want to have as 1 or more...
so i should be able to enter 1-25 into the box without my current code saying oppps you entered less than 24 so im going to change it back to the min kit product quantity..
if you try the jsfiddle you can see that it wont let you put in a value of say 3? thats the problem.
http://jsfiddle.net/FB5MQ/3/

You should just have a variable minimum in the "crucial part for kit products" code:
var minValue = 25;
if ($('div.ProductNameText').text().match(/Exclusive Handmade Box/)) {
minValue = 1;
}
if (parseInt($("#kitProduct #Quantity").val(), 10) < minValue) {
$("#kitProduct #Quantity").prop("value", minValue);
// rest of code...