shah rushabh shah rushabh - 2 months ago 15
Javascript Question

how to remove form input data on clicking on checkbox?

If user is selecting file and after it if user is unchecking checkbox than file is also at there so I want to make it like a when user is unchecking checkbox than after file is must be remove. How can I make it? And which event handler is perfect for checkbox?
HTML CODE:

<div class="checkbox">
<label for="email">electronics
<input type="checkbox" name="product_category[]" value="electronics" id="product_category" class="electronics">
</label>
</div>
<div class="form-group" id="efileu" style="display:none;" >
<input type="file" name="checkboxfile0" id="efile" style="width:100%">
</div>
<div class="checkbox">
<label for="email">kitchen
<input type="checkbox" name="product_category[]" value="kitchen" id="product_category" class="kitchen">
</div>
<div class="form-group" id="kfileu" style="display:none;" >
<input type="file" name="checkboxfile1" id="kfile" style="width:100%">
</div>

<script>
$(".electronics").click(function(){
if(!$("#efileu").is(":visible")){
$("#efileu").show();
}
else{
$("#efileu").hide();
$("#efileu").val();
}

});
$(".kitchen").click(function(){
if(!$("#kfileu").is(":visible")){
$("#kfileu").show();
}
else{
$("#kfileu").hide();
}

});
</script>

Answer

use this one line of jQuery in your existing code that seems fine to me

  else{
  $("#efileu").hide();
  $("#efileu").replaceWith($("#efileu").val('').clone(true)); //clear the values
   }


      else{
     $("#kfileu").hide();
      $("#kfileu").replaceWith($("#kfileu").val('').clone(true));//clear the values
      }
Comments