根据下拉选项显示按钮

Question

I'm using setInterval in JS to get the selection of a drop down menu in a form. And based on the selection, I want to display 1 purchase button or another one.

My problem is the

Here is my JF

setInterval (function() {
    var auto_renew = $('#auto_renew').val();

    if (auto_renew == 1) {
        $'#subscription_purchase').css('display', 'none');
        $('#normal_purchase').css('display', 'none');
    } else {
        $'#subscription_purchase').css('display', 'none');
        $('#normal_purchase').css('display', 'inline');
    }
}, 0)

and here's my HTML

<div id="subscription_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick-subscriptions">
  <input type="hidden" name="a3" id="hiddentotal2" value="5.00">
  ......
  <input type="submit" name="submit" value="PURCHASE SUB" />

</div>

<div id="normal_purchase" style="display:none;">

  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="amount" id="hiddentotal2"  value="1">
  ...... 
  <input  type="submit" name="submit" value="PURCHASE NORM" />

</div>

There must be a smarter way to do this...

Answer 1

Here you go,

 $(document).ready(function(){ $('#auto_renew').on('change', function(){ var selected = $(this).val(); var subscriptionElm = $('#subscription_purchase'); var normalElm = $('#normal_purchase'); switch (selected) { case '1': subscriptionElm.show(); normalElm.hide(); break; case '0': subscriptionElm.hide(); normalElm.show(); break; default: subscriptionElm.hide(); normalElm.hide(); break; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="auto_renew"> <option value="-1"></option> <option value="1">Subscription Purchase</option> <option value="0">Normal Purchase</option> </select> <br/><br/> <div id="subscription_purchase" style="display:none;"> <input type="hidden" name="cmd" value="_xclick-subscriptions"> <input type="hidden" name="a3" id="hiddentotal2" value="5.00"> <input type="submit" name="submit" value="PURCHASE SUB" /> </div> <div id="normal_purchase" style="display:none;"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="amount" id="hiddentotal2" value="1"> <input type="submit" name="submit" value="PURCHASE NORM" /> </div>