Solved

Jquery oncheck to update SPAN

Posted on 2016-10-11
31
77 Views
Last Modified: 2016-10-20
Hi,

I have some SPANs on my form that I want to show information depending on some checkboxes.

i.e. The user checks a checkbox and then some information is showed in the SPAN.  I think I am alomost there BUT I just cannot seem to get it working!


partyWalls.PNG
// SPANS that show over the image.


                <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
                <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
                <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
                <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>



//Checkboxes that can be toggled by the user


                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" />wall-1
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />wall-2
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />wall-3
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />wall-4
                                    </label>




//JQUERY 

    $('#cb1').on('change', function () {
            if ($(this).is(':checked')) {
                $('#PartyWall1').html('SELECTED WALL 1');
            } else { $('#PartyWall1').html('wall 1'); }
        });




             $('#cb2').on('change', function () {
            if ($(this).is(':checked')) {
                $('#PartyWall2').html('SELECTED WALL 2');
            } else { $('#PartyWall2').html('wall 2'); }
        });

       and so on.

Open in new window



Please help!
0
Comment
Question by:SmashAndGrab
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 17
  • 13
31 Comments
 
LVL 34

Expert Comment

by:ste5an
ID: 41838327
What is your problem? As I don't use Angular, I'm not sure whether this is the optimal solution:

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST</title>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <style>
            span    { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.i-check').on('change', function () {
                    if ($(this).is(':checked')) {
                        $(this).siblings('span').css('border', 'solid 1px black');
                    } else {
                        $(this).siblings('span').css('border', 'none');
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <input id="cb1" class="i-check" type="checkbox"/>
            <label for="cb1">wall-1</label>
            <span id="PartyWall1">Wall 1</span>
        </div>
        <div>
            <input id="cb2" class="i-check" type="checkbox" />
            <label for="cb2">wall-2</label>
            <span id="PartyWall2">Wall 2</span>
        </div>
        <div>
            <input id="cb3" class="i-check" type="checkbox" />
            <label for="cb3">wall-3</label>
            <span id="PartyWall3">Wall 3</span>
        </div>
        <div>
            <input id="cb4" class="i-check" type="checkbox" />
            <label for="cb4">wall-4</label>
            <span id="PartyWall4">Wall 4</span>
        </div>
    </body>
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:Moussa Mokhtari
ID: 41838509
@SmashAndGrab
What happen when the one of the check boxes is clicked ?
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41838578
btw, use this in my sample above to set the text as wanted:

<script type="text/javascript">
    $(document).ready(function () {
        $('.i-check').on('change', function () {
            var isChecked = $(this).is(':checked');
            var wall = $(this).siblings('span');
            wall.css('border', isChecked ? 'solid 1px black' : 'none');
            wall.attr('data-name', wall.attr('data-name') || wall.text());
            wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
        });
    });
</script>

Open in new window

0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:SmashAndGrab
ID: 41839694
I can't get it to work for some reason.

Its strange as I have 2 other spans that do work when input is entered.

Here's my FULL code


<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


      span    { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}



</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>
                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there an SVP within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Postcode
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>
                                    Which wall(s) are Party wall(s)?

                                </label>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" />wall-1
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />wall-2
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />wall-3
                                    </label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <label>
                                        <input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />wall-4
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="~/Content/loader.gif" />
                        </div>



                    </div>
                </ng-form>

            </section>
        </div>

        
    



            <div class="col-lg-3 col-md-3">
                <img src="~/Content/directiondesign.png" class="img-responsive" />
                <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
                <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>
            
                <!-- Party Wall spans 
                <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
                <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
                <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
                <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
                -->

                <span id="PartyWall1">Wall 1</span>
                <span id="PartyWall2">Wall 2</span>
                <span id="PartyWall3">Wall 3</span>
                <span id="PartyWall4">Wall 4</span>

            </div>

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220</th>
                            <th>240</th>
                            <th>300</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>{{returnValues.val220}}</td>
                            <td>{{returnValues.val240}}</td>
                            <td>{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  <!-- {{returnValues.Include9}} -->
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>


    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {


        
       
        

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });




        $('.i-check').on('change', function () {
            var isChecked = $(this).is(':checked');
            var wall = $(this).siblings('span');
            wall.css('border', isChecked ? 'solid 1px black' : 'none');
            wall.attr('data-name', wall.attr('data-name') || wall.text());
            wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
        });

       
       

      

           


        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }


            });
        });

      
    });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;


        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }





        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41839703
Just to be clear.

Here's how it should work..


This is how the page is loaded (default):

PartyWallsDefault.PNG


Now, When the user selects one of the checkboxes - it will highlight this on the image (the relevant SPAN):

PartyWallsSELECTED.PNG
0
 

Author Comment

by:SmashAndGrab
ID: 41839823
I think its something to do with the actual Checkbox control.

I tried this..


        $("#cb1").click(function () {
            if ($(this).is(':checked')) alert("checked");
        });

Just to see if the event was being caught and nothing happens.
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41839868
My sample uses the explicit DOM structure of input/label/span to find the corresponding span using the siblings method.

<div class="checkbox checkbox-small">
    <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" />
    <label for="cb1">wall-1</label>
    <span id="PartyWall1">Wall 1</span>
</div>

Open in new window


You broke that correlation. Here - I think - you should reconsider you also your UI. The checkboxes are imho too far away from the plan image. An structure like

<div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
    <div class="form-group form-group-icon-right">
        <label>Which wall(s) are Party wall(s)? </label>
        <div class="checkbox checkbox-small">
            <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" />
            <label for="cb1">wall-1</label>
            <span id="PartyWall1">Wall 1</span>
        </div>
        <div class="checkbox checkbox-small">
            <input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" />
            <label for="cb2">wall-2</label>
            <span id="PartyWall2">Wall 2</span>
        </div>
        <div class="checkbox checkbox-small">
            <input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" />
            <label for="cb3">wall-3</label>
            <span id="PartyWall3">Wall 3</span>
        </div>
        <div class="checkbox checkbox-small">
            <input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" />
            <label for="cb4">wall-4</label>
            <span id="PartyWall4">Wall 4</span>
        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <img src="~/Content/directiondesign.png" class="img-responsive" />
        <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
        <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>
    </div>
