CODEWITHSUNDEEP
javascriptphpjquery
Vinod
Vinod

Reputation: 141

delete value from input when uncheck the checkbox

I have checkbox with input fields. When checkbox is clicked then related input field opens and type some text in input. But when I uncheck the checkbox then text from related input should be blank. 

<?php 
  $result = $obj->show_social_icons();
  foreach($result as $row)
   {
?>
  <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="<?php echo $row['id']; ?>">

  <?php echo $row['name']; ?>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
  <br>
<?php } ?>

My jquery is:

 jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
if ($(this).is(':checked'))
$(this).next('.max_tickets').show();
else
$(this).next('.max_tickets').hide();
}).change();
});

When I uncheck the checkbox then related input filed should be blank or erase. It is not happening. Please help.

Upvotes: 0

Views: 768

Answers (2)

Umair Khan
Umair Khan

Reputation: 1752

Sorry could not use PHP. So example is just in HTML and jQuery.

You were hiding the parent div of input but not emptying it.

jQuery(document).ready(function($) {
  $('input.maxtickets_enable_cb').change(function() {
    if ($(this).is(':checked'))
      $(this).next('.max_tickets').show();
    else
      $(this).next('.max_tickets').hide().children('input').val('');
  }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="1">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="2">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="3">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

To remove the value from an input use val(''). Also, next() doesn't work in this case as the elements are not siblings; you echo a text node between them. To fix this you could wrap each looped block in a div and use a combination of closest() and find().

Also note that you can simplify the show()/hide() logic to use toggle() instead, providing the checked property as the boolean argument which determines whether the content should be made visible or not.

Finally, use label elements to enable the user to click the text by the checkbox in order to check it.

jQuery($ => {
  $('input.maxtickets_enable_cb').change(function() {
    $(this).closest('.row').find('.max_tickets').toggle(this.checked).find('input').val('');
  }).trigger('change');
});
.max_tickets { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id1" /> 
    Name #1
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id2" /> 
    Name #2
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>

Upvotes: 1

Related Questions