Hide or Show button based on two select values-CodePudding

I have a WordPress plugin that allows me to sell tickets on a website, the html looks like:

<form target="_blank" action="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post" >
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="path" value="paypal">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="item_name" value="My Event Name">
    <input type="hidden" name="custom" value="20681">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="notify_url" value="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
    <input type="hidden" name="lc" value="EN_US">
    <input type="hidden" name="bn" value="WPPlugin_SP">
    <input type="hidden" name="return" value="https://myurl.com/thankyou">
    <input type="hidden" name="cancel_return" value="https://myurl.com/tickets">
    <input type="hidden" name="upload" value="1">

    <table  style="width: 100% !important;">
        <tbody>
            <tr>
                <td >
                    <select name="wpeevent_button_qty_a">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td >Meal Ticket</td>
                <td >31.50 USD</td>
                <td >Meal Ticket<input type="hidden" name="item_name_1" value="Meal Ticket"><input type="hidden" name="id_1" value="2201"><input type="hidden" name="amount_1" value="31.50"></td>
            </tr>
            <tr>
                <td>
                    <select name="wpeevent_button_qty_b">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td>Dance Ticket</td>
                <td>35.50 USD</td>
                <td>Dance Ticket<input type="hidden" name="item_name_2" value="Dance Ticket"><input type="hidden" name="id_2" value="2202"><input type="hidden" name="amount_2" value="35.50"></td>
            </tr>
        </tbody>
    </table>
    <input  type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal Button">
</form>

The plugin takes the sum of wpeevent_button_qty_a and wpeevent_button_qty_b then passes it to the next page so the user can pay.

The problem I am running into is when both values are 0, the plugin throws an error I'm thinking because PayPal can't charge for a 0 value (just guessing - it could also be the way the plugin is handling the values). By default, the select shows 0 as the chosen value, so if a user isn't paying attention, it's really easy to submit both of these selects as 0 and get the error.

Since this is a plugin, I can't modify the actual plugin to break gracefully when this happens. So, I found some JS that allows me to show or hide the Buy Now button if both values are 0.

By default, the button is hidden, if the quantity is less than 1 I hide the button, for everything else it is supposed to show the button...here is my code:

$('.wpeevent_paypalbuttonimage').hide();

let select = document.querySelector('.tickets');
select.addEventListener('change', function() {
    var qty_a = $('.wpeevent_button_qty_a').val();
    var qty_b = $('.wpeevent_button_qty_b').val();

    if (qty_a > 1 && qty_b > 1) {
        $('.wpeevent_paypalbuttonimage').hide();
    } else {
        $('.wpeevent_paypalbuttonimage').show();
    }
});

Right now, the button is hidden and when I choose an option of 1 or more then the button shows, however if I go back and choose 0 for both select boxes the button doesn't hide. I'm sure this is something simple and I'm just overlooking something, but it seems regardless of how I write my code the behavior remains the same.

Originally, my code was:

    $(function() {
        $('.wpeevent_paypalbuttonimage').hide();
        $('select[name^="wpeevent_button_qty_"]').change(function() {
            var qty_a = $('.wpeevent_button_qty_a').val();
            var qty_b = $('.wpeevent_button_qty_b').val();
            
            if (qty_a > 1 && qty_b > 1) {
                $('.wpeevent_paypalbuttonimage').hide();
            } else {
                $('.wpeevent_paypalbuttonimage').show();
            }
        });
    });

Which functions the exact same way. I thought I had to have an addEventListener so it would work and found this: https://www.javascripttutorial.net/javascript-dom/javascript-change-event/, but after tweaking it, my code still works the same way.

Does anyone know how this should be written to function the way I'm thinking it should?

Thanks,
Josh

CodePudding user response：

You had some minor errors which I fixed. Most notably the selector for the selects wasn't matching so the values were undefined.

$('.wpeevent_paypalbuttonimage').hide();

let form = document.querySelector('.tickets');
form.addEventListener('change', function() {
  var qty_a = $('[name=wpeevent_button_qty_a]').val();
  var qty_b = $('[name=wpeevent_button_qty_b]').val();

  if (qty_a == 0 && qty_b == 0) {
    $('.wpeevent_paypalbuttonimage').hide();
  } else {
    $('.wpeevent_paypalbuttonimage').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form target="_blank" action="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post" >
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="path" value="paypal">
  <input type="hidden" name="business" value="[email protected]">
  <input type="hidden" name="item_name" value="My Event Name">
  <input type="hidden" name="custom" value="20681">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="no_note" value="1">
  <input type="hidden" name="no_shipping" value="1">
  <input type="hidden" name="notify_url" value="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
  <input type="hidden" name="lc" value="EN_US">
  <input type="hidden" name="bn" value="WPPlugin_SP">
  <input type="hidden" name="return" value="https://myurl.com/thankyou">
  <input type="hidden" name="cancel_return" value="https://myurl.com/tickets">
  <input type="hidden" name="upload" value="1">

  <table  style="width: 100% !important;">
    <tbody>
      <tr>
        <td >
          <select name="wpeevent_button_qty_a">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </td>
        <td >Meal Ticket</td>
        <td >31.50 USD</td>
        <td >Meal Ticket<input type="hidden" name="item_name_1" value="Meal Ticket"><input type="hidden" name="id_1" value="2201"><input type="hidden" name="amount_1" value="31.50"></td>
      </tr>
      <tr>
        <td>
          <select name="wpeevent_button_qty_b">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </td>
        <td>Dance Ticket</td>
        <td>35.50 USD</td>
        <td>Dance Ticket<input type="hidden" name="item_name_2" value="Dance Ticket"><input type="hidden" name="id_2" value="2202"><input type="hidden" name="amount_2" value="35.50"></td>
      </tr>
    </tbody>
  </table>
  <input  type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal Button">
</form>