</div>

Open in new window


seems to be more accurate. When you cannot do this, then we need a different solution to correlate the checkboxes with the spans. E.g.

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST</title>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <style>
            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.i-check').on('change', function () {
                    var isChecked = $(this).is(':checked');
                    var wall = $($(this).attr('data-wall'));
                    wall.css('border', isChecked ? 'solid 1px black' : 'none');
                    wall.attr('data-name', wall.attr('data-name') || wall.text());
                    wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
                });
            });
        </script>
    </head>
    <body>
        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
            <div class="form-group form-group-icon-right">
                <label>Which wall(s) are Party wall(s)?</label>
                <div class="checkbox checkbox-small">
                    <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" data-wall="#PartyWall1" />
                    <label for="cb1">wall-1</label>
                </div>
                <div class="checkbox checkbox-small">
                    <input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" data-wall="#PartyWall2" />
                    <label for="cb2">wall-2</label>
                </div>
                <div class="checkbox checkbox-small">
                    <input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" data-wall="#PartyWall3" />
                    <label for="cb3">wall-3</label>
                </div>
                <div class="checkbox checkbox-small">
                    <input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" data-wall="#PartyWall4" />
                    <label for="cb4">wall-4</label>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <img src="~/Content/directiondesign.png" class="img-responsive" />
            <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
            <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>
            <span id="PartyWall1">Wall 1</span>
            <span id="PartyWall2">Wall 2</span>
            <span id="PartyWall3">Wall 3</span>
            <span id="PartyWall4">Wall 4</span>
        </div>
    </body>
</html>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41839983
I tried this option but I just cannot seem to get it to work..

Can you see where I am going wrong?..

<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}

</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>

                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>


                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there a soil vent pipe trimming within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Delivery Region
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)?</label>
                                <div class="checkbox checkbox-small">
                                    <input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" data-wall="#PartyWall1" />
                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" data-wall="#PartyWall2" />
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" data-wall="#PartyWall3" />
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" data-wall="#PartyWall4" />
                                    <label for="cb4">wall-4</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="~/Content/loader.gif" />
                        </div>



                    </div>
                </ng-form>

            </section>
        </div>

        
    



            <div class="col-lg-3 col-md-3">
                <img src="~/Content/directiondesign.png" class="img-responsive" />
                <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
                <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>
            
                <!-- Party Wall spans 
                <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
                <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
                <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
                <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
                -->

                <span id="PartyWall1">Wall 1</span>
                <span id="PartyWall2">Wall 2</span>
                <span id="PartyWall3">Wall 3</span>
                <span id="PartyWall4">Wall 4</span>

            </div>

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220 mm</th>
                            <th>240 mm</th>
                            <th>300 mm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>£{{returnValues.val220}}</td>
                            <td>£{{returnValues.val240}}</td>
                            <td>£{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  {{returnValues.Include9}}
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>
    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {


        
       
        

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });
        
        $('.i-check').on('change', function () {
            alert('hi');
            var isChecked = $(this).is(':checked');
            var wall = $($(this).attr('data-wall'));
            wall.css('border', isChecked ? 'solid 1px black' : 'none');
            wall.attr('data-name', wall.attr('data-name') || wall.text());
            wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
        });
      
        
        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }
            });
        });
     });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;


        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }





        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41840100
I don't understand why it works for the other spans I use?
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41840282
Can you see where I am going wrong?..

Cause you asked:
Your code is poorly structured. Use at least three files for html, css and js. Also format your code.
And use a code repository, this allows to always delete unused code
While it may sound like nit-picking, it's not. Clean code is easier to read and understand. Thus
problems or errors are easier to spot.

I tackle such problems by crafting concise, but complete (by the means of the problem) examples:

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST</title>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <style>
            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
				$('.i-check').on('change', function () {
					alert('hi');
					var isChecked = $(this).is(':checked');
					var wall = $($(this).attr('data-wall'));
					wall.css('border', isChecked ? 'solid 1px black' : 'none');
					wall.attr('data-name', wall.attr('data-name') || wall.text());
					wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
				});
            });
        </script>
    </head>
    <body>
		<div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
			<div class="form-group form-group-icon-right">
				<label>Which wall(s) are Party wall(s)?</label>
				<div class="checkbox checkbox-small">
					<input class="i-check" type="checkbox" id="cb1" ng-model="objPostData.Wall1" tabindex="12" value="123" name="cb1" data-wall="#PartyWall1" />
					<label for="cb1">wall-1</label>
				</div>
				<div class="checkbox checkbox-small">
					<input class="i-check" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2" data-wall="#PartyWall2" />
					<label for="cb2">wall-2</label>
				</div>
				<div class="checkbox checkbox-small">
					<input class="i-check" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3" data-wall="#PartyWall3" />
					<label for="cb3">wall-3</label>
				</div>
				<div class="checkbox checkbox-small">
					<input class="i-check" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4" data-wall="#PartyWall4" />
					<label for="cb4">wall-4</label>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-3">
			<img src="~/Content/directiondesign.png" class="img-responsive" />
			<span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
			<span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

			<!-- Party Wall spans 
			<span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
			<span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
			<span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
			<span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
			-->

			<span id="PartyWall1">Wall 1</span>
			<span id="PartyWall2">Wall 2</span>
			<span id="PartyWall3">Wall 3</span>
			<span id="PartyWall4">Wall 4</span>
		</div>	
    </body>
</html>

Open in new window


As you can see, this works (well, adjust the jQuery reference). Thus, I guess, it maybe an js problem. But this is hard to tell without the complete code.
1
 
LVL 34

Expert Comment

by:ste5an
ID: 41840288
btw, do as your using Angulare, aren't you, use its logging framework:

Simple service for logging

then you don't need to use alert().
0
 

Author Comment

by:SmashAndGrab
ID: 41840290
Thank you Steven.

