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>
Related
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
}
});
});
});
I have form with an 'Employment Status' section. If the user selects 'Employed' from a drop-down list (#employment_status), then the following jQuery code shows an additional div section (which starts off hidden) with more fields for the user to fill out:
<script type="text/javascript">
var employ = jQuery('#employment_status');
var select = this.value;
employ.change(function() {
if ($(this).val() == 'Employed' ){
$('#employed').show(2000, 'easeOutExpo');
} else $('#employed').hide(2000, 'easeOutExpo');
});
</script>
This works if the user manually selects 'Employed'. However if the user selects 'Employed', submits the form, and there are validation errors which show up on the form (using in my case PHP which re-inserts all the values in the form and makes 'Employed' the 'selected' option in the dropdown), the 'Employed' section will come back closed. The only way to show the div section is to fiddle around with another value and choose 'Employed' again manually.
Is a solution to making the form come back with this div open if the 'selected' value is Employed.
try this
var employ = jQuery('#employment_status');
// check when form load
if ($('#employment_status').val() == 'Employed' )
{
$('#employed').show(2000, 'easeOutExpo');
}
else
{
$('#employed').hide(2000, 'easeOutExpo');
}
employ.change(function() {
if ($(this).val() == 'Employed' ){
$('#employed').show(2000, 'easeOutExpo');
} else $('#employed').hide(2000, 'easeOutExpo');
});
One possible solution is to trigger the change event manually after the handler is registered
var employ = jQuery('#employment_status');
var select = this.value;
employ.change(function () {
if ($(this).val() == 'Employed') {
$('#employed').show(2000, 'easeOutExpo');
} else {
$('#employed').hide(2000, 'easeOutExpo')
};
}).change(); //trigger the change event manuall to set the initial state
In order to see the form I am referring to please go to
http://www.pazzle.co.uk/index.php?main_page=product_info&cPath=6_1&products_id=3
just add that to cart, and press checkout.
That form you see, I am trying to disable the fields below the checkbox when it is checked (the shipping details only). How can I do this?
Sorry I can't copy the code directly as it is too big.
You need to edit the javascript on the page.
http://jsfiddle.net/CPjpt/5/
Flip the checkbox a couple times and you'll see it working
<script type="text/javascript">
$(document).ready(function(){
//Initalize
if($("#shippingAddress-checkbox").attr("checked") == "checked")
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
}
else
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");
}
//Setup action
$("#shippingAddress-checkbox").click(function(){
if($(this).attr("checked") == "checked")
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
}
else
{
$("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");
}
});
});
</script>
Basically when that checkbox is clicked set all of the input fields to have the disabled attribute equal to disabled. When the box is uncheck remote the disabled attribute.
this is my js fiddle link :
http://jsfiddle.net/m4tyC/
i have multiple select tags and i want to validate on submit if for example
at least if one of the size1 and color1 and Qty1 is selected in the first group and if one is selected i want to validate the others and in the same time if at least one group is selected the form can submit and if the user selected one option from the second group i do the same validation type for the second group of size2 , color2 , ...
i appreciate any help with that , i use jquery in my project
Try this (form will submit only when at least one row is completely selected)
$(function(){
$('#frm_productOrder').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex) items++;
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else alert('Please fill up the form correctly');
});
});
DEMO.
Here is some JQuery code. You can figure out how to submit the form on success by yourself:
$(document).ready(function(){
$("form").submit(function(event)
{
var is_valid = true;// for avoiding alerting in loop
event.preventDefault();
$(this).find("select").each(function(){ //usually default is the first
if(!$(this).attr("selected"))
{
$("#"+$(this).attr("id")).each(function()
{
if($(this).find("option:first").attr("selected"))
{
is_valid = false;
}
});
}
});
if( !is_valid )
alert("Please make sure all values are set for row!");
});
});
See this jsFiddle. There are some bugs too, but you can work that out.
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;
}