Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

athulpraj's avatar

input checkbox on click function

i'm trying to update a value in laravel db on check of a checkbox , but i'm not getting the basic functionality of click function

<input type="checkbox" class="early_access" id="early_access" name="early_access"/>

this is my input checkbox

$('#early_access').on('click', function () {
                        alert("working");
                    });

and this is the function i wrote .. which is not working ..

0 likes
10 replies
kadari's avatar

Hi, can you see any javascript error message on the browser console?

1 like
willvincent's avatar

Are you certain the JS is added to the page? Is it wrapped in a $(document).ready(function() { ... }); ?

This works for me on plnkr.co:

  $(document).ready(function() {
    $('#early_access:checkbox').bind('change', function(e) {
      if ($(this).is(':checked')) {
        alert('Checked');
      }
      else {
        alert('Unchecked');
      }
    })
  });
1 like
athulpraj's avatar

yes it is added .. i have other functions also

kadari's avatar

Perhaps there are more than one elements with the id "early_access"? Can you copy here the whole markup, please?

1 like
jibs's avatar

I did that, in my blade form :

{!! Form::checkbox('changePassword', 0, false, ['id' => 'changePassword', 'onclick' => 'enableDisablePassword(this)']) !!}

Calling my js function.

edit : how to post code sample on forum?

1 like
athulpraj's avatar

This is the js section

<script type="text/javascript">
        $(document).ready(function() {
                $("#early_access").on('change', function () {
                    alert("sadasdasd");
                });


            function image_edit_loader(action){
                if(action=='show'){
                    $('#image_edit_loader').show();
                } else {
                    $('#image_edit_loader').hide();
                }
            }

            var $image = $('#profile_pic_cropper > img'),cropBoxData,canvasData,replaced;
            var crop_data=null;
            $image.cropper({
                aspectRatio: 1/1,
                autoCropArea: 0.5,
                crop: function(data) {
                    crop_data=data;
                },
                built: function () {
                    // Strict mode: set crop box data first
                    $image.cropper('setCropBoxData', cropBoxData);
                    $image.cropper('setCanvasData', canvasData);
                }
            });

            $('#upload_image_file').change(function() {
                $('#crop_and_submit').show();
                $('#profile_pic_cropper').show();
                $image.cropper('replace', URL.createObjectURL(this.files[0]));
                //$("#picture").attr("src", );
            });

            $('#crop_and_submit').on('click', function () {
                image_edit_loader('show');
                var file_data = $('#upload_image_file').prop('files')[0];
                var form_data = new FormData();
                form_data.append('file', file_data);
                form_data.append('crop_data_x', crop_data.x);
                form_data.append('crop_data_y', crop_data.y);
                form_data.append('crop_data_width', crop_data.width);
                form_data.append('crop_data_height', crop_data.height);
                form_data.append('_token','{{ csrf_token() }}');
                $.ajax({
                    url: "{{action('Web\Premium\YtController@postUploadProfilePic')}}", // point to server-side PHP script
                    dataType: 'json',  // what to expect back from the PHP script, if anything
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    type: 'post',
                    success: function(response){
                        console.log(response);
                        if(response.status){
                            window.location="{{url('myprofile')}}";
                        }
                    }
                });
                image_edit_loader('false');
            });





        }); 

    </script>
athulpraj's avatar

Thank you !! @willvincent Your function should probably work !! i saw the same method as reference do you know any other reason why this is not working .. I've been trying for a long time .

willvincent's avatar

Only other thing I could think of being a problem is that your checkbox does not have a value, but that shouldn't prevent the JS event firing.

1 like
athulpraj's avatar
athulpraj
OP
Best Answer
Level 1

Guys found out the problem Turns out that the frontend developer had some other script running which was inherited from some other page ... :( a document.ready function was already running for all check boxes globally ... when i removed it .. my code worked

Please or to participate in this conversation.