Search code examples
javascripthtmljqueryformspopup

HTML form. How to enable button to close popup window after a valid dropdown selection is made


It should be really simple but I can't figure it out, so any help would be gratefully received.

I have a very simple pop-up with a form dropdown with some disabled options and some valid options.

    <select name="dates" id="dates">
      <option value=""> --- Please Select --- </option>
      <option value="1" disabled="">July 11th - 18th FULLY BOOKED</option>
      <option value="2" disabled="">July 19th - 26th FULLY BOOKED</option>
      <option value="3" disabled="">July 27th - 31st FULLY BOOKED</option>
      <option value="4" disabled="">August 1st - 8th FULLY BOOKED</option>
      <option value="5" disabled="">August 9th - 16th FULLY BOOKED</option>
      <option value="6" disabled="">August 17th - 24th FULLY BOOKED</option>
      <option value="7" disabled="">August 25th - 31st FULLY BOOKED</option>
      <option value="8" disabled="">September 1st - 8th FULLY BOOKED</option>
      <option value="9" disabled="">September 9th - 16th FULLY BOOKED</option>
      <option value="10" disabled="">September 17th - 24th FULLY BOOKED</option>
      <option value="11" disabled="">September 25th - 30th FULLY BOOKED</option>
      <option value="12">October 1st - 8th AVAILABLE</option>
      <option value="13">October 9th - 16th AVAILABLE</option>
      <option value="14">October 17th - 24th AVAILABLE</option>
      <option value="15">October 25 - 31st AVAILABLE</option>
      </select> 
<button type="button">Accept</button>

What I need to achieve is

  1. for the 'Accept' button to be disabled until a valid option is selected from the dropdown (values 12,13,14,15),

  2. once a valid selection is made and the button is enabled; to close the popup when the button is clicked.

No data is sent anywhere, I just need a user to make a selection and then close the popup.

TIA


Solution

  • I would do something like this: start with the disabled button and add an id to it, so it's easier to intercept.

    <button type="button" id="submit" disabled>Accept</button>
    

    Then the jquery part, you could listen to the select change, grab it's value, save it to a variable and enable the button if value is not empty

    var myValue = "";
    
    $("#dates").on("change", function(){
      myValue = $(this).val();
    
      if(myValue != ""){
        $("#submit").prop("disabled", false);
        console.log("you selected the option " + myValue);
      }else{
        // if for some reason the user selects the empty option, disable the button again
        $("#submit").prop("disabled", true);
      }
    });
    
    // here the button is enabled and your variable holds the selected value, so you can do something with it
    $("#submit").on("click", function(){
      alert("submitting selection " + myValue);
      // ... do what you need with the data
    });
    

    The menu will close automatically after you click outside of it, so no need to add code for that