CodeIgniter Forums
checkbox based input item - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1)
+--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3)
+--- Thread: checkbox based input item (/showthread.php?tid=71498)

Pages: 1 2

checkbox based input item - kvanaraj - 08-20-2018

I am having a form like checkbox based allowed to edit. once i click the checkbox after the input item should be enabled. i attached a image

RE: checkbox based input item - Pertti - 08-21-2018

If you want to submit form or some data, use <input type="checkbox" onchange="myfunction(this)" ...>

Then write JS function myfunction (you can name it whatever makes sense to you, of course), and make that function post data to server. If you use jQuery it'll be $.post() function.

RE: checkbox based input item - kvanaraj - 08-21-2018

(08-21-2018, 12:28 AM)Pertti Wrote: If you want to submit form or some data, use <input type="checkbox" onchange="myfunction(this)" ...>

Then write JS function myfunction (you can name it whatever makes sense to you, of course), and make that function post data to server. If you use jQuery it'll be $.post() function.

First row only affected. remaining row no output

 echo '<td  align="center"><input type="number" min="0" max="999" name="cnt" value="0"   onkeyup="sum();" id="texttwo" disabled></td>';

echo '<td align="center"><input type="checkbox" value="' . $row['certificate_id'] . '" name="certid[]" id="chb"></td>';

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementById('chb').onchange = function() {
    document.getElementById('texttwo').disabled = !this.checked;
};
</script>

RE: checkbox based input item - Pertti - 08-21-2018

It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.

RE: checkbox based input item - kvanaraj - 08-21-2018

(08-21-2018, 02:02 AM)Pertti Wrote: It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.
I try this . not working
echo '<td  align="center"><input type="number" min="0" max="999" name="cnt" value="0"   onkeyup="sum();" class="texttwo" disabled></td>';                 

                     echo '<td align="center"><input type="checkbox" value="' . $row['certificate_id'] . '" name="certid[]" class="chb"></td>';  



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementsByClassName('chb').onchange = function() {
    document.getElementsByClassName('texttwo').disabled = !this.checked;
};
</script>

RE: checkbox based input item - kvanaraj - 08-24-2018

(08-21-2018, 02:02 AM)Pertti Wrote: It's because ID value should only be used once.

Change it to class="chb" and getElementsByClassName('chb') and it should work as intended.

my full coding is attached. kindly help me to solve my problem

RE: checkbox based input item - InsiteFX - 08-24-2018

No one is going to solve your problem for you they will only try to help you.

For one check boxes and radio buttons have no value if they are not checked.
There just plain empty.

RE: checkbox based input item - Wouter60 - 08-24-2018

To toggle the disabled property of the text inputs, first give all text and number inputs a class name and the disabled property: class="txtbox" disabled="disabled".
Then give the checkboxes the class name "cbx".

Load jQuery. Insert the following script:

Code:
<script>

$(document).ready(function(){
    $('.cbx').click(function(){
        v = $(this).is(':checked');
        row = $(this).parents('tr');
        if (v==true) {
            row.find('.txtbox').removeAttr('disabled');    
        }
        else {
            row.find('.txtbox').attr('disabled','disabled');
        }
        
    });

});

</script>

Now, if you click on one of the checkboxes, the text and number inputs on the same row are enabled or disabled.


Important:

Code:
$('.cbx')

is jQuery code for document.getElementsByClassName('cbx')
As you can see, jQuery makes your code far more simple!

RE: checkbox based input item - kvanaraj - 08-24-2018

(08-24-2018, 07:41 AM)Wouter60 Wrote: To toggle the disabled property of the text inputs, first give all text and number inputs a class name and the disabled property: class="txtbox" disabled="disabled".
Then give the checkboxes the class name "cbx".

Load jQuery. Insert the following script:

Code:
<script>

$(document).ready(function(){
    $('.cbx').click(function(){
        v = $(this).is(':checked');
        row = $(this).parents('tr');
        if (v==true) {
            row.find('.txtbox').removeAttr('disabled');    
        }
        else {
            row.find('.txtbox').attr('disabled','disabled');
        }
        
    });

});

</script>

Now, if you click on one of the checkboxes, the text and number inputs on the same row are enabled or disabled.


Important:

Code:
$('.cbx')

is jQuery code for document.getElementsByClassName('cbx')
As you can see, jQuery makes your code far more simple!

Working perfectly.
Thanks a lot. You are the real programmer.
one more queries.
I want to multiply first and second field result should be in third field. It has 7 rows.

echo '<td id="textone_'.$row['id'].'">'.$row['fee']. '</td>'; 
  echo '<td  id="texttwo_'.$row['id'].'"> <input type="number" min="0" max="999" 
  name="india"  
  onChange="sum('.$row['id'].'); " class="txtbox" disabled="disabled" ></td>';
echo '<td> <input type="text" value="0"

   id="result_'.$row['id'].'" name="result"></td>';
Ajax 
****

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<!--<script src="<?php echo base_url(); ?>assets/jQuery-2.1.4.min.js"></script> -->

<script type="text/javascript">
 function sum(rowid) {
       var txtFirstNumberValue =  document.getElementById('textone_'+rowid).innerHTML;
       alert(txtFirstNumberValue );
       var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
       alert(txtSecondNumberValue ); 
       
       var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
       alert(result);
       if (!isNaN(result)) {
           document.getElementById('result_'+rowid).value = result;
       }
   }
  </script>

alert(txtSecondNumberValue ) shows undefined error.
how to solve this?

RE: checkbox based input item - Wouter60 - 08-25-2018

Give the inputs for the number of sets a name also: name="sets[]".
Remove the onChange part that you already have.

Then, in the jQuery part that starts with $(document).ready .. insert this:
Code:
    $("input[name='sets[]']").change(function(){
        row = $(this).parents('tr');
        n = $(this).val();
        f = row.find("input[name='india[]']").val();
        total = n * f;
        alert(total);
    });

Now, if you change any of the inputs with the name "sets[]", it will trigger a calculation.