Update DB field on checkbox change - AJAX

Question

How can I update one field in MySQL table after user clicks on checkbox. I have this:

<div style="float: right"><input type="checkbox" class="tvSync" data-toggle="toggle" data-onstyle="success" onclick="myFunction({{$spot->spotid}})"></div>

and

function myFunction(id)
  {   
  var  spotid=spotid;  
    $.ajax({
      type:'post',
      url:'updateTvSync',
      data:{spotid: spotid},
      success:function(msg){
        console.log(msg)
 }
 });

}

I created the route /updateSync and included it in controller:

public function updateTvSync(Request $request)
    {
        $id = $request->spotid;

        TV::where('spotid', $id)->update(['delayed' => 1]);
    }

but when I click on checkbox nothing happens. Does this <div> need to be in form or am I missing something here?

have you checked what is in your actual html? as in inspect element and see if it actually inserted the $spot->spotid — kscherrer
– kscherrer, Commented Jan 17, 2018 at 10:10

Gert B. · Accepted Answer · 2018-01-17 09:57:13Z

4

 var  spotid=spotid;

should be

 var  spotid=id;

spotid is undefined

answered Jan 17, 2018 at 9:57

Gert B.

2,34720 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

harunB10 Over a year ago

I fixed it but still nothing happens. Also I get nothing in console.

Gert B. Over a year ago

or data:{spotid: id}, and remove the extra var

Gert B. Over a year ago

If you put a console.log(id); as first line of the function, it should give a error or log in the console, either the function is not defined or the console.log shows

Gert B. Over a year ago

The onclick could be prevented by other js code, so yes it could be the problem

kscherrer Over a year ago

oh yeah that makes sense. Maybe make a listener like in SaurabhMistrys answer but instead of listening to 'click', listen to 'change' ?

|

Saurabh Mistry · Accepted Answer · 2018-01-17 10:12:12Z

0

try to give id to your checkbox and remove onclick function

<input id="{{$spot->spotid}}" type="checkbox" class="tvSync" data-toggle="toggle" data-onstyle="success">

Add this JQuery , you are calling wrong route /updateTvSync instead of /updateSync . in your ajax url.

<script>
$(document).on('click','.tvSync',function(){
  var id=$(this).attr('id');
  alert(id);

      $.ajax({
         type:'post',
         url:'/updateSync',
         data:{spotid: id},
         success:function(msg){
           console.log(msg)
         }
      });

 });
</script>

answered Jan 17, 2018 at 10:12

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

5 Comments

Gert B. Over a year ago

why would onclick be wrong? Ididn't see the url mistake :-)

Gert B. Over a year ago

I would not put the spotid in the id attr: there can be only one of the same id on a page! using data-spotid would be better

harunB10 Over a year ago

data-toggle="toggle"is preventing the ajax call. Any solutions?

Saurabh Mistry Over a year ago

just remove that

harunB10 Over a year ago

But I need it :D... I don't want to have simple checkbox but the one from bootstraptoggle.

Collectives™ on Stack Overflow

Update DB field on checkbox change - AJAX

2 Answers 2

13 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related