Develop Reference

JQuery - Require a Form Field if Visible

I'm using the Jquery code below for a webform in Power App Portals. The code hides the BIL Category drop-down field based on the choice selected in the Type of Funding Request drop-down field. This all works perfectly.
Now I simply want to require the BIL Category field if it is visible. How can I modify the code to achieve this?
$(document).ready(function () {
$("#cr92d_typeoffundingrequest").change(onDisplaySectionChange);
onDisplaySectionChange();
});
function onDisplaySectionChange() {
var varFunding = $('#cr92d_typeoffundingrequest').find("option:selected").text();
if (varFunding === "DWSRF")
{
$('#cr92d_bilcategory').parent().parent().hide();
}
else{$('#cr92d_bilcategory').parent().parent().show();
}
}

else
{
$('#cr92d_bilcategory').parent().parent().show();
$('#cr92d_bilcategory').prop('required', true);
$('#cr92d_bilcategory').closest(".control").prev().addClass("required");
}
Try this.

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);
});

SilverStripe: how do I make a field conditionally required (or the form unsubmittable)?

In SilverStripe (3.1.4) I'm doing a complex admin interface for one of my DataObject, where - depending on the DropDown's selected option - one or two TextFields get disabled or enabled for admin input. What I still need to do is to make the appropriate fields required when they get enabled.
I tried the following code which attempts to hook up to the Save button action:
(function ($) {
$.entwine('ss', function () {
$('#Form_ItemEditForm_action_doSave').entwine({
onclick: function (e) {
alert('submitting')
var selectedItem = $('#Form_ItemEditForm_Symbol option:selected').text();
if (selectedItem.indexOf('%1') > -1 && $.trim($('#Form_ItemEditForm_Placeholder1').val()) == '') {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
}
});
});
})(jQuery);
This does not seem to work - the form still submits, the alert never shows up.
Is there anything I'm missing?
I also tried to add:
Behaviour.register({
'#Form_ItemEditForm' : {
initialize : function() {
this.observeMethod('BeforeSave', this.beforeSave);
},
beforeSave: function() {
alert("You clicked save");
}
}
});
But ever since the form has not been loading at all.

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();
});

Move options between two multi-select fields

I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189
However I want to do it with multi-select fields since they provide scroll bars.
Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.
Something like this: http://www.kj4ohh.com/stuff/selectfields.png
How would I do this in javascript/jquery?
How would I return the contents of both select fields back to my flask application?
EDIT:
I had tried the following javascript:
function assign(form)
{
for(i=0;i<form.unassigned.length;i++) {
if (form.unassigned.options[i].selected == true) {
form.assigned.add(form.unassigned.options[i]);
form.unassigned.remove(i);
}
}
//unselect all items
form.assigned.selectedIndex = -1
}
function unassign(form)
{
for(i=0;i<form.assigned.length;i++) {
if (form.assigned.options[i].selected == true) {
form.unassigned.add(form.assigned.options[i]);
form.assigned.remove(i);
}
}
//unselect all items
form.unassigned.selectedIndex = -1
}
but with strange results:
With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.
If you select two items, only one is moved.
If you select more than two, one is moved, one stays put and the rest vanish.
However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.

You have to use jquery plugin for better result
http://loudev.com/

You may try this
​$(function(){
$('#toSel1, #toSel2').on('click', function(){
if($(this).attr('id')=='toSel2')
{
var l=$('#sel1 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel1 option:selected').each(function(){
$('#sel2').append($(this));
});
}
else
{
var l=$('#sel2 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel2 option:selected').each(function(){
$('#sel1').append($(this));
});
}
});
});​
DEMO.