How do I use jquery to change the style of a div if a dropdown and an input box have real values?

On this page I have a form: http://www.missionfamily.org/index.php?route=account/register

At the top there are two elements:
A selector "select.nomeassociazione" and a field "input.codiceassociazione"

The selector is basically turned off to start with "it shows a placeholder text "----seleziona---"

What I am trying to achieve but having difficulty with is:

If a user changes the value of the select dropdown to anything but the off value (mentioned above) AND ALSO inserts any value in the field below, THEN I need to change the style of the div#conditionalform - new values: opacity: 1; pointer-events: auto;

Of course I need the opposite check too. If anyone later on changes the select and input values to what they were at the start (select to off and input to empty) then I need to reset the div#conditionalform style to: opacity: 0.25; pointer-events: none;

thanks in advance
badwolfffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This should be fairly easy - just so I understand - where have you included the jQuery library on your page?

Once you have added that you can use the following script to do what you want
<script type="text/javascript">
$(function () {
  $('select.nomeassociazione, input.codiceassociazione').change(function() {
    doCheck();
  });
});
function doCheck()
{
  if ($('select.nomeassociazione').val() > 0 && $('input.codiceassociazione').val() != '') {
    $('#conditionalform').css({opacity: 1, pointerEvents: 'auto'});
  }
  else {
    $('#conditionalform').css({opacity: 0.25, pointerEvents: 'none'});
  }
}
</script>

Open in new window

The above assumes
a) You remove the onchange from the select
b) You move the $.ajax call to where it needs to be - currently it does not appear to be working due to the missing jQuery library

Sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.