Показывать кнопку отправки только когда выбранные поля не пусты - PullRequest
Новая
       20

Показывать кнопку отправки только когда выбранные поля не пусты

0 голосов
/ 10 января 2019

У меня проблемы с отображением только кнопки отправки в форме с выбранным полем выбора. У меня есть раскрывающиеся списки, и так как формы и кнопки имеют одинаковые имена классов, они отображаются и скрывают их все, а не просто кнопку отправки в этой форме.

Я пробовал .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");

Я хочу показать кнопку только в этой форме. Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Ваш селектор не соответствует кнопке отправки. Попробуйте вместо этого. 

var x = this.selectedIndex;
$(this).closest(".wp-cart-button-form").find(".wspsc_add_cart_submit").toggle(x && x > 0);
0 голосов
/ 10 января 2019

... он показывает и скрывает их все, а не просто кнопку отправки в этой форме.

Используйте :submit селектор для выбора кнопки отправки. 

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