I will take your comments on-board. I will always try and better myself.  I appreciate the feedback.
0
 

Author Comment

by:SmashAndGrab
ID: 41840299
I am struggling to get your solution to work within my current page however :(

Can you help me incorporate your code in my page please?

This in my exact page as it is at the moment:

<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}

</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>

                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>


                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there a soil vent pipe trimming within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Delivery Region
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)? </label>
                                <div class="checkbox checkbox-small">
                                    <input name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123"/>
                                    
                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2"/>
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3"/>
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4"/>
                                    <label for="cb4">wall-4</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="~/Content/loader.gif" />
                        </div>



                    </div>



                 


                </ng-form>

            </section>
        </div>

        
    
        <div class="col-lg-3 col-md-3">
            <img src="~/Content/directiondesign.png" class="img-responsive" />
            <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
            <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

            <!-- Party Wall spans
        <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
        <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
        <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
        <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
        -->

            <span id="PartyWall1">Wall 1</span>
            <span id="PartyWall2">Wall 2</span>
            <span id="PartyWall3">Wall 3</span>
            <span id="PartyWall4">Wall 4</span>


        </div>


         

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220 mm</th>
                            <th>240 mm</th>
                            <th>300 mm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>£{{returnValues.val220}}</td>
                            <td>£{{returnValues.val240}}</td>
                            <td>£{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  {{returnValues.Include9}}
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>
    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {


        
       
        

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });
        
        $('#cbTest1').click(function () {
            if ($(this).is(':checked')) {
                
                alert('checked');
            } else {
                alert('unchecked');
                //$(this).siblings('label').html(' not checked');
            }
        });
      
        
        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }
            });
        });
     });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;


        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }

      

      


       



        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>

Open in new window

0
 
LVL 34

Expert Comment

by:ste5an
ID: 41840325
Where is the doc type, the html, the head or the body tag?

Capture.PNG
Sure that this is all?

Then the reason is simple: You're not linking to angular or jQuery..
0
 

Author Comment

by:SmashAndGrab
ID: 41840418
I'm using MVC so the structure is different..


<!DOCTYPE html>
<html style="overflow-y:scroll">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Metsa Wood Estimating Tool</title>

    <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css' />
   
    <link href="~/Content/css/font-awesome.css" rel="stylesheet" />
    <link href="~/Content/css/styles.css" rel="stylesheet" />
    <link href="~/Content/css/.css" rel="ValidationStyleSheet.css" />
   
   
</head>


<body ng-app="myApp" ng-controller="myController" class="ng-cloak">

    <div class="global-wrap">
        <script src="~/Content/js/jquery-2.2.0.js"></script>
        <script src="~/Content/js/bootstrap.js"></script>
        <script src="~/Content/Angularjs/angular.js"></script>
        <script src="~/Content/js/iCheck.js"></script>
        <script src="~/Content/js/jquery.popupoverlay.js"></script>
        <script src="~/Content/js/jquery.validate.min.js"></script>
        <script type="text/javascript">
            var myApp = angular.module('myApp', []);
        </script>

        @RenderBody();

    </div>
</body>

</html>

Open in new window



@RenderBody is where the body is loaded.

All my other jquery and Angular works its lietrally just getting these checkboxes to work.    I really have no idea why.

I thin k you were right in an earlier post where you mentioned where the Checkboxes are is the problem.

I've been messing about with the checkboxs.

I can trigger a Jquery event when I move the checkbox to here..

MOveCheckbox.PNG

Jquery:

   $('#cb1').click(function () {
            if ($(this).is(':checked')) {
                
                alert('checked');
            } else {
                alert('unchecked');
                //$(this).siblings('label').html(' not checked');
            }
        });

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41840422
But if I move that Checkbox where the others are then it does not work.
0
 

Author Comment

by:SmashAndGrab
ID: 41840427
working.PNG
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41840429
So the .NET tag was right..

btw, in this cases, complete code means the output source in the browser. Cause I cannot tell, what ASP.NET is rendering here.
0
 

Author Comment

by:SmashAndGrab
ID: 41840436
got ya!
0
 

Author Comment

by:SmashAndGrab
ID: 41840438
<!DOCTYPE html>
<html style="overflow-y:scroll">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Metsa Wood Estimating Tool</title>

    <link href="/Content/css/bootstrap.css" rel="stylesheet" />
    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css' />
   
    <link href="/Content/css/font-awesome.css" rel="stylesheet" />
    <link href="/Content/css/styles.css" rel="stylesheet" />
    <link href="/Content/css/.css" rel="ValidationStyleSheet.css" />
   
   
</head>


<body ng-app="myApp" ng-controller="myController" class="ng-cloak">

    <div class="global-wrap">
        <script src="/Content/js/jquery-2.2.0.js"></script>
        <script src="/Content/js/bootstrap.js"></script>
        <script src="/Content/Angularjs/angular.js"></script>
        <script src="/Content/js/iCheck.js"></script>
        <script src="/Content/js/jquery.popupoverlay.js"></script>
        <script src="/Content/js/jquery.validate.min.js"></script>
        <script type="text/javascript">
            var myApp = angular.module('myApp', []);
        </script>

        

