I am trying this JavaScript code to give user a message when selected item from a drop down list contains "Ultra Low" but is not working. Can someone please help?
<script language="javascript" type="text/javascript">
var dropdown = document.getElementById("ddGlass");
dropdown.onchange = function (event) {
if (dropdown.str.indexOf("Ultra Low") > -1) {
alert("Glass Option is for Yuma Only")
}
}
</script>
Where did you get dropdown.str? It should be dropdown.value.
Related
I'm working on the SharePoint online form with show or hide columns with the below code. it is working well but not able to combine three codes together and on the edit item form by default all the fields are getting hide even though as per the code it should show the fields based on selected dropdown value. if we change the values in the edit form again the show values are working fine.
along with this code i want the make all the visible fields are mandate fields with, any assistance would be really appreciated.
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("Person1")').closest('tr').hide();
$('nobr:contains("Person2")').closest('tr').hide();
$('nobr:contains("Dropdown")').closest('tr').hide();
$('nobr:contains("Dropdown1")').closest('tr').hide();
$('nobr:contains("Text")').closest('tr').hide();
$('nobr:contains("Dropdown2")').closest('tr').hide();
$('nobr:contains("Date column")').closest('tr').hide();
$('nobr:contains("Number filed")').closest('tr').hide();
$('nobr:contains("Dropdown3")').closest('tr').hide();
$('nobr:contains("Remarks")').closest('tr').hide();
$('nobr:contains("Dropdown4")').closest('tr').hide();
$('nobr:contains("number2)")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Status Required Field']").change(function () {
console.log("selection changed", $("[title='Status Required Field'] option:selected").text());
alert($("[title='Status Required Field'] option:selected").text());
if ($("[title='Status Required Field'] option:selected").text() != "submitted") {
$('nobr:contains("Person1")').closest('tr').hide();
$('nobr:contains("Person2")').closest('tr').hide();
$('nobr:contains("Dropdown")').closest('tr').hide();
$('nobr:contains("Dropdown1")').closest('tr').hide();
$('nobr:contains("Text")').closest('tr').hide();
$('nobr:contains("Dropdown2")').closest('tr').hide();
$('nobr:contains("Date column")').closest('tr').hide();
$('nobr:contains("Number filed")').closest('tr').hide();
$('nobr:contains("Dropdown3")').closest('tr').hide();
$('nobr:contains("Remarks")').closest('tr').hide();
$('nobr:contains("Dropdown4")').closest('tr').hide();
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("Person1")').closest('tr').show();
$('nobr:contains("Person2")').closest('tr').show();
$('nobr:contains("Dropdown")').closest('tr').show();
$('nobr:contains("Dropdown1")').closest('tr').show();
$('nobr:contains("Text")').closest('tr').show();
$('nobr:contains("Dropdown2")').closest('tr').show();
$('nobr:contains("Date column")').closest('tr').show();
$('nobr:contains("Number filed")').closest('tr').show();
$('nobr:contains("Dropdown3")').closest('tr').show();
$('nobr:contains("Remarks")').closest('tr').show();
$('nobr:contains("Dropdown4")').closest('tr').show();
}
});
});
</script>
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Dropdown4']").change(function () {
console.log("selection changed", $("[title='Dropdown4'] option:selected").text());
alert($("[title='Dropdown4'] option:selected").text());
if ($("[title='Dropdown4'] option:selected").text() != "Active") {
$('nobr:contains("number2")').closest('tr').hide();
$('nobr:contains("Dropdown5")').closest('tr').hide();
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("number2")').closest('tr').show();
$('nobr:contains("Dropdown5")').closest('tr').show();
}
});
});
</script>
<script src="/sites/XXXXXX/XXXXXXXX/SiteAssets/jquery-1.7.2.min%20-%20Show%20or%20Hide.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("Dropdown6")').closest('tr').hide();
$("select[title='Dropdown5").change(function () {
console.log("selection changed", $("[title='Dropdown5'] option:selected").text());
alert($("[title='Dropdown5'] option:selected").text());
if ($("[title='Dropdown5'] option:selected").text() != "Yes") {
$('nobr:contains("Dropdown6")').closest('tr').hide();
}
else {
$('nobr:contains("Dropdown6")').closest('tr').show();
}
});
});
</script>```
As far as fields hidden on Edit form your document ready function is hiding the fields. There are alot of ways to get the form state. You can simply check location contains New ,Display or Edit form and hide your fields accordingly.
var isNewMode = document.location.pathname.indexOf("/NewForm.aspx") > -1;
var isDisplayMode = document.location.pathname.indexOf("/DispForm.aspx") > -1;
var isEditMode = document.location.pathname.indexOf("/EditForm.aspx") > -1;
if(isNewMode)
{
alert("New");
}
if(isDisplayMode)
{
alert("Display");
}
if( isEditMode)
{
alert("Edit");
}
You can use PreSaveAction() function to do your custom validation. This function is executed once you click on the submit button. return true to submit the form or else return false to stay in the same page.
For Validation Add the code as follows:
function PreSaveAction(){
if($('nobr:contains("someid")').val() == ''){
alert('Required field'); // some custom validation
return false;
}else{
return true;
}
}
I have created a list in sharepoint now in newform I'm trying to hide and show 3 tr alternatively when i click on dropdown value. for eg: I have 3 option in dropdown A, B, C and my tr have ids(A, B, C) click on A only A is there when B only B is there and when C only C is there. same for edit form how to achieve this?
Sample tested script for a previous thread( I can't remember the link), you could update the script based on your fields' definition.
SPUtility.js
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/siteassets/sputility.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var employeetype = SPUtility.GetSPField('Employee Type');
var showOrHideField = function () {
var employeeValue = employeetype.GetValue();
if (employeeValue == 'Existing Employee') {
SPUtility.GetSPField('Employee Name').Show();
SPUtility.GetSPField('Employee ID').Show();
SPUtility.GetSPField('Candidate Name').Hide();
}
else {
SPUtility.GetSPField('Employee Name').Hide();
SPUtility.GetSPField('Employee ID').Hide();
SPUtility.GetSPField('Candidate Name').Show();
}
}
// run at startup (for edit form)
showOrHideField();
// make sure if the user changes the value we handle it
$(employeetype.Dropdown).on('change', showOrHideField);
});
For one of the lists, I have to hide column Project (single line of text) based on the choice column 'Customer' drop down selection. I have two values in customer drop down: Customer W Project and Customer WO Project. If the user selects Customer W Project, I want to hide Project column field on the new item click form. Below is the code I am using, please let me know if anything is wrong:
Also, I am working on SharePoint 2016 online/office 365.
Any help will be greatly appreciated. Thanks.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js></script><script src="/sites/lcpatest/Style%20Library/sputility.js"></script>
<script> $(document).ready(function(){
var customer = SPUtility.GetSPField('Customer');var HideOrShowOthersField=function(){var customerValue = customer.GetValue();
if(customerValue=='Customer W Project'){SPUtility.GetSPField('Project').Hide();
}else {SPUtility.GetSPField('Project').Show();}};HideOrShowOthersField();
$(customer.Dropdown).on('change',HideOrShowOthersField);});</script>
Your jQuery library is so old.
Below code works based on my testing.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/sites/Developer/SiteAssets/sputility.js"></script>
<script>
$(document).ready(function () {
var customer = SPUtility.GetSPField('Customer');
var HideOrShowOthersField = function () {
var customerValue = customer.GetValue();
if (customerValue == 'Customer W Project') {
SPUtility.GetSPField('Project').Hide();
}
else {
SPUtility.GetSPField('Project').Show();
}
};
HideOrShowOthersField();
$(customer.Dropdown).on('change', HideOrShowOthersField);
});
</script>
i'm trying to do something similar to some websites where you leave and it'll display a popup saying "Are you sure you want to leave this page" and with two options saying "Cancel" and "OK".
How would I do that and make it so when you click "Cancel" it'll just cancel the box and when they click "OK" it'll do a 'leaveChat();' function and leave the website?
I've tried using the onbeforeunload which was working but i'm not sure on the function part.
Thanks for the help!
There is no way to do that.
You can try sending the AJAX request in onunload, but I don't think that will work reliably.
To pop a message when the user is leaving the page to confirm leaving, you just do:
<script>
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
To call a function:
<script>
window.onbeforeunload = function(e) {
callSomeFunction();
return null;
};
</script>
here is my html
<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="myFunction()">
<h1 id="belong">
Welcome To My Home
</h1>
<p>
<a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
</p>
</body>
And so this is how I did something similar in javaScript
var myGlobalNameHolder ="";
function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
myGlobalNameHolder = myString;
if (myString != null) {
document.getElementById("replaceME").innerHTML =
"Hello " + myString + ". Welcome to my site";
document.getElementById("belong").innerHTML =
"A place you belong";
}
}
// create a function to pass our event too
function myFunction2(event) {
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}
I have a smiple select control bound to model that contains 2 values: id -the value i want to bind to selected index, and cities= array i want ooptions populated from.
here is the JS:
var VM=function ViewModel() {
self=this;
this.id = ko.observable(102);
this.cities=ko.observableArray([]);
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]);
} ;
}
var vm=new VM();
ko.applyBindings(vm);
I want cities to be populted after user clicked button, but the selected city must stay Moscow (because initialy the "id" was 102)
here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select data-bind="options:cities,optionsText:'Value',optionsValue:'Key',value:id"></select>
<button data-bind="click:getCities">get cities</button>
</body>
</html>
My problem is that selected index got lost after cities is loaded
Please help
Thanks
I figured out where my problem is:
the 'value' binding is two directional, so when firstly bound to select without options -the 'id' became -1.
When i cahnged to :
<select data-bind="options:cities,optionsText:'Value',optionsValue:'Key'"></select>
and added:
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]
);
$('select').val(self.id());
} ;
The things started to work,
but problem now is how to collect value if user chooses some city after select populated:
my solution is to attach select change to unobtrusive jquery handler:
var VM=function ViewModel() {
self=this;
this.id = ko.observable(102);
this.cities=ko.observableArray([]);
this.getCities=function(){
self.cities( [{"Key":"-1","Value":"choose city"},{"Key":"100","Value":"leningrad"}, {"Key":"102","Value":"moscow"}]
);
$('select').val(self.id());
} ;
};
var f=function(){
vm.id($('select').val())
}
var vm=new VM();
ko.applyBindings(vm);
$('select').change(f)
I hope it will help somebody who experienced my problem...