how to remove form input data on clicking on checkbox?

Question

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>

If you want to remove the value of the `input.file` object, you should clear it's value with `$("#efileu input").val("");`. See https://jsfiddle.net/shaoran/rathxw43/ — Pablo, Sep 25 '16 at 02:36
It may seem that just using `.val("")` is not enough, see http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery — Pablo, Sep 25 '16 at 02:43

score 5 · Accepted Answer · edited Sep 25 '16 at 04:29

5

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
}

edited Sep 25 '16 at 04:29

esote

763
10
24

answered Sep 25 '16 at 03:33

Asifuzzaman Redoy

1,677
1
10
26

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

Found a workaround that works:

  $(".electronics").click(function() {
    if (!$("#efileu").is(":visible")) {
      $("#efileu").show();
    } else {
      var $el = $('#efileu');
      $el.wrap('<form>').closest('form').get(0).reset();
      $el.unwrap();
      $("#efileu").hide();
    }

Here's a JSFiddle to see it in action. Credit goes to Gyrocode.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 25 '16 at 02:23

Rani Kheir

929
11
14

how to remove form input data on clicking on checkbox?

2 Answers2