Lately I have been slowly teaching myself how to write jQuery scripts by hand, and its usefulness has come up at work, were I’ve been asked to find solutions to problems and idea’s. Sometimes I try to find some examples on the web related to what I am trying to come up with, however I don’t always find the exact solution, and sometimes I find posts by people who are looking for the same solution as me, but without an answer. So I thought why not share what I have comeup with so far, maybe someone will one day need to do the same thing, or relatively the same thing and giving them a head start would be the nice thing to do.
The first case I have goes as follows, there’s a page with more then one Select dropdown, but a user is only allowed to choose one of these dropdowns options, so on the fly I needed to be able to disable all the other dropdowns on the page. The solution below worked flawlessly after I wrote it and tested it.
$(document).ready(function(){
// Dropdown Change causes other dropdowns to disable
$('select').change(function(){
if ($(this).val() == 'Default Value') {
$('select').not($(this)).removeAttr('disabled'); // Enables all other selects because value is default
} else {
$('select').not($(this)).attr("disabled","disabled"); // Disables all other selects because value isn't default
}
});
});
The next case I have is that an asp.net form in a cms known as Kentico outputs user info, to which the columns and form are shared between three types of these users, so I was asked to hide the empty fields which were displayed without an input box, this made it a bit trickier. The real tricky part in the jQuery was finding those empty spans, then hiding their parents parent (span inside a td inside a tr) on the fly.
$(document).ready(function(){
$('#header-summary span').each(function(index, element){
if ($(this).is(':empty')) {
$(this).closest('tr').hide();
}
});
});
The last case is the longest and most time consuming, someone had the great idea of having a select drop down that allowed the user to choose a method of delivery for a product manual, the choices were Email PDF and physical mailed copy, but not both. Were this got tricky is, the email pdf option needed to display an input for their email address, and the physical copy needed inputs for the users address. So the idea was that if they selected Email PDF in the drop down an input for email would show up, however if they changed that drop down to physical mail copy, the email pdf input would disappear and the address form’s inputs would appear. Were it really got tricky was that someone had the idea to have the submit button disabled until the user filled out the necessary fields based on what their choice was, which because these inputs shared the same form a general validation plugin wouldn’t do the trick. I came up with a solution, to which just by having these inputs separated by divs I could check the necessary ones based on the select option that was chosen, and enable the submit button only when the user filled out the necessary fields, or disable when they haven’t. This was by far the trickiest of the jQuery scripts I had to write this week, and the most time consuming (since those two things kinda go hand and hand).
$(document).ready(function(){
$('#mailing-address').hide(); // Hide the mailing address form
$('#submit-button input[type=submit]').attr("disabled","disabled"); // Disable the Proceed Button
// Dropdown Select Show/Hide Forms
$('#delivery-method-dropdown select').change(function(){
if ($(this).val() == 'Email') {
$('#submit-button input[type=submit]').attr("disabled","disabled"); // Disable the Proceed Button
// clear the mailing address form
$('#mailing-address input[type=text]').each(function(index, element){
$(this).val('');
});
$('#mailing-address').hide(); // hide the mailing address form
$('#email-address').show(); // show the email address form
}
else {
$('#submit-button input[type=submit]').attr("disabled","disabled"); // Disable the Proceed Button
// clear the email address form
$('#email-address input[type=text]').each(function(index, element){
$(this).val('');
});
$('#email-address').hide(); // hide the email address form
$('#mailing-address').show(); // show the mailing address form
}
});
// check the email form to see if the user has filled it out and if so enable the Proceed button
jQuery.fn.checkAllEmail = function() {
$('#email-address input[type=text]').each(function(index, element) {
if ($(this).val() == '') {
$('#submit-button input[type=submit]').attr("disabled","disabled"); // disable the Proceed button
return false;
} else {
$('#submit-button input[type=submit]').removeAttr('disabled'); // enable the Proceed button
}
});
}
// check the mailing form to see if the user has filled it out and if so enable the Proceed button
jQuery.fn.checkAllMail = function() {
$('#mailing-address input[type=text]').not('#address-2 input[type=text]').each(function(index, element) {
if ($(this).val() == '') {
$('#submit-button input[type=submit]').attr("disabled","disabled"); // disable the Proceed button
return false;
} else {
$('#submit-button input[type=submit]').removeAttr('disabled'); // enable the Proceed button
}
});
}
// Run the function to check the Email Form
$('#email-address input[type=text]').bind('mouseenter mouseleave focus blur keypress', function() {
$(this).checkAllEmail();
});
// Run the function to check the Mailing Form
$('#mailing-address input[type=text]').bind('mouseenter mouseleave focus blur keypress', function() {
$(this).checkAllMail();
});
});
During my search for solutions I came a crossed a post where somebody was trying to achieve a part of what I was, and they were pretty close to doing so. After I got the solution to work, I of course posted back so that in the future anyone who goes looking for the same sort of solution will find what I used that worked. On the jQuery forums – Enable/Disable submit depending on filled out form