CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
Joakim Carlsson
Joakim Carlsson

Reputation: 1580

Asp.net / Javascript remove value of input field when checkbox is checked

right now I have a javascript that disables from inputs fields for me. And this is the script that is doing that.

    $(document).ready(function() {
    $('#check').click(function(){
        if($(this).prop('checked') === true){
            $('#startTime').prop("disabled","disabled");
            $('#endTime').prop("disabled","disabled");
            $('#breakTime').prop("disabled","disabled");
            $('#workedHours').prop("disabled","disabled");
            $('#addMoreProjects').attr("disabled", "disabled");
            $('#projectName').attr("disabled", "disabled");
            $('#description_1').attr("disabled", "disabled");
            $('#hours_1').attr("disabled", "disabled");
        }
        else {
            $('#startTime').removeAttr('disabled');
            $('#endTime').removeAttr('disabled');
            $('#breakTime').removeAttr('disabled');
            $('#workedHours').removeAttr('disabled');
            $('#addMoreProjects').removeAttr('disabled');
            $('#projectName').removeAttr('disabled');
            $('#description_1').removeAttr('disabled');
            $('#hours_1').removeAttr('disabled');
        }
    });
});

But by default my Input fields has values in them, and when I disble the input fields the values are still there. What I would like to do is when I check the textbox, it will disable the Input field, and remove the value that is inside the box. And when I uncheck it I want that value to be added back.

This is my view:

<div class="portlet-body form">
    <div class="form-group">
        <label class="col-md-5">Ingen tid att rapportera</label>
        @Html.CheckBoxFor(model => model.NoTimeToReport, new { @id = "check" })
    </div>
    @if (Model.ReportId.HasValue)
    {
        <div class="form-group">
            <label class="col-md-4 control-label">Redigera datum:</label>
            <div class="col-md-5">
                @Html.TextBox("date", Model.Date.ToShortDateString(), new {@class = "form-control", @readonly = "true"})
            </div>
        </div>
    }
    <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>
</div>

Upvotes: 0

Views: 157

Answers (4)

avi
avi

Reputation: 912

The thing is that you should do some extra javascript logic.You could keep your data hidden in some data-value attribute. Here you have an example for a single element.

The trick to preserve the logic for the modified text is to add a change event for each of your textboxes like this:

$( "#someTextbox" ).change(function() {
  $("#someTextbox").attr('data-value', $(this).val());
});

In order to use this in your situation try to edit the render of textbox similar to (basically i have added the data_value for your textbox, note that you need to wirte it with "_", mvc will take care of the correct formatting):

 @Html.TextBox("startTime", Model.Times.StartTime, new {@class = "form-control timepicker timepicker-24", data_value = Model.Times.StartTime.ToString()})

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10683

try this:-

var startTime = $('#startTime');
var endTime = $('#endTime')
var breakTime = $('#breakTime');
var workedHours = $('#workedHours');
var addMoreProjects = $('#addMoreProjects');
var projectName = $('#projectName');
var description_1 = $('#description_1');
var hours_1 = $('#hours_1');

if ($(this).prop('checked') === true) {
    startTime.attr('disabled', 'disabled').attr('data-value', startTime.val()).val('');
                endTime.attr('disabled', 'disabled').attr('data-value', endTime.val()).val('');
                breakTime.attr('disabled', 'disabled').attr('data-value', breakTime.val()).val('');
                workedHours.attr('disabled', 'disabled').attr('data-value', workedHours.val()).val('');
                addMoreProjects.attr('disabled', 'disabled').attr('data-value', addMoreProjects.val()).val('');
                projectName.attr('disabled', 'disabled').attr('data-value', projectName.val()).val('');
                hours_1.attr('disabled', 'disabled').attr('data-value', hours_1.val()).val('');
                description_1.attr('disabled', 'disabled').attr('data-value', description_1.val()).val('');
}
else {   
  startTime.removeAttr('disabled').val(startTime.attr('data-value'));
  endTime.removeAttr('disabled').val(endTime.attr('data-value'));
  breakTime.removeAttr('disabled').val(breakTime.attr('data-value'));
  workedHours.removeAttr('disabled').val(workedHours.attr('data-value'));
 addMoreProjects.removeAttr('disabled').val(addMoreProjects.attr('data-value'));
 projectName.removeAttr('disabled').val(projectName.attr('data-value'));
 hours_1.removeAttr('disabled').val(hours_1.attr('data-value'));
 description_1.removeAttr('disabled').val(description_1.attr('data-value'));
}

Upvotes: 1

nelek
nelek

Reputation: 4312

There is simple example in javascript :

function chk(ele) {
    var n1=document.getElementById('txtName');
    var n2=document.getElementById('txtName2');
    if(ele.checked) {
        n1.disabled=false;n2.disabled=false;
        n1.value=n1.getAttribute('data-value');
        n2.value=n2.getAttribute('data-value');
        n1.focus();
    } else {
        n1.setAttribute('data-value',n1.value);
        n2.setAttribute('data-value',n2.value);
        n1.value='';n2.value='';
        n1.disabled=true;n2.disabled=true;
    }
}
<input type="checkbox" onclick="chk(this);" checked />Check me
<br><br>
First name : <input type="text" id="txtName" value="" data-value="" />
<br><br>
Last name : <input type="text" id="txtName2" value="" data-value="" />

Upvotes: 0

jkyadav
jkyadav

Reputation: 1282

As you are storing you value in "startTime" textbox, what you can do is just use hiddenfield and store the same value in it and then you can change your code like below.

In Else Part:

$('#startTime').val('');
$('#startTime').removeAttr('disabled');

In If Part:

$('#startTime').val($('#your date time hidden field').val());

Let me know if it works for you.

Upvotes: 0

Related Questions