Using Jquery to Disable Submit Button if an option is selected

Question

I have a simple form with four select fields. If YES is selected on any form field, the submit button needs to be disabled and a hidden div should appear. Here's an example of my markup:

<form>
I have read the information on the product(s)<select name="field4"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Do you have any allergies to any ingredients in product(s)?
 <select name="field5"><option value="Yes">Yes</option> <option value="No">No</option> </select>

Are you pregnant?
 <select name="field6"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Have you ever used this type of product and had undesirable results?
 <select name="field7"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

<input name="cmdSubmit" type="submit" value="Submit" />
</form>


<div style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Thanks for your help on this one. I am a jquery novice trying my best to learn.

What have you tried so far? I recommend to give all selectboxes a specific class so the selection will be easier. — Mark Baijens
– Mark Baijens, Commented Dec 1, 2010 at 16:46

Mike Grace · Accepted Answer · 2010-12-01 17:43:08Z

5

I don't completely understand the business logic of the way you have the form built and your requirements but... going based on what you have said here is what I would do.

write function to check all options, change disable/enable submit, show/hide div
call function on load
call function to check all options every time an option value changes

.

checkOptions();
$("select").change(checkOptions);

function checkOptions() {
  var yesFound = false;
  $("select").each(function(index, element) {
    if ( $(element).val() == "Yes" ) {
      yesFound = true;
    }
  });

  if (yesFound) {
    $("#hidden-div").show();
    $("input[type=Submit]").attr("disabled","disabled");
  } else {
    $("#hidden-div").hide();
    $("input[type=Submit]").removeAttr("disabled");
  };
}

with slightly modified HTML:

<form>
  <select name="field4"> 
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> I have read the information on the product(s)<br/>
  <select name="field5">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Do you have any allergies to any ingredients in product(s)?<br/>
  <select name="field6">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Are you pregnant?<br/>
  <select name="field7">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Have you ever used this type of product and had undesirable results?<br/>
  <br/>
  <input name="cmdSubmit" type="submit" value="Submit" />
</form>
<div id="hidden-div" style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Example webpage:

http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-disable-submit-dynamically.html

On load:

alt text

all options 'No' but one:

alt text

all options 'Yes':

alt text

answered Dec 1, 2010 at 17:43

Mike Grace

17k8 gold badges64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Hedges Over a year ago

yours are some of the most thorough answers I've seen on SO. It's like you're doing people's work for them! :-)

Mike Grace Over a year ago

@Andrew, haha! Thanks! I try to answer questions with a working example because sometimes seeing whole working code can make all the difference.

buddhabrot · Accepted Answer · 2010-12-01 16:56:44Z

1

Give all your selects (dropdowns) a class "foo". Give the options that are "Yes" a class "yes". $("select.foo option.yes:selected").empty() means "None of the dropdown options marked "yes" are selected"

So

$("select.foo").change(function() {
   if(!$("select.foo option.yes:selected").empty()) {
      /* Do something here, maybe use BlockUI JS library */
   }
});

edited Dec 1, 2010 at 16:56

answered Dec 1, 2010 at 16:48

buddhabrot

1,58610 silver badges14 bronze badges

4 Comments

buddhabrot Over a year ago

Naturally you may want to figure out a better name than "foo" :)

charliegriefer Over a year ago

As per buddhabrot's answer above, "Give the options that are "Yes" a class "yes"."

Josiah Ruddell Over a year ago

This is a dropdown not checkboxes

buddhabrot Over a year ago

Note that using a class for the options means you are not bound to the term "Yes", which may be translated into a different language. I would advise against using text like that as some of the other answers do.

Josiah Ruddell · Accepted Answer · 2010-12-01 16:50:34Z

0

var selects = $('select').change(function(){ //on change of any select
    var hasYes = false;
    selects.each(function(){ // check all selects
        if($(this).val() == 'Yes') //for 'Yes'
            hasYes = true;
    });
    if(hasYes){ // show div disable submit
       $('input:submit').attr('disabled','disabled');
       $('div.hidden').show();
    }
    else{
        $('input:submit').removeAttr('disabled');
       $('div.hidden').hide(); // add class hidden to the div
    }
});

answered Dec 1, 2010 at 16:50

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

Comments

Benny · Accepted Answer · 2010-12-01 17:09:54Z

0

You could set the class attribute on both your selects to something like "choices" like this:

<select name="field5" class="choices"...

<select name="field6" class="choices"...

and do something like this:

$(function() {
  $(".choices").change(function() {
    var anyYeses = false;
    $(".choices").each(function() {
      if($(this).val() == "Yes") {
        anyYeses = true;
      }
    });
    if(anyYeses) {
      $("input[name=cmdSubmit]").attr('disabled', 'disabled'); //disables
    }
    else {
      $("input[name=cmdSubmit]").removeAttr('disabled'); //enables
    }
  });
});

edited Dec 1, 2010 at 17:09

answered Dec 1, 2010 at 16:52

Benny

3,9378 gold badges49 silver badges82 bronze badges

4 Comments

Josiah Ruddell Over a year ago

This only works for one dropdown at a time. And what if they go back to no?

Benny Over a year ago

@Josiah Ruddell, this will work for all of them if you update the class attribute on all select elements. Please see my updates.

Josiah Ruddell Over a year ago

But only one at a time. what if they select yes in one dropdown, then yes in another dropdown, then no in the first dropdown. They still have 1 dropdown with yes but the button will be reenabled.

Benny Over a year ago

@Josiah Ruddell, try that change out.

Collectives™ on Stack Overflow

Using Jquery to Disable Submit Button if an option is selected

4 Answers 4

Example webpage:

2 Comments

4 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Example webpage:

2 Comments

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related