_spBodyOnLoadFunctionNames.push does not work when saving sharepoint site - javascript

I have created a method to validate input field in a share point site as you may see in the code below.
The issue is that the method should be activated on saved, but it does not.
For now it is activated on document ready and that is not what I want.
Any advice?
</script>
<script type="text/javascript">
$(document).ready(function(){
ValidateFields();
});
function ValidateFields()
{
if ((document.querySelector('input[name$="BooleanField"]').checked ==false)
&& ($("select[title='Employees selected values'] option").length==0))
{
// $("select[title='Employees selected values'] option").length==0).text("<p>
Please check All employees in department OR select employees </p>");
// // checked, so do something
alert ("Please check All employees in department OR select employees")
}
if ((document.querySelector('input[name$="BooleanField"]').checked ==true)
&& ($("select[title='Employees selected values'] option").length==1)) {
alert ("Please check All employees in department OR select employees23")
}
}
_spBodyOnLoadFunctionNames.push("ValidateFields()");

We can use PreSaveAction method to achieve it. The following code for your reference.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function PreSaveAction(){
if ((document.querySelector('input[name$="BooleanField"]').checked ==false)&& ($("select[title='Employees selected values'] option").length==0)){
// checked, so do something
alert ("Please check All employees in department OR select employees");
return false;
}
if ((document.querySelector('input[name$="BooleanField"]').checked ==true)&& ($("select[title='Employees selected values'] option").length==1)) {
alert ("Please check All employees in department OR select employees23");
return false;
}
return true;
}
</script>

You'll need to override the "Submit" handler of the form. Depending on the ID of your button, this might work:
$(document).ready(function() {
$("input[id$='SaveItem']").each(function() {
// get the button
var button = $(this);
// reference the existing handler for later use
var existingHandler = this.onclick;
// clear the existing handler
this.onclick = null;
// add your custom handler that validates first, then "submits" if successful
button.click(function() {
if(ValidateFields()){ // change ValidateFields to return true/false
existingHandler(); // validation passed, now call original handler
}
});
});
});

Related

How to call a function in javascript when a HTML Checkbox is checked without onclick or onchange

I want to call a function when checkbox value is true whether it is user input or retrieved from database. How to do it?
My Code
function IsSubGroupNeeded() {
var Subgrp = document.getElementById('myCheck').checked;
if (Subgrp === true) {
loadgrdSubgroupItem();
}
};
From where should I call IsSubGroupNeeded function?
Here you go. for checkbox data coming from database on document.ready will do that for you, but for user input in an already loaded page you must go with either click or change and then check if its currently checked. the if(this.checked) will do that.
$(document).ready(function(){
//on document load
if ($('input#mycheck').is(':checked')) {
//cal the function
}
});
// you have to do a check on when user input (click)
$("input#mycheck").change(function() {
if(this.checked) {
//call the function
}
});
});

Woocommerce radio button check on jquery

I have a custom shipping method on WooCommerce that should show a little box with information to user, only when that custom shipping method is chosen.
So far I have tried with this little code:
jQuery(document).ready(function($) {
$(document).on("change", "#shipping_method_0_my_shipping_method", function() {
if( $("#shipping_method_0_my_shipping_method").prop('checked') == true ){
$('.custom-box').show();
} else {
$('.custom-box').hide();
}
});
});
And it shows the .custom-box just fine when that custom shipping method is chosen. But it does not hide it for some reason, when I choose some other shipping method?
Also it does not show the box if my custom shipping method is chosen on page load, but if I click on some other shipping method, and then my custom shipping method, it will show the box fine.
Working now perfectly. Thanks for the working solution for Томица Кораћ at below!
Try this script:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$('#shipping_method input:radio').change(toggleCustomBox);
});
Let me know if this works for you.
Edit
I've updated the script. Please try this and let me know if it works:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$(document).on('change', '#shipping_method input:radio', toggleCustomBox);
});

How to validate a memorized value in an input box

I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});

SharePoint | Change Combo Box Options Depending on Same Combo Box Status

Can JavaScript manipulate the options of a combo box?
Idea is to When a status was changes to "B" after submitting the form and the other person change the status "A" should not be an option because it's a previous step.
Yes, You can write a javascript based on the option selected in combobox.
Let say if the status of a dropdown is "B", you can disable the dropdown, so that nobody can change the status.
<script>
$(document).ready(function()
{
var statusValue = $('select[title=DDStatus]').val();
if(statusVal == "B")
{
$("select[title$='DDStatus']").attr('disabled', 'disabled');
}
}
);
</script>
You can also do validation on other fileds based on the status column before you click on OK button.
you can use a PreSaveAction() function to do that.
function PreSaveAction()
{
var statusValue = $('select[title=DDStatus]').val();
if(statusVal == "B")
{Your code here with return false;}
else{return true; }
}
I hope it helps you.
Hi Guys here's my solution to this.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if($("#ID option:selected").val() == "Initial"){
$("#ID option[value='Initial']").attr("disabled", "disabled");
//to disable
$("#ID option[value='Invalid']").attr("disabled", false);
//to enable
}
});
</script>

SharePoint 2010 Change Require Field

I've added the following code to a SharePoint page - code finds the requested select based on title and alerts when "Decision" value is selected.
Looking to remove the alert and replace with code which finds a specific select (title$=test) and changes it to mandatory/required.
How do you so with SP2010?
<script type="text/javascript" src="/Deploy/jquery.min.js"></script>
<script type="text/javascript" src="/Deploy/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[title$='Based on']").change(function() {
var text = $("select[title$='Based on'] :selected").text();
if (text == "Decision") {
alert('you must provide reason for suspending this order');
}
});
});
</script>
Thanks!
If you are wanting to do validation on a form field it looks like your best bet is to hook into the PreSaveAction method as per this article by Giles Hamson. Inside of your change event you could do the following to mark your field as required:
$("select[title$='test']").attr('required','true');
Then, inside of your PreSaveAction method you could check if the dropdown is required and also if it has a value. Using that you could allow the save to continue or you could stop it and display a validation error.
function PreSaveAction()
{
var dropdown = $("select[title$='test']");
if(dropdown.attr('required') == 'true' && dropdown.val() == "")
{
alert("The field 'test' is required'");
return false;
}
return true;
}

Categories

Resources