CODEWITHSUNDEEP
jqueryformsbuttonsubmit
Derek Buckingham
Derek Buckingham

Reputation: 11

Show submit button only when select fields are not empty

I am having trouble only showing the submit button in the form with the select field that is selected. I have drop-downs and since the forms and buttons all have the same class names it shows and hides all of them instead of just the submit button in that form.

I have tried .closest and .siblings as well as .this and nothing is working. What am I doing wrong?

Here is my HTML

<div class="wp_cart_button_wrapper">
<form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
<input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
<div class="wp_cart_variation_section">
<span class="wp_cart_variation_name">Logo Color  : </span>
<select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);"><option value=" "> </option><option value=" Black "> Black </option><option value=" Green "> Green </option><option value=" Red "> Red </option><option value=" Blue"> Blue</option></select><br></div>
<input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;"> 
<input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
<input type="hidden" name="price" value="69.99" style="display: none;">
<input type="hidden" name="shipping" value="0.001" style="display: none;">
<input type="hidden" name="addcart" value="1" style="display: none;"> 
<input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;"><input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
<input type="hidden" name="item_number" value="" style="display: none;">
<input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
<input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
</form>
</div>

jQuery

$(".wp_cart_variation_section select").on('change', function() {
        var x = this.selectedIndex;
        if (x == "") {
           $(".productButton, .wp_cart_button_wrapper input").hide();
        } else {
           $(".productButton, .wp_cart_button_wrapper input").show();
        }
    });
$(".productButton, .wp_cart_button_wrapper 
input").css("display","none");

I am wanting to only show the button in that form only. How can I accomplish this?

Upvotes: 0

Views: 712

Answers (2)

H77
H77

Reputation: 5967

Your selector doesn't appear to match the submit button. Try this instead.

var x = this.selectedIndex;
$(this).closest(".wp-cart-button-form").find(".wspsc_add_cart_submit").toggle(x && x > 0);

Upvotes: 0

Yom T.
Yom T.

Reputation: 9180

...it shows and hides all of them instead of just the submit button in that form.

Use :submit selector to target the submit button.

$(".wp_cart_variation_section select").change(function () {
  var state = this.selectedIndex > 0;

  $(".productButton:submit, .wspsc_add_cart_submit").toggle(state);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp_cart_button_wrapper">
  <form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
    <input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
    
    <div class="wp_cart_variation_section">
      <span class="wp_cart_variation_name">Logo Color  : </span>
      <select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);">
        <option value=" "> </option>
        <option value=" Black "> Black </option>
        <option value=" Green "> Green </option>
        <option value=" Red "> Red </option>
        <option value=" Blue"> Blue</option>
      </select>
      <br>
    </div>
    
    <input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;">
    <input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
    <input type="hidden" name="price" value="69.99" style="display: none;">
    <input type="hidden" name="shipping" value="0.001" style="display: none;">
    <input type="hidden" name="addcart" value="1" style="display: none;">
    <input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;">
    <input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
    <input type="hidden" name="item_number" value="" style="display: none;">
    <input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
    <input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
  </form>
</div>

Upvotes: 1

Related Questions