Как вызвать эффект слайдера Jquery, только когда выбран определенный параметр и нажата кнопка?

Question

У меня есть простая форма с выпадающим списком, полем ввода почтового индекса и кнопкой. Я хочу, чтобы созданный мною эффект слайда Jquery выполнялся только в том случае, если 1. выбран конкретный объект, 2. при вводе почтового индекса и 3. при нажатии кнопки для отправки. Кнопка работает только после того, как я выполню другой JS на странице, и я не могу заставить оператор if работать правильно. Пожалуйста, помогите.

Эти эффекты работают правильно и делают то, что я хочу. Мне просто нужно, чтобы они срабатывали при соблюдении вышеуказанных критериев:

$( "#slide-2" ).show("slide", {direction: "right"}, 500);
$( "#slide-1" ).hide("slide", {direction: "left"}, 500);

<form class="product-form">
    <select id="product-dropdown">
<option value="">Select a Product</option>
      <option value="auto" selected>Auto Insurance</option>
<option value="autoresidence" id="bundled-selected">Auto + Residence (save more!)</option>
      <option value="home">Home Insurance</option>
      <option value="home-condo">Condo Insurance</option>
      <option value="renters">Renters Insurance</option>
    </select>

    <input type="text" class="quote-zip" id="gaq-zip-code" name="gaqZipCode" placeholder="Enter Zip Code" maxlength="5">

      <button href="#" id="submit-gaq" class="quote-submit">Get a Quote</button>
</form>
 <script type="text/javascript">
   $( ".quote-submit" ).click(function() {
   $( "#slide-2" ).show("slide", {direction: "right"}, 500);
   $( "#slide-1" ).hide("slide", {direction: "left"}, 500);
    });
    </script>

Answer 1

Следуя вашим требованиям, также добавлена ​​возможность отключения кнопки. Вы не хотите, чтобы люди задавались вопросом, почему форма не отправляется, хотя это должно быть очевидно.

if ($('#gaq-zip-code').val().length == 0 && ($("#product-dropdown").val() == "Home Insurance")) {
   $('submit-gaq').removeAttr('disabled');
   $( ".quote-submit" ).click(function() {
   $( "#slide-2" ).show("slide", {direction: "right"}, 500);
   $( "#slide-1" ).hide("slide", {direction: "left"}, 500);
    });
}
else{
$('submit-gaq').attr('disabled','disabled'); 
}

Answer 2

Я бы рекомендовал следовать шаблону, который у вас уже есть, чтобы инициировать наименьшее количество событий - при нажатии кнопки проверьте другие критерии.

$(".quote-submit").click(function () {
    if ($("#product-dropdown").val() == "Specific Text" && $("gaq-zip-code").val().length == 5) {
        $("#slide-2").show("slide", { direction: "right" }, 500);
        $("#slide-1").hide("slide", { direction: "left" }, 500);
    }
});