CODEWITHSUNDEEP
javascriptasp.netajax
Joakim Carlsson
Joakim Carlsson

Reputation: 1580

How do auto update text input asp.net

I'm doing a small project where I count Starting hour, Ending hour, and break hour and it will return how many hours I did work. My goal is to disable the workedHours text input have it auto update as you change the value of StartTime, EndTime and BreakTime.

This is my script how I calculate times:

$(function() {
    $('#startTime').change(function() { CalculateTime(); });
    $('#endTime').change(function() { CalculateTime(); });
    $('#breakTime').change(function() { CalculateTime(); });
    CalculateTime();
});


function CalculateTime() {
    try {
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();
        var breakTime = $('#breakTime').val();

        var startDate = new Date(2000, 1, 1, startTime.substring(0, 2), startTime.substring(3, 5), 0, 0);
        var endDate = new Date(2000, 1, 1, endTime.substring(0, 2), endTime.substring(3, 5), 0, 0);

        var time = endDate - startDate;
        time = time / 1000 / 60 / 60;
        time = time - breakTime.substring(0, 2);
        time = time - (breakTime.substring(3, 5) / 60);
        $('#workedHours').html(time + " timmar");
    } catch (err) {
        $('#workedHours').html("---");
    }
}

And this is the view 

<div class="form-group">
    <label class="col-md-4 control-label">Start tid:</label>
    <div class="col-md-5">
        @Html.TextBox("startTime", Model.Times.StartTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Slut tid:</label>
    <div class="col-md-5">
        @Html.TextBox("endTime", Model.Times.EndTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Rast Längd:</label>
    <div class="col-md-5">
        @Html.TextBox("breakTime", Model.Times.BreakTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Tid jobbad:</label>
    <div class="col-md-5">
        @Html.TextBox("workedHours", Model.Times.WorkedHours, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>

Any guidance would be very helpful.

Upvotes: 0

Views: 78

Answers (2)

balexandre
balexandre

Reputation: 75073

My goal is to disable the workedHours text input

you can easily accomplish this with adding a disabled attribute to your input, as you're using Razor helpers, and as the name says, it's just a helper, you can use the normal tag:

<input type="text" id="workedHours" name="workedHours"
       value="@Model.Times.WorkedHours" class"form-control timepicker timepicker-24"
       disabled />

and btw, you can write this

$('#startTime').change(function() { CalculateTime(); });
$('#endTime').change(function() { CalculateTime(); });
$('#breakTime').change(function() { CalculateTime(); });

as this

$('#breakTime,#startTime,#endTime').change(CalculateTime);

but what you probably need is to use the blur method, simply change to:

$('#breakTime,#startTime,#endTime').blur(CalculateTime);

remember: "if you're duplicating code somewhere... you're doing it wrong"

updated

you also have an issue on the script, you're using .html() but you're using input 's so you need to use val()

change to:

$('#workedHours').val(time + " timmar");

live example: https://jsbin.com/guzeta/2/edit?html,js,output

Upvotes: 1

Dominik
Dominik

Reputation: 101

Try this JsFiddle : https://jsfiddle.net/gt1cr0sz/2/

Add the Attribute 

disabled="disabled"

to the Textbox workedhours.

Upvotes: 0

Related Questions