Solved

Jquery oncheck to update SPAN

Posted on 2016-10-11
31
55 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
  • 17
  • 13
31 Comments
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
@SmashAndGrab
What happen when the one of the check boxes is clicked ?
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
 

Author Comment

by:SmashAndGrab
Comment Utility
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
Comment Utility
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
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
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
Comment Utility
I don't understand why it works for the other spans I use?
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
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
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

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

Author Comment

by:SmashAndGrab
Comment Utility
working.PNG
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
got ya!
0
 

Author Comment

by:SmashAndGrab
Comment Utility
<!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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
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
Comment Utility
You need to Select "Timber Frame" from the "Type of Construction" drop down to show the Check boxes.
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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 32

Accepted Solution

by:
Stefan Hoffmann earned 500 total points
Comment Utility
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
Comment Utility
Thanks for this.  I'm struggling to put it into my existing code#!
0
 

Author Comment

by:SmashAndGrab
Comment Utility
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 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now