Untitled

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="xxx">


        <title>Temperature Limit</title>

        <!-- Bootstrap core CSS -->
        <link href="dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="jumbotron-narrow.css" rel="stylesheet">


        <script src="assets/js/ie-emulation-modes-warning.js"></script>

  </head>

   <body>
    <div class="container">
        <div class="jumbotron">
            <h4><b>Type temperature limit</b></h4>
            <form class="form-horizontal">
                <div class="form-group" >
                    <label class="control-label col-sm-4" for="minTemp">Minimal:       </label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" id="minTemp"       min="10" max="25" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="maxTemp">Maximal:</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" id="maxTemp"  min="25" max="40">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-5">
                        <button id="saveTermBut" type="submit"  class="btn btn-sm btn-default">Save</button>
                    </div>
                </div>
            </form>
        </div>
        </div>


    <div class="container">
        <h2>Current Conditions </h2>
        <div class="jumbotron">
            <div class="container col-lg-6">
                <div class="form-group">
                    <label class="control-label " for="currTemp">Minimal Temp:</label>
                    <output id="currTemp">
                </div>
            </div>
            <div class="container">
                <div class="form-group">
                    <label class="control-label " for="currTemp1">Maximal Temp:</label>
                    <output id="currTemp1">
                </div>
            </div>
            </div>
        </div>
    <footer class="footer">
        <p>&copy; 2016 Company, Inc.</p>
    </footer>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="jquery.js">

    <script src="SaveTempLimit.js"></script>
    </body>
    </html>

$(document).ready(function () {


$.ajax({
    type: 'GET',
    url: 'tempLimit.json',
    dataType: 'json',
    success: function (tempLimit) {

        $('#currTemp.form-group').append(tempLimit.minTemp);
        $('#currTemp1.form-group').append(tempLimit.maxTemp);

    }

});

$('#saveTermBut').on('click', function () {

    var limitTemps = {};
        limitTemps.minTemp = $('#minTemp.form-control').val();
        limitTemps.maxTemp = $('#maxTemp.form-control').val();


    $.ajax({
        type: 'POST',
        url: 'tempLimit.json',
        dataType: 'json',
        data: limitTemps,
        success: function () {
            console.log(limitTemps);
        },
        error: function (err) {
            alert(err);
        }
        });


});
});

{
  "minTemp": "20", "maxTemp":"22"
}