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
for the ‘Accept’ button to be disabled until a valid option is selected from the dropdown (values 12,13,14,15),
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
Advertisement
Answer
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