试图在表单中只添加一个条件逻辑规则?

Trying to add just one conditional logic rule in a form?

我有这个表单,我正在尝试向其中添加条件逻辑。我在网上找到了这样做的教程,但我的 js 仍然不够强大。你介意看看我哪里搞砸了吗?我确实设法隐藏了字段。但这更像是 css 的事情。我曾经遵循的教程was this one.

$(document).ready(function() {
  var wings = false;
  //Inputs that determine what fields to show
  var wings50 = $('#live_form input:checkbox[name=wings50]');
  var wings25 = $('#live_form input:checkbox[name=wings25]');

  //Wrappers for all fields
  var div_wings50_parent = $('#live_form #div_wings50');
  var div_wings25_parent = $('#live_form #div_wings25');
  var all = bad.add(div_wings50_parent).add(div_wings25_parent);

  wings50.change(function() {
    var value = this.value;
    all.addClass('hidden'); //hide everything and reveal as needed

    if (value == '50OFAKIND') {
      div_wings50_parent.removeClass('hidden');
    } else if (value == '25OFAKIND') {
      div_wings25_parent.removeClass('hidden');
    }

  });
});
.hidden {
  display: none;
}
<!-- Start Formoid form-->
<link rel="stylesheet" href="gramdslam_files/formoid1/formoid-flat-yellow.css" type="text/css" />
<link rel="stylesheet" href="gramdslam_files/formoid1/bootstrap-iso.css" type="text/css" />
<script type="text/javascript" src="gramdslam_files/formoid1/jquery.min.js"></script>
<script type="text/javascript" src="gramdslam_files/formoid1/conditional.js"></script>
<form class="formoid-flat-yellow" id="#live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">
  <div class="title">
    <h2>GRAND SLAM</h2>
  </div>
  <div class="element-select" title="Define what pizza options you want. "><label class="title">PIZZA OPTIONS<span class="required">*</span></label>
    <div class="large"><span><select name="select" required="required">

  <option value="2 Cheese">2 Cheese</option>
  <option value="2 Pepporoni">2 Pepporoni</option>
  <option value="1 Cheese & 1 Peporoni">1 Cheese & 1 Peporoni</option></select><i></i></span></div>
  </div>


  <div class="element-select" title="Select how you will be ordering your wings."><label class="title">SELECT WING OPTION<span class="required">*</span></label>
    <div class="large"><span><select name="select1" required="required">
    <option value="Select">Please Select</option>
  <option value="50OFAKIND">50 OF A KIND</option>
  <option value="25OFAKIND">SPLIT 25/25 OF A KIND</option></select><i></i></span></div>
  </div>

  <div class="element-select hidden" title="Select 1 the following."><label class="title">SELECT ONE<span class="required">*</span></label>
    <div class="large"><span><select name="select2" required="required">
  <option value="50 Plain">50 Plain</option>
  <option value="50 Buffalo">50 Buffalo</option>
  <option value="50 BBQ">50 BBQ</option></select><i></i></span></div>
  </div>

  <div class="element-multiple hidden" title="Select 1 the following."><label class="title">SELECT TWO<span class="required">*</span></label>
    <div class="large"><select data-no-selected="Nothing selected" name="multiple[]" multiple="multiple" required="required">
  <option value="25 Plain">25 Plain</option>
  <option value="25 Buffalo">25 Buffalo</option>
  <option value="25 BBQ">25 BBQ</option></select></div>
  </div>
  <div class="element-number" title="How many Grand Slam packages do you need? 1 feeds 8."><label class="title">How many Grand Slam packages do you need? 1 feeds 8.<span class="required">*</span></label><input class="small" type="text" min="1" max="100" name="number" required="required" value="" /></div>
  <div class="element-textarea" title="If you have any special instructions for your order, please add them here. "><label class="title">Add Special Instructions for your order here.</label><textarea class="small" name="textarea" cols="20" rows="5"></textarea></div>
  <div class="submit"><input type="submit" value="ADD TO ORDER" /></div>
</form>
<p class="frmd"><a href="http://formoid.com/v29.php">contact us form</a> Formoid.com 2.9</p>
<script type="text/javascript" src="gramdslam_files/formoid1/formoid-flat-yellow.js"></script>
<!-- Stop Formoid form-->

这里的主要问题是您的选择器。从这个开始:

从表单的 ID 属性中删除 #

<form class="formoid-flat-yellow" id="live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">

为输入提供唯一 ID 或 class

<select id="wings-input" name="select1" required="required">

更新 jQuery 个选择器以选择正确的

var wings_input= $('#live_form #wings-input');

从现在开始,您可以适当地添加您的条件。我添加了一个基本警报,因此您可以看到它的工作原理:https://jsfiddle.net/L6zjr92o/

问题是选择器引用。检查此代码...

$(document).ready(function() {

  var selectWings = $("select[name='wings']");
  var select50 = $("select[name='wings50']");
  var select25 = $("select[name='wings25']");
  
  selectWings.change(function(){
    var val = selectWings.val();
    if(val=="50OFAKIND"){
      $("#parent_wings50").show();
      $("#parent_wings25").hide();
    }
    if(val=="25OFAKIND"){
      $("#parent_wings50").hide();
      $("#parent_wings25").show();
    }
  });
  
 
 
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Start Formoid form-->
<link rel="stylesheet" href="gramdslam_files/formoid1/formoid-flat-yellow.css" type="text/css" />
<link rel="stylesheet" href="gramdslam_files/formoid1/bootstrap-iso.css" type="text/css" />
<script type="text/javascript" src="gramdslam_files/formoid1/jquery.min.js"></script>
<script type="text/javascript" src="gramdslam_files/formoid1/conditional.js"></script>
<form class="formoid-flat-yellow" id="#live_form" style="background-color:#ffffff;font-size:14px;font-family:'Lato', sans-serif;color:#666666;max-width:480px;min-width:150px" method="post">
  <div class="title">
    <h2>GRAND SLAM</h2>
  </div>
  <div class="element-select" title="Define what pizza options you want. "><label class="title">PIZZA OPTIONS<span class="required">*</span></label>
    <div class="large"><span><select name="select" required="required">

  <option value="2 Cheese">2 Cheese</option>
  <option value="2 Pepporoni">2 Pepporoni</option>
  <option value="1 Cheese & 1 Peporoni">1 Cheese & 1 Peporoni</option></select><i></i></span></div>
  </div>


  <div class="element-select" title="Select how you will be ordering your wings." id="selectwings"><label class="title">SELECT WING OPTION<span class="required">*</span></label>
    <div class="large"><span><select name="wings" required="required">
    <option value="Select">Please Select</option>
  <option value="50OFAKIND">50 OF A KIND</option>
  <option value="25OFAKIND">SPLIT 25/25 OF A KIND</option></select><i></i></span></div>
  </div>

  <div class="element-select hidden" title="Select 1 the following." id="parent_wings50">
  <label class="title">SELECT ONE<span class="required">*</span></label>
    <div class="large"><span>
    <select name="wings50" required="required">
  <option value="50 Plain">50 Plain</option>
  <option value="50 Buffalo">50 Buffalo</option>
  <option value="50 BBQ">50 BBQ</option>
    </select><i></i></span></div>
  </div>

  <div class="element-multiple hidden" title="Select 1 the following." id="parent_wings25"><label class="title">SELECT TWO<span class="required">*</span></label>
    <div class="large">
    <select data-no-selected="Nothing selected" name="wings25" multiple="multiple" required="required">
  <option value="25 Plain">25 Plain</option>
  <option value="25 Buffalo">25 Buffalo</option>
  <option value="25 BBQ">25 BBQ</option></select></div>
  </div>
  <div class="element-number" title="How many Grand Slam packages do you need? 1 feeds 8."><label class="title">How many Grand Slam packages do you need? 1 feeds 8.<span class="required">*</span></label><input class="small" type="text" min="1" max="100" name="number" required="required" value="" /></div>
  <div class="element-textarea" title="If you have any special instructions for your order, please add them here. "><label class="title">Add Special Instructions for your order here.</label><textarea class="small" name="textarea" cols="20" rows="5"></textarea></div>
  <div class="submit"><input type="submit" value="ADD TO ORDER" /></div>
</form>
<p id="result"></p>
<p class="frmd"><a href="http://formoid.com/v29.php">contact us form</a> Formoid.com 2.9</p>
<script type="text/javascript" src="gramdslam_files/formoid1/formoid-flat-yellow.js"></script>
<!-- Stop Formoid form-->