You are viewing limited content. For full access, please sign in.

Question

Question

JavaScript to clear drop down choice upon loading

asked on July 15, 2020

I need to clear the input in a dropdown pick list upon loading a form, every time.  The following JavaScript works if the field is a radio button choice, but this time I'm trying to do it for a drop down pick list. 

What would have to change in order for this to work for a drop-down field?  I'm guessing "checkbox" changes to "drop-down", but what would 'checked' be changed to.

//clears the checkbox for Assign Tasks? upon reload//
$(document).ready(function() {
 $('.alwaysclear input[type="checkbox"]').prop('checked', false);
});

0 0

Answer

SELECTED ANSWER
replied on July 15, 2020

Assuming that you give it the same class, you should be able to do it by adding this below the checkbox clear:

$('.alwaysclear select').val('');

2 0
replied on July 16, 2020 Show version history

I like where you're going with this Pieter!  First try didn't work.  Maybe I didn't place it exactly right?  

//clears the target control box upon reload//
$(document).ready(function() {
 $('.alwaysclear input[type="checkbox"]').prop('checked', false);
 $('.alwaysclear select').val('');
});

 

And thanks!!

0 0
replied on July 16, 2020

I just tested and it's working for me. To be sure, it is a drop-down list you wish to clear out, right? Two thoughts for general troubleshooting of JS like this:

  1. If there are a lot of elements on the form or otherwise it takes a couple seconds to load, it's possible the JS fired off before that element even loaded. In that case, you would need to wait to run the functions to clear things using something like a setTimeout function.
  2. If the JS has a syntax anywhere it will just not work (shouldn't be the case here; I copied and pasted to make sure it was working.) Use F12 to open the admin console in your browser; it will alert you if there are problems with the JS.
1 0
replied on July 16, 2020

This form isn't terribly big.  I do have a lot of hidden fields and a lot of look-ups taking user input and filling fields, including hidden fields so that the format can be used for directing user tasks properly.  

The field I want cleared is a field that is used to direct which branch the form process goes to next.  That is why I want it cleared upon every new user task being opened.

Oh!  Got it!  I removed all of the other JavaScript and tried again and it worked!  Then put back in a piece and it STOPPED working again.

This JavaScript is targetting a different control box, a radio button that again directs the process to different branches but at a later stage in the process.  Any ideas why it would stop the other one from working?

//This is for the 2nd Approver Comments box to become Required
$(document).ready(function () {
    $('.ckboxifRequired input').change(function () {
        if ($(this).is('No, Send Back to Assistant':checked')) {
            $('.ckboxRequired label').append('<span class="cf-required">*</span>');
            $('.ckboxRequired textarea').attr('required', 'True');
            //alert('if');

        } else {
            $('.ckboxRequired span.cf-required').remove();
            $('.ckboxRequired textarea').removeClass('required').removeAttr('required');  
        }
    })
});

0 0
replied on July 16, 2020

I see two syntax errors in that block, so my guess is that this is like point 2 above, which is that if there's a problem anywhere in the JS, it can cause some or all the rest to stop working.

In this case, there's a problem with single quotes in your IF statement. Specifically, your choice is contained in quotes and then :checked ends with an additional one. So that's causing problems.

Additionally, the whole .change function needs a semicolon at the end.

1 0
replied on July 16, 2020

So, the corrected script would look like this?

$(document).ready(function () {
    $('.ckboxifRequired input').change(function () {
        if ($(this).is('No, Send Back to Assistant':checked)) {
            $('.ckboxRequired label').append('<span class="cf-required">*</span>');
            $('.ckboxRequired textarea').attr('required', 'True');
            //alert('if');

        } else {
            $('.ckboxRequired span.cf-required').remove();
            $('.ckboxRequired textarea').removeClass('required').removeAttr('required');  
        }
    });
});

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.