在下拉菜单中取消激活所选值的“提交”按钮

Question

I searched the forum and came across that thread but it didn't work for me. If there's something I missed please point me to it.

I have a dropdown in one of my websites and I'd like to deactivate the 'Submit' button when it shows the default selected value because people just click on 'Submit' and end up in 404 page.

I am a sucker for Javascript, so if someone could help would be really great.

Here's my HTML:

<div class="optin_box">
    <h3 style="color:#fff !important;">Box Title</h3>
       <p class="optin_text">Select your city:</p>
           <form name="redirect">
           <select name="selection">
          <option>My city</option>
          <optgroup label="Area 1">
          <option value="http://domain.com">City 1</option>
          <option value="http://domain2.com">City 2</option>
          <option value="http://domain3.com">City 3</option>
          </optgroup>
          <optgroup label="Area 2">
          <option value="domain4.com">City 4</option>
          <option value="domain5.com">City 5</option>
          </optgroup>                  
        </select>
        <br/>       
        <input class="button_link hover_fade red button_widget" style="font-size:14px;" type=button value="SUBMIT" onClick="WinOpen();">
        </form>
</div>

And here's some javascript I have:

<script language="JavaScript">
function WinOpen() {
  var url=document.redirect.selection.value
  document.location.href=url
}
</script>

So what I am trying to achieve is that when someone sees 'My city' in the dropdown the 'SUBMIT' button should be deactivated.

Thanks in advance for any help. Kat

Answer 1

Here's a bit of script that will do what you want, using the existing jQuery library that's already included in your page. Just include this script and it will disable the button initially and then handle the select change afterwards.

(function($) {
    $(function() {
        $("select[name=selection]").on("change", function() {
            $(this).closest("form")
                .find("input.button_link")
                .prop("disabled", $(this).val() == "#");
        })
            .trigger("change");
    });
})(jQuery);

Note: This assumes that you added the value # to the initial option in the select, as you mentioned you had done previously.