仅在SELECT字段不为空时显示“提交”按钮

Posted 2023-05-09

【中文标题】仅在SELECT字段不为空时显示“提交”按钮

【英文标题】：Show submit button only when select fields are not empty

【发布时间】：2019-06-04 21:09:49

【问题描述】：

我无法仅在表单中显示选择字段的提交按钮。我有下拉菜单，因为表单和按钮都具有相同的类名，所以它显示并隐藏了所有这些，而不仅仅是该表单中的提交按钮。

我已经尝试过 .closest 和 .siblings 以及 .this ，但没有任何效果。我做错了什么？

这是我的 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"); 

我只想以这种形式显示按钮。我怎样才能做到这一点？

【问题讨论】：

你的 HTML 是什么样的？

我刚刚添加了它。它来自一个插件，我只是想隐藏按钮，直到用户在选择输入中选择选项。

【参考方案1】：

...它显示和隐藏所有这些，而不仅仅是该表单中的提交按钮。

使用:submit selector 定位提交按钮。

$(".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>

【讨论】：

已在上面编辑。我们引用了错误的class，这个编辑应该可以解决。

这适用于显示和隐藏提交按钮，但它仍然显示所有提交按钮。我有多个具有相同类的表单，我将如何使它只显示该表单中的按钮而不是所有表单？

@DerekBuckingham 你为什么不更新你的代码并添加另一个表单来显示它是如何不工作的？当您看不到相关元素时，很难确定选择器需要应用的位置。

如果所有按钮/字段容器都具有相同的类wspsc_add_cart_submit，那么提交按钮应该就在表单内部，对吧？如果您可以在 HTML 结构中添加更多详细信息，将会很有帮助。

它来自一个 WP 插件，这几乎就是整个表单本身的 HTML 明智。如果你想看看我指的是什么，你可以去motorgremlin.com/products看看我在做什么。出于某种原因，表格没有必填字段的选项，我只是想确保人们在购买之前填写我需要的区域。

【参考方案2】：

您的选择器似乎与提交按钮不匹配。试试这个吧。

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

【讨论】：

这可以显示和隐藏按钮，但它仍然显示所有表单的提交按钮，而不仅仅是它们填写字段的表单。我有多个具有相同类的表单和一旦我选中了选定的框，它只会显示所有按钮。