Jquery - get the previous value of the textbox when the checkbox is checked

Question

When I uncheck a checkbox, the text box value associated should be empty. And when I check again, need to display the previous value. Looking for a generic fix to save the previous values of the text boxes as the Checkbox count will increase in the future.

For Eg: When I check the first checkbox, the value of the text box associated is 1. When I uncheck the same checkbox, the value of the textbox should change to empty. And when I check it again, the old 1 value should display. Any help would be appreciated.

jQuery:

$(".drilling_specify").click(function () {
    if ($(this).is(":checked")) {
        $(this).nextAll('input').first().removeClass('hide');
    } else {
        $(this).nextAll('input').first().addClass('hide').val('');
    }
});

HTML:

<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted">&nbsp; 
<span>Accepted</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />

<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected">&nbsp; 
<span>Rejected</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />

<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold">&nbsp; 
<span>Hold</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />

CSS:

.hide{
  display:none;
}

Are you doing this so even if a text input is hidden its value won't get submitted with the form? I'd suggest toggling the `disabled` attribute instead (https://stackoverflow.com/questions/1355728/values-of-disabled-inputs-will-not-be-submitted) because disabled inputs don't get submitted to the server. — WOUNDEDStevenJones, Jun 10 '20 at 16:37
@WOUNDEDStevenJones HI, Yes, when the checkbox is not checked I want to pass an empty value. Are you suggesting to add disabled attribute in the else condition. — , Jun 10 '20 at 16:40
The problem when I use disabled attribute is the db value is not getting updated. I want to update the db column as empty when the checkbox value is unchecked. — , Jun 10 '20 at 16:50

matthias_h · Accepted Answer · 2020-06-10T17:23:46.907

You could store the previos value in a data attribute and set the value of the input to the value of this data attribute when the checkbox gets checked again.

$(".drilling_specify").click(function() {
   var test = $(".drilling_specify").val();
   var input = $(this).nextAll('input').first();
   if ($(this).is(":checked")) {
      input.removeClass('hide');
      if (input.attr("data-previous")) {
         input.val(input.attr("data-previous"));
      }
   } else {
         input.attr("data-previous", input.val());
         input.addClass('hide').val('');
   }
});

.hide{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted">&nbsp; 
<span>Accepted</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />

<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected">&nbsp; 
<span>Rejected</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />

<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold">&nbsp; 
<span>Hold</span>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />

score 0 · Answer 2 · answered Jun 10 '20 at 17:17

You need to save the value of the field before hiding/clearing its value, and then set its value from the saved variable when displaying it again.

var savedValues = [];

$("input[type='checkbox']").change(function() {
  let checked = $(this).is(":checked");
  let textVal = $(this).closest('label').next().val();
  let id = $(this).attr('id');

  if (checked) {
    //show it and set the value
    let tempVal = '';
    if (typeof savedValues[id] !== "undefined") {
      tempVal = savedValues[id];
    }

    $(this).closest('label').next('input[type="text"]').removeClass('hide').val(tempVal);
  } else {
    //hide it and clear the value
    savedValues[id] = textVal;
    $(this).closest('label').next('input[type="text"]').addClass('hide').val('');
  }
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Accepted" id="drilling_accepted">&nbsp;
Accepted</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="1" />

<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Rejected" id="drilling_rejected">&nbsp;
Rejected</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="2" />

<label>
<input type="checkbox" class="drilling_specify" name="drilling_status[]" value="Hold" id="drilling_hold">&nbsp;
Hold</label>
<input type="text" class="hide" name="drilling_accpt_specify" value="3" />

Jquery - get the previous value of the textbox when the checkbox is checked

2 Answers2