<style>
    .msgVR
    {
        color:#b11d1d;
    }
    .msgVR:nth-child(2n) {
        color: #ffd800 !important;
    }
    .legends .msgRangeError {
        color: #ffd800 !important;
    }


            .msgVR                  { color:#b11d1d; }
            .msgVR:nth-child(2n)    { color: #ffd800 !important; }
            .legends .msgRangeError { color: #ffd800 !important; }
            span            { position: absolute; font-weight: bold; color: red; font-size: 12px; padding: 4px;}
            span#PartyWall1 { top: 42px; left: 141px; }
            span#PartyWall2 { top: 345px; left: 141px;}
            span#PartyWall3 { top: 175px; left: 85px; }
            span#PartyWall4 { top: 175px; left: 204px;}

</style>




<div class="container">
    <h1 class="page-title">Estimating Tool</h1>
</div>

<div class="container">

    <div class="row" data-gutter="60">
        <div class="col-lg-9 col-md-9">
            <div ng-show="frmEstimate.$invalid" class="alert alert-error">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please input correct values in all fields..
            </div>

            <section id="loginForm">
                <ng-form id="frmEstimate" name="frmEstimate">
                    <div class="row">
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.TypeOfConst.$invalid}">
                                <i class="fa fa-cubes input-icon input-icon-hightlight"></i>
                                <label>
                                    Type of Construction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.TypeOfConst.$invalid"></span>

                                </label>
                                <select class="form-control" data-val="true" required name="TypeOfConst" ng-change="CheckConstructionType()" ng-model="objPostData.ConstructionType" tabindex="1">
                                    <option value="">Select an Option</option>
                                    <option value="Timber Frame">Timber Frame</option>
                                    <option value="Traditional Masonry">Traditional Masonry</option>
                                </select>
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.IsStairs.$invalid}">

                                <i class="fa fa-windows input-icon input-icon-hightlight"></i>
                                <label>Is there a stair opening in the floor?  <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.IsStairs.$invalid"></span></label>

                                <select class="form-control" name="IsStairs" required ng-change="CheckStairOpening()" ng-model="objPostData.StairOpening" tabindex="2">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.AX.$invalid}">

                                <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width A (X)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.AX.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.AX.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="AX" id="AX" max="12000" min="1000" ng-model="objPostData.FloorWidthA" tabindex="5" />
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.BY.$invalid}">

                                <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                <label>
                                    Floor width B (Y)
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.BY.$invalid"></span>
                                    <span class="msgVR fa fa-exclamation-triangle" ng-show="frmEstimate.BY.$invalid"></span>

                                </label>
                                <input class="form-control" placeholder="mm" type="number" required name="BY" id="BY" max="12000" min="1000" ng-model="objPostData.FloorWidthB" tabindex="6" />
                            </div>
                        </div>

                        <div ng-if="IsStairOpening">
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.CX.$invalid}">

                                    <i class="fa fa-long-arrow-up input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width C (X)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.CX.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle text-info" ng-show="frmEstimate.CX.$invalid"></span>
                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="CX" min="1000" max="12000" ng-model="objPostData.OpeningC" tabindex="3" />
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-6">
                                <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DY.$invalid}">

                                    <i class="fa fa-long-arrow-right input-icon input-icon-hightlight"></i>
                                    <label>
                                        Opening width D (Y)
                                        <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DY.$invalid"> </span>
                                        <span class="msgVR fa fa-exclamation-triangle " ng-show="frmEstimate.DY.$invalid"></span>

                                    </label>
                                    <input class="form-control" placeholder="mm" type="number" required name="DY" max="12000" min="1000" ng-model="objPostData.OpeningD" tabindex="4" />
                                </div>
                            </div>
                        </div>


                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.DIR.$invalid}">

                                <i class="fa fa-arrows input-icon input-icon-hightlight"></i>
                                <label>
                                    Spanning direction
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.DIR.$invalid"></span>

                                </label>

                                <select class="form-control" required name="DIR" ng-model="objPostData.SpanningDirection" tabindex="7">
                                    <option value="">Select an Option</option>
                                    <option value="Up / Down">Up / Down</option>
                                    <option value="Left / Right">Left / Right</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.Stories.$invalid}">

                                <i class="fa fa-building input-icon input-icon-hightlight"></i>
                                <label>
                                    Does the house have more than 2 storeys?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.Stories.$invalid"></span>
                                </label>
                                <select class="form-control" required name="Stories" ng-model="objPostData.Stories" tabindex="8">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.SVP.$invalid}">

                                <i class="fa fa-bullhorn input-icon input-icon-hightlight"></i>
                                <label>
                                    Is there a soil vent pipe trimming within the floor zone?
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.SVP.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="SVP" ng-model="objPostData.SVP" tabindex="9">
                                    <option value="">Select an Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-lg-6 col-md-6">
                            <div class="form-group form-group-icon-left" ng-class="{'has-error': frmEstimate.PostCode.$invalid}">

                                <i class="fa fa-flag-checkered input-icon input-icon-hightlight"></i>
                                <label>
                                    Delivery Region
                                    <span class="msgVR fa fa-asterisk" ng-show="frmEstimate.PostCode.$invalid"></span>
                                </label>
                                <select class="form-control" data-val="true" required name="PostCode" ng-model="objPostData.PostCode" tabindex="10">
                                    <option value="">Select a Postcode</option>
                                    <option value="AB">ABERDEEN</option>
                                    <option value="AL">ST ALBANS</option>
                                    <option value="B">BIRMINGHAM</option>
                                    <option value="BA">BATH</option>
                                    <option value="BB">BLACKBURN</option>
                                    <option value="BD">BRADFORD</option>
                                    <option value="BH ">BOURNEMOUTH</option>
                                    <option value="BL">BOLTON</option>
                                    <option value="BN">BRIGHTON</option>
                                    <option value="BR">BROMLEY</option>
                                    <option value="BS">BRISTOL</option>
                                    <option value="BT">BELFAST</option>
                                    <option value="CA">CARLISLE</option>
                                    <option value="CB">CAMBRIDGE</option>
                                    <option value="CF">CARDIFF</option>
                                    <option value="CH">CHESTER</option>
                                    <option value="CM">CHELMSFORD</option>
                                    <option value="CO">COLCHESTER</option>
                                    <option value="CR">CROYDON</option>
                                    <option value="CT">CANTERBURY</option>
                                    <option value="CV">COVENTRY</option>
                                    <option value="CW">CREWE</option>
                                    <option value="DA">DARTFORD</option>
                                    <option value="DD">DUNDEE</option>
                                    <option value="DE">DERBY</option>
                                    <option value="DG">DUMFRIES</option>
                                    <option value="DH">DURHAM</option>
                                    <option value="DL">DARLINGTON</option>
                                    <option value="DN">DONCASTER</option>
                                    <option value="DT">DORCHESTER</option>
                                    <option value="DY">DUDLEY</option>
                                    <option value="E">LONDON-EAST</option>
                                    <option value="EC">LONDON-EAST CENTRAL</option>
                                    <option value="EH">EDINBURGH</option>
                                    <option value="EN">ENFIELD</option>
                                    <option value="EX">EXETER</option>
                                    <option value="FK">FALKIRK</option>
                                    <option value="FY">FYLDE/BLACKPOOL</option>
                                    <option value="G">GLASGOW</option>
                                    <option value="GL">GLOUCESTER</option>
                                    <option value="GU">GUILDFORD</option>
                                    <option value="GY">GUERNSEY</option>
                                    <option value="HA">HARROW</option>
                                    <option value="HD">HUDDERSFIELD</option>
                                    <option value="HG">HARROGATE</option>
                                    <option value="HP">HEMEL HEMPSTEAD</option>
                                    <option value="HR">HEREFORD</option>
                                    <option value="HS">WESTERN ISLES</option>
                                    <option value="HU">HULL</option>
                                    <option value="HX">HALIFAX</option>
                                    <option value="IG">ILFORD</option>
                                    <option value="IM">ISLE OF MAN</option>
                                    <option value="IP">IPSWICH</option>
                                    <option value="IV">INVERNESS</option>
                                    <option value="JE">JERSEY</option>
                                    <option value="KA">KILMARNOCK</option>
                                    <option value="KT">KINGSTON-U-THAMES</option>
                                    <option value="KW">KIRKWALL, ORKNEY</option>
                                    <option value="KY">KIRKCALDY, FIFE</option>
                                    <option value="L">LIVERPOOL</option>
                                    <option value="LA">LANCASTER</option>
                                    <option value="LD">LLANDRINDOD WELLS</option>
                                    <option value="LE">LEICESTER</option>
                                    <option value="LL">LLANDUDNO</option>
                                    <option value="LN">LINCOLN</option>
                                    <option value="LS">LEEDS</option>
                                    <option value="LU">LUTON</option>
                                    <option value="M">MANCHESTER</option>
                                    <option value="ME">MEDWAY</option>
                                    <option value="MK">MILTON KEYNES</option>
                                    <option value="ML">MOTHERWELL</option>
                                    <option value="N">LONDON-NORTH</option>
                                    <option value="NE">NEWCASTLE-UPON-TYNE</option>
                                    <option value="NG">NOTTINGHAM</option>
                                    <option value="NN">NORTHAMPTON</option>
                                    <option value="NP">NEWPORT</option>
                                    <option value="NR">NORWICH</option>
                                    <option value="NW">LONDON-NORTH WEST</option>
                                    <option value="OL">OLDHAM</option>
                                    <option value="OX">OXFORD</option>
                                    <option value="PA">PAISLEY</option>
                                    <option value="PE">PETERBOROUGH</option>
                                    <option value="PH">PERTH</option>
                                    <option value="PL">PLYMOUTH</option>
                                    <option value="PO">PORTSMOUTH</option>
                                    <option value="PR">PRESTON</option>
                                    <option value="RG">READING</option>
                                    <option value="RH">REDHILL</option>
                                    <option value="RM">ROMFORD</option>
                                    <option value="S">SHEFFIELD</option>
                                    <option value="SA">SWANSEA</option>
                                    <option value="SE">LONDON- SOUTH EAST</option>
                                    <option value="SG">STEVENAGE</option>
                                    <option value="SK">STOCKPORT</option>
                                    <option value="SL">SLOUGH</option>
                                    <option value="SM">SUTTON</option>
                                    <option value="SN">SWINDON</option>
                                    <option value="SO">SOUTHAMPTON</option>
                                    <option value="SP">SALISBURY</option>
                                    <option value="SR">SUNDERLAND</option>
                                    <option value="SS">SOUTHEND-ON-SEA</option>
                                    <option value="ST">STOKE-ON-TRENT</option>
                                    <option value="SW">LONDON-SOUTH WEST</option>
                                    <option value="SY">SHREWSBURY</option>
                                    <option value="TA">TAUNTON</option>
                                    <option value="TD">GALASHIELS</option>
                                    <option value="TF">TELFORD</option>
                                    <option value="TN">TUNBRIDGE WELLS</option>
                                    <option value="TQ">TORQUAY</option>
                                    <option value="TR">TRURO</option>
                                    <option value="TS">CLEVELAND</option>
                                    <option value="TW">TWICKENHAM</option>
                                    <option value="UB">SOUTHALL</option>
                                    <option value="W">LONDON-WEST</option>
                                    <option value="WA">WARRINGTON</option>
                                    <option value="WC">LONDON-WEST CENTRAL</option>
                                    <option value="WD">WATFORD</option>
                                    <option value="WF">WAKEFIELD</option>
                                    <option value="WN">WIGAN</option>
                                    <option value="WR">WORCESTER</option>
                                    <option value="WS">WALSALL</option>
                                    <option value="WV">WOLVERHAMPTON</option>
                                    <option value="YO">YORK</option>
                                    <option value="ZE">LERWICK</option>
                                </select>
                            </div>
                        </div>
                        

                        <input name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123" />

                        <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)? </label>
                                <div class="checkbox checkbox-small">
                                    <input name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123"/>
                                    
                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2"/>
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3"/>
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4"/>
                                    <label for="cb4">wall-4</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 legends">
                            <span class="msgVR fa fa-asterisk"> </span>   User Must Enter <br />
                            <span class="msgVR fa fa-exclamation-triangle msgRangeError"></span>   Min 1000, Max 12000
                        </div>


                        <div class="col-lg-6 col-xs-6">
                            <input ng-disabled="frmEstimate.$invalid" class="btn btn-primary pull-right" tabindex="16" type="button" ng-click="SubmitForm()" value="Submit" />
                            <input id="ResetForm" class="btn btn-primary pull-right" type="reset" value="Reload Form" />
                            <img style="width 34px !important;" class="pull-right" ng-if="IsLoading" src="/Content/loader.gif" />
                        </div>



                    </div>



                 


                </ng-form>

            </section>
        </div>

        
    
        <div class="col-lg-3 col-md-3">
            <img src="/Content/directiondesign.png" class="img-responsive" />
            <span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
            <span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

            <!-- Party Wall spans
        <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
        <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
        <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
        <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
        -->

            <span id="PartyWall1">Wall 1</span>
            <span id="PartyWall2">Wall 2</span>
            <span id="PartyWall3">Wall 3</span>
            <span id="PartyWall4">Wall 4</span>


        </div>


         

        </div>

    <div ng-if="IsAllResults">

        <div class="row">
            <div class="col-lg-6">
                <h5>{{returnValues.Include1}}</h5>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="success">
                            <th>Floor Depth</th>
                            <th>220 mm</th>
                            <th>240 mm</th>
                            <th>300 mm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{returnValues.FloorDepth}}</td>
                            <td>£{{returnValues.val220}}</td>
                            <td>£{{returnValues.val240}}</td>
                            <td>£{{returnValues.val300}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3>Included in this price:</h3>
                <p>
                    {{returnValues.Include11}}
                </p>
                <p>
                    {{returnValues.Include2}}
                </p>
                <p>
                    {{returnValues.Include3}}
                </p>
                <p>
                    {{returnValues.Include4}}
                </p>
                <p>
                    {{returnValues.Include5}}
                </p>
                <p>
                    {{returnValues.Include6}}
                </p>
                <p>
                    {{returnValues.Include7}}
                </p>
                <p>
                    {{returnValues.Include8}}
                </p>
                <p>
                  {{returnValues.Include9}}
                </p>
                <p>
                    {{returnValues.Include10}}
                </p>
            </div>
        </div>
    </div>




    <ng-form name="frmEm" class="row" ng-if="IsEmail">
        <div class=" col-lg-6  col-md-6">
            <h3>Send Result as Email</h3>

            <div class="form-group form-group-icon-left">
                <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                <label>Email
                    <span class="msgVR fa fa-asterisk" ng-show="frmEm.em.$invalid"></span>
                </label>

                <input class="form-control" placeholder="Enter Email Address"  type="email" required name="em" ng-model="returnValues.Email" />
            </div>
        </div>
        
        <div class="col-lg-12">
            <input ng-disabled="frmEm.$invalid" type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
            <img style=" width: 34px !important;" class="" ng-if="IsLoadingEmail" src="/Content/loader.gif" />
        </div>



        

    </ng-form> 
</div>


    <div class="gap">
</div>

            <div id="my_popup" class="well">
        
               An email has been sent to the address you specified.
                Thank you for using this tool.
                <p>&nbsp;</p>
                
               <!-- <button class="my_popup_open">Open popup</button>-->


                <button class="my_popup_close">Close</button>
            </div>

<script type="text/javascript">

    $(document).ready(function () {


        
       
        

        // Initialize the popup plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });


        $('#ResetForm').click(function () {
            location.reload();
        });
        
        $('#cb1').click(function () {
            if ($(this).is(':checked')) {
                
                alert('checked');
            } else {
                alert('unchecked');
                //$(this).siblings('label').html(' not checked');
            }
        });
      
        
        $('#AX').change(function () {
            if ($.isNumeric(this.value)) {
                $('#DimensionA').html(this.value+ "    mm   ");
            }
            else {
                $('#DimensionA').html('Dimension A');
            }

            $('#BY').change(function () {
                if ($.isNumeric(this.value)) {
                    $('#DimensionB').html(this.value+"    mm   ");
                }
                else {
                    $('#DimensionB').html('Dimension B');
                }
            });
        });
     });


   

    myApp.controller('myController', function ($scope, $http) {

        $scope.objPostData = null;
        $scope.returnValues = null;
        $scope.IsStairOpening = false;
        $scope.IsPartWall = false;
        $scope.IsLoading = false;
        $scope.IsLoadingEmail = false;
        $scope.IsEmail = false;
        $scope.IsAllResults = false;
        $scope.IsResults1 = false;
        $scope.IsResults2 = false;


        $scope.SubmitForm = function () {
            $scope.IsLoading = true;
            $http({
                method: 'POST',
                url: '/api/values/PostForm',
                data: JSON.stringify($scope.objPostData)
            }).
            success(function (data) {
                $scope.returnValues = data;
                $scope.IsLoading = false;
                $scope.IsEmail = true;
                $scope.IsAllResults = true;
                $scope.IsResults1 = true;
                $scope.IsResults2 = true;
                //show the contents of the popup
                //$('#my_popup').popup('show');


            })
            .error(function (error) {
                $scope.IsLoading = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }
        $scope.CheckStairOpening = function()
        {
            if ($scope.objPostData.StairOpening == "Yes") {
                $scope.IsStairOpening = true;
                
            }
            else {
                $scope.IsStairOpening = false;
                
            }
        }

        $scope.CheckConstructionType = function () {
            if ($scope.objPostData.ConstructionType == "Timber Frame") {
                
                $scope.IsPartWall = true;
            }
            else {
               
                $scope.IsPartWall = false;
            }
        }

      

      


       



        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#my_popup').popup('show');

            })
            .error(function (error) {
                $scope.IsLoadingEmail = false;
                $scope.status = 'Unable to Process Request: ' + error.message;
            });
        }

        //end
    });
</script>;

    </div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"cc2c182e240d443b9287b0d5959c8bd1"}
</script>
<script type="text/javascript" src="http://localhost:50512/9c3278d0cb744e159df21c8c84fbb578/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>

</html>

Open in new window

0
 
LVL 34

Expert Comment

by:ste5an
ID: 41840483
You've dropped the class and data-wall attributes from the inputs..

Your output must look like (see attachment).

Your checkbox section:

<div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
	<div class="form-group form-group-icon-right">
		<label>Which wall(s) are Party wall(s)? </label>
		<div class="checkbox checkbox-small">
			<input class="party-wall" data-wall="#PartyWall1" name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123"/>
			<label for="cb1">wall-1</label>
		</div>
		<div class="checkbox checkbox-small">
			<input class="party-wall" data-wall="#PartyWall2" type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2"/>
			<label for="cb2">wall-2</label>
		</div>
		<div class="checkbox checkbox-small">
			<input class="party-wall" data-wall="#PartyWall3" type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3"/>
			<label for="cb3">wall-3</label>
		</div>
		<div class="checkbox checkbox-small">
			<input class="party-wall" data-wall="#PartyWall4" type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4"/>
			<label for="cb4">wall-4</label>
		</div>
	</div>
</div>

Open in new window


And your wall labels:

<div class="col-lg-3 col-md-3">
	<img src="/Content/directiondesign.png" class="img-responsive" />
	<span id="DimensionA" style="position:absolute;top:-2px; left:125px;">Dimension A</span>
	<span id="DimensionB" style="position:absolute;top:225px; left:28px;transform: rotate(270deg); transform-origin: left top 0;">Dimension B</span>

	<!-- Party Wall spans
<span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
<span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
<span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
<span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>
-->

	<span id="PartyWall1">Wall 1</span>
	<span id="PartyWall2">Wall 2</span>
	<span id="PartyWall3">Wall 3</span>
	<span id="PartyWall4">Wall 4</span>


</div>

Open in new window


And the jQuery ready:

$(document).ready(function () {
/*
	// Initialize the popup plugin
	$('#my_popup').popup({
		opacity: 0.3,
		transition: 'all 0.3s'
	});
*/

	$('#ResetForm').click(function () {
		location.reload();
	});

	$('.party-wall').on('change', function () {
		console.log('wall event for #' + $(this).attr('id'));
		var isChecked = $(this).is(':checked');
		var wall = $($(this).attr('data-wall'));
		wall.css('border', isChecked ? 'solid 1px black' : 'none');
		wall.attr('data-name', wall.attr('data-name') || wall.text());
		wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
	});

	$('#AX').change(function () {
		if ($.isNumeric(this.value)) {
			$('#DimensionA').html(this.value+ "    mm   ");
		}
		else {
			$('#DimensionA').html('Dimension A');
		}

		$('#BY').change(function () {
			if ($.isNumeric(this.value)) {
				$('#DimensionB').html(this.value+"    mm   ");
			}
			else {
				$('#DimensionB').html('Dimension B');
			}
		});
	});
 });

Open in new window

0
 
LVL 34

Expert Comment

by:ste5an
ID: 41840500
btw, sure that

$('#AX').change(function () {
	if ($.isNumeric(this.value)) {
		$('#DimensionA').html(this.value+ "    mm   ");
	}
	else {
		$('#DimensionA').html('Dimension A');
	}

	$('#BY').change(function () {
		if ($.isNumeric(this.value)) {
			$('#DimensionB').html(this.value+"    mm   ");
		}
		else {
			$('#DimensionB').html('Dimension B');
		}
	});
});

Open in new window


is correct? It looks like you probably mean:

$('#AX').change(function () {
    if ($.isNumeric(this.value)) {
        $('#DimensionA').html(this.value + "    mm   ");
    }
    else {
        $('#DimensionA').html('Dimension A');
    }
});

$('#BY').change(function () {
    if ($.isNumeric(this.value)) {
        $('#DimensionB').html(this.value + "    mm   ");
    }
    else {
        $('#DimensionB').html('Dimension B');
    }
});

Open in new window



or shorter:

$('#AX').change(function () {
	$('#DimensionA').html($.isNumeric(this.value) ? this.value + "    mm   " : 'Dimension A');
});

$('#BY').change(function () {
	$('#DimensionB').html($.isNumeric(this.value) ? this.value + "    mm   " : 'Dimension B');
});

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41841698
Thanks pal - I will definatley improve the other code once this is working

I have implemented your code and I get the same results I'm afraid...

I have published the current version - you can access here..

http://estimatingtool.azurewebsites.net/
0
 

Author Comment

by:SmashAndGrab
ID: 41841706
You need to Select "Timber Frame" from the "Type of Construction" drop down to show the Check boxes.
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41841752
outch, got it:  The event binding happens when the document is ready. But your check boxes are available at that time.

Capture.PNG
So you need to run the event binding after the construction type has change..

But: you're using Angular. But it seems that you don't use it appropriately. It is a mighty tool which can solve a lot of problems in a much simpler fashion.
0
 

Author Comment

by:SmashAndGrab
ID: 41841760
Thanks.  
I'm learning angular so its not great I know :)

"So you need to run the event binding after the construction type has change.."  

How do I put this into practice?
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41842440
Use ng-show instead. This will render the DOM elements, but hide it when necessary. And use a computed property. E.g.

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Q28975656</title>
        <style>
            * { border: 0px none; margin: 8px; padding: 0; }
            html, body { color: black; font-family: "Segoe UI", Arial, san-serif; margin: 0 auto; }
        </style>
        <script src="js/angular-1.5.8.min.js" type="text/javascript"></script>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular
                .module('estimateTool', [])
                .controller('EstimateToolController', function($scope) {
                    $scope.constructionType = null;
                    $scope.constructionTypes = ['Timber Frame', 'Traditional Masonry'];
                    $scope.requiresPartyWalls = function () { return ($scope.constructionType === 'Timber Frame') };
                    $scope.wall1Selected = false;
                    $scope.wall2Selected = false;
                    $scope.wall3Selected = false;
                    $scope.wall4Selected = false;
                });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                console.log('binding events.. ' + $('.party-wall').length);
                $('.party-wall').on('change', function () {
                    console.log('wall event for #' + $(this).attr('id'));
                    var isChecked = $(this).is(':checked');
                    var wall = $($(this).attr('data-wall'));
                    wall.css('border', isChecked ? 'solid 1px black' : 'none');
                    wall.attr('data-name', wall.attr('data-name') || wall.text());
                    wall.text((isChecked ? 'SELECTED ' : '') + wall.attr('data-name'));
                });
            });
        </script>
    </head>
    <body>
        <div ng-app="estimateTool" ng-controller="EstimateToolController">
            <div class=" col-lg-6 col-md-6">
                <div>
                    <label>Type of Construction</label>
                    <select required ng-model="constructionType">
                        <option value="">Select an Option</option>
                        <option value="Timber Frame">Timber Frame</option>
                        <option value="Traditional Masonry">Traditional Masonry</option>
                    </select>
                </div>
            </div>
            <div class=" col-lg-12 col-md-12" ng-show="requiresPartyWalls()">
                <div>
                    <label>Which wall(s) are Party wall(s)?</label>
                    <div>
                        <input class="party-wall" data-wall="#PartyWall1" type="checkbox" id="cb1" ng-model="wall1Selected" />
                        <label for="cb1">wall-1</label>
                    </div>
                    <div>
                        <input class="party-wall" data-wall="#PartyWall2" type="checkbox" id="cb2" ng-model="wall2Selected" />
                        <label for="cb2">wall-2</label>
                    </div>
                    <div>
                        <input class="party-wall" data-wall="#PartyWall3" type="checkbox" id="cb3" ng-model="wall3Selected" />
                        <label for="cb3">wall-3</label>
                    </div>
                    <div>
                        <input class="party-wall" data-wall="#PartyWall4" type="checkbox" id="cb4" ng-model="wall4Selected" />
                        <label for="cb4">wall-4</label>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <span id="PartyWall1">Wall 1</span>
                <span id="PartyWall2">Wall 2</span>
                <span id="PartyWall3">Wall 3</span>
                <span id="PartyWall4">Wall 4</span>
            </div>
            <pre>constructionType:   {{constructionType}}</pre>
            <pre>requiresPartyWalls: {{requiresPartyWalls()}}</pre>
            <pre>wall1Selected:      {{wall1Selected}}</pre>
            <pre>wall2Selected:      {{wall2Selected}}</pre>
            <pre>wall3Selected:      {{wall3Selected}}</pre>
            <pre>wall4Selected:      {{wall4Selected}}</pre>
        </div>
    </body>
</html>

Open in new window

0
 
LVL 34

Accepted Solution

by:
ste5an earned 500 total points
ID: 41842471
And here is a solution, which is imho better, cause it uses Angular instead of jQuery:

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Q28975656</title>
        <style>
            * { border: 0px none; margin: 8px; padding: 0; }
            html, body { color: black; font-family: "Segoe UI", Arial, san-serif; margin: 0 auto; }
        </style>
        <script src="js/angular-1.5.8.min.js" type="text/javascript"></script>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular
                .module('estimateTool', [])
                .controller('EstimateToolController', function($scope) {
                    $scope.constructionType = null;
                    $scope.constructionTypes = [{Name: 'Timber Frame'}, {Name: 'Traditional Masonry'}];
                    $scope.showPartyWallsSelection = function () { return ($scope.constructionType === 'Timber Frame') };
                    $scope.wall1Selected = false;
                    $scope.wall2Selected = false;
                    $scope.wall3Selected = false;
                    $scope.wall4Selected = false;
                });
        </script>
    </head>
    <body>
        <div ng-app="estimateTool" ng-controller="EstimateToolController">
            <div class=" col-lg-6 col-md-6">
                <div>
                    <label>Type of Construction</label>
                    <select required ng-model="constructionType" ng-options="option.Name as option.Name for option in constructionTypes">
                        <option value="">Select an Option</option>
                    </select>
                </div>
            </div>
            <div class=" col-lg-12 col-md-12" ng-show="showPartyWallsSelection()">
                <div>
                    <label>Which wall(s) are Party wall(s)?</label>
                    <div>
                        <input type="checkbox" id="cb1" ng-model="wall1Selected" />
                        <label for="cb1">wall-1</label>
                    </div>
                    <div>
                        <input type="checkbox" id="cb2" ng-model="wall2Selected" />
                        <label for="cb2">wall-2</label>
                    </div>
                    <div>
                        <input type="checkbox" id="cb3" ng-model="wall3Selected" />
                        <label for="cb3">wall-3</label>
                    </div>
                    <div>
                        <input type="checkbox" id="cb4" ng-model="wall4Selected" />
                        <label for="cb4">wall-4</label>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <span ng-if="wall1Selected">SELECTED Wall 1</span>
                <span ng-if="!wall1Selected">Wall 1</span>
                <span ng-if="wall2Selected">SELECTED Wall 2</span>
                <span ng-if="!wall2Selected">Wall 2</span>
                <span ng-if="wall3Selected">SELECTED Wall 3</span>
                <span ng-if="!wall3Selected">Wall 3</span>
                <span ng-if="wall4Selected">SELECTED Wall 4</span>
                <span ng-if="!wall4Selected">Wall 4</span>
            </div>
            <pre>constructionType:   {{constructionType}}</pre>
            <pre>showPartyWallsSelection:    {{showPartyWallsSelection()}}</pre>
            <pre>wall1Selected:      {{wall1Selected}}</pre>
            <pre>wall2Selected:      {{wall2Selected}}</pre>
            <pre>wall3Selected:      {{wall3Selected}}</pre>
            <pre>wall4Selected:      {{wall4Selected}}</pre>
        </div>
    </body>
</html>

Open in new window


Just a comment: I've started learning Angular 2 hours ago.
As far as I can say using a directive would be better. This would allow a markup of

<div class="col-lg-3 col-md-3">
	<span show-wall="wall1Selected">Wall 1</span>
	<span show-wall="wall2Selected">Wall 2</span>
	<span show-wall="wall3Selected">Wall 3</span>
	<span show-wall="wall4Selected">Wall 4</span>                				
</div>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41843388
Thanks for this.  I'm struggling to put it into my existing code#!
0
 

Author Comment

by:SmashAndGrab
ID: 41851630
Hi,
I can't seem to get this working on my platform for some reason and I don't know why.
I think I have miscatagorised this question at the beginning (should have put it as "Angular JS " rather than JQuery.

Thanks Steven for you're efforts!  Its very much appreciated!   I will accept your solution and raise another question using the correct category.

I hope this is ok and that I am using the correct protocol?

Thanks

Smash
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41851644
It's fine.

And for the tagging and usage of different JS frameworks: It really depends on the kind of your application and what technology stack you want to use.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question