【发布时间】:2017-04-05 13:03:23
【问题描述】:
我有这个表单,我正在尝试添加条件逻辑。我在网上找到了一个教程来做到这一点,但我的 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-->
【问题讨论】:
-
到底是什么问题?你需要给我们更多的代码。上述js中没有声明某些变量
标签: javascript css forms logic conditional