https://stackoverflow.com/questions/19793402
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianYour other fieldset elements aren't showing up because they are not found inside your form.jquery-order-form element. Your script at the bottom of the page initializes the jPrice plugin on this form element. Move your </form> tag to the end of your fieldset elements, and I bet it starts working. Essentially, it should look something like this where all your fieldset elements are children of the form element.
<form class="jquery-order-form">
<div class="options">
<fieldset>...</fieldset>
<fieldset>...</fieldset>
<fieldset>...</fieldset>
<fieldset>...</fieldset>
</div>
<div class="sidebar">...</div>
</form>
Update: Your issues are caused by the structure of your markup. I have updated the example above to give you an idea as to how it "should" look. I have not included all of your original markup, but what's here should get you to your goal.
Here's what your complete code would probably look like:
<div id="main">
<h1>AzaService Managed Services Calculator</h1>
<form id="jquery-order-form" class="jof form-horizontal right" action="submit.php" method="post" enctype="multipart/form-data">
<div class="options" style="width: 719px;">
<fieldset id="fieldset1" class="coolfieldset collapsed">
<legend>Windows Servers</legend>
<div class="sub-option o-1 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="400" value="8x5" name="f_1">
<label for="f_1"> 8 x 5</label>
<span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$400.00 </span></span></li>
<li>
<input type="radio" checked="checked" data-cost="480" value="24x7" name="f_1">
<label for="f_1"> 24 x 7</label>
<span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$480.00 </span></span></li>
</ul>
</div>
</div>
<div class="sub-option o-2 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="3" value="Antivirus" name="f_2[]">
<label for="f_2[]"> Antivirus</label>
<span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$3.00 </span></span></li>
<li>
<input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_2[]">
<label for="f_2[]"> Onsite</label>
<span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$50.00 </span></span></li>
<li>
<input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_2[]">
<label for="f_2[]"> Backup</label>
<span class="price-tag-wrapper" style="opacity: 0;"> - <span class="price-tag">$20.00 </span></span></li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Windows Servers: </strong>
<input type="number" name="q_1" id="q_1" value="1" data-quantity="f_1,f_2[]">
</label>
<fieldset id="fieldset2" class="coolfieldset collapsed">
<legend>Linux Servers</legend>
<div class="sub-option o-3 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="400" value="8x5" name="f_3[]">
<label for="f_3[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="480" value="24x7" name="f_3[]">
<label for="f_3[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-4 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="3" value="Antivirus" name="f_4[]">
<label for="f_4[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_4[]">
<label for="f_4[]"> Onsite</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_4[]">
<label for="f_4[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Linux Servers: </strong>
<input type="number" name="q_2" id="q_2" value="2" data-quantity="f_3[],f_4[]">
</label>
<fieldset id="fieldset3" class="coolfieldset collapsed">
<legend>Unix Servers</legend>
<div class="sub-option o-5 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="400" value="8x5" name="f_5[]">
<label for="f_5[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="480" value="24x7" name="f_5[]">
<label for="f_5[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-6 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="3" value="Antivirus" name="f_6[]">
<label for="f_6[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="50" value="Onsite" name="f_6[]">
<label for="f_6[]"> Onsite</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="20" value="Backup" name="f_6[]">
<label for="f_6[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Unix Servers: </strong>
<input type="number" name="q_3" id="q_3" value="3" data-quantity="f_5[],f_6[]">
</label>
<fieldset id="fieldset4" class="coolfieldset collapsed">
<legend>Windows Workstations</legend>
<div class="sub-option o-7 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="55" value="8x5" name="f_7[]">
<label for="f_7[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="66" value="24x7" name="f_7[]">
<label for="f_7[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-8 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="2" value="Antivirus" name="f_8[]">
<label for="f_8[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_8[]">
<label for="f_8[]"> Onsite</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_8[]">
<label for="f_8[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Windows Workstations: </strong>
<input type="number" name="q_4" id="q_4" value="4" data-quantity="f_7[],f_8[]">
</label>
<fieldset id="fieldset5" class="coolfieldset collapsed">
<legend>Linux Workstations</legend>
<div class="sub-option o-9 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="55" value="8x5" name="f_9[]">
<label for="f_9[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="66" value="24x7" name="f_9[]">
<label for="f_9[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-10 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="2" value="Antivirus" name="f_10[]">
<label for="f_10[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_10[]">
<label for="f_10[]"> Onsite</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_10[]">
<label for="f_10[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Linux Workstations: </strong>
<input type="number" name="q_5" id="q_5" value="5" data-quantity="f_9[],f_10[]">
</label>
<fieldset id="fieldset6" class="coolfieldset collapsed">
<legend>Unix Workstations</legend>
<div class="sub-option o-11 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="55" value="8x5" name="f_11[]">
<label for="f_11[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="66" value="24x7" name="f_11[]">
<label for="f_11[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-12 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="2" value="Antivirus" name="f_12[]">
<label for="f_12[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="10" value="Onsite" name="f_12[]">
<label for="f_12[]"> Onsite</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="5" value="Backup" name="f_12[]">
<label for="f_12[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Unix Workstations: </strong>
<input type="number" name="q_6" id="q_6" value="6" data-quantity="f_11[],f_12[]">
</label>
<fieldset id="fieldset7" class="coolfieldset collapsed">
<legend>Mobile Units</legend>
<div class="sub-option o-13 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="40" value="8x5" name="f_13[]">
<label for="f_13[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="48" value="24x7" name="f_13[]">
<label for="f_13[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-14 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="50" value="Antivirus" name="f_14[]">
<label for="f_14[]"> Antivirus</label>
</li>
<li>
<input type="checkbox" checked="checked" data-cost="50" value="Backup" name="f_14[]">
<label for="f_14[]"> Backup</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Mobile Units: </strong>
<input type="number" name="q_7" id="q_7" value="7" data-quantity="f_13[],f_14[]">
</label>
<fieldset id="fieldset8" class="coolfieldset collapsed">
<legend>Networks</legend>
<div class="sub-option o-15 o-radio" data-type="radio" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Service Level: </strong></p>
<ul>
<li>
<input type="radio" data-cost="30" value="8x5" name="f_15[]">
<label for="f_15[]"> 8 x 5</label>
</li>
<li>
<input type="radio" checked="checked" data-cost="36" value="24x7" name="f_15[]">
<label for="f_15[]"> 24 x 7</label>
</li>
</ul>
</div>
</div>
<div class="sub-option o-10 o-checkbox" data-type="checkbox" style="display: none;">
<div class="well" style="display: none;">
<p><strong>Services: </strong></p>
<ul>
<li>
<input type="checkbox" data-cost="50" value="Onsite" name="f_16[]">
<label for="f_16[]"> Onsite</label>
</li>
</ul>
</div>
</div>
</fieldset>
<label><strong>Number of Networks: </strong>
<input type="number" name="q_8" id="q_8" value="8" data-quantity="f_15[],f_16[]">
</label>
<p>
<input class="submit btn btn-primary btn-large" type="submit" value="Send it Off!">
</p>
</div>
<div class="sidebar" style="top: 0px; left: 0px;">
<div class="total well">
<h3>Total: <span class="price">$4939.00 </span></h3>
<input type="hidden" id="total-cost" name="total-cost" value="4939">
</div>
<div class="summary well">
<h3>Summary:</h3>
<div class="itemized-summary">
<div class="line-item">
<p><strong>Windows Server Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Windows Server Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Windows Servers: </strong>1</p>
</div>
<hr>
<div class="line-item">
<p><strong>Linux Server Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Linux Server Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Linux Servers: </strong>2</p>
</div>
<hr>
<div class="line-item">
<p><strong>Unix Server Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Unix Server Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Unix Servers: </strong>2</p>
</div>
<hr>
<div class="line-item">
<p><strong>Windows Workstation Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Windows Workstation Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Windows Workstations: </strong>4</p>
</div>
<hr>
<div class="line-item">
<p><strong>Linux Workstation Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Linux Workstation Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Linux Workstations: </strong>5</p>
</div>
<hr>
<div class="line-item">
<p><strong>Unix Workstation Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Unix Workstation Services: </strong></p>
<ul>
<li>Onsite</li>
<li>Backup</li>
</ul>
<p></p>
</div>
<div class="quantity">
<p><strong>Number of Unix Workstations: </strong>6</p>
</div>
<hr>
<div class="line-item">
<p><strong>Mobile Service Level: </strong>24x7</p>
</div>
<div class="line-item">
<p><strong>Mobile Services: </strong>Backup</p>
</div>
<div class="quantity">
<p><strong>Number of Mobile Units: </strong>7</p>
</div>
<hr>
<div class="line-item">
<p><strong>Network Service Level: </strong>24x7</p>
</div>
<div class="quantity">
<p><strong>Number of Networks: </strong>8</p>
</div>
</div>
</div>
</div>
</form>
</div>
