Question posted in
You can find the official documentation here.

how to use onchage event instead of setInterval in this script – Jquery ajax

in my laravel project i have colorpicker input field where I want to autosave the value in database. In this section I have pasted the script which is running properly. But the problem is this is continue saving the value after the interval. But what I want?
When I click the input field then the event will fire without clicking it would not goes on.
so plz can anyone help me out how can I use the onchange event for this. I have pasted the code below plz check it out and let me know

<script>  
$(document).ready(function(){  
     function autoSave()  
     {  
            var id =$("#hid").val();
            var statscolor = $('#statscolor').val();  


               $.ajax({  
                    headers: {
                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                     },
                    method:"put",  
                    // url:"{{ route('companyStats.update', $auto->id) }}",   
                    url:"colorstats/"+id,   
                    data:{backgroundcolor:statscolor},  
                    dataType:"text",  
                    success:function(data)  
                    {  

                         console.log(data);  
                         // $('#autoSave').fadeIn().text("color successfully updated");
                         // $('#autoSave').fadeOut(3000);
                         $('#autoSave').text('updatedsuccessfully');
                         // setInterval(function(){

                         //      $('#autoSave').fadeOut();


                         // }, 5000); 
                         /*setTimeout(function() {
                            // $('#autoSave').fadeOut("slow");
                            $('#autoSave').fadeIn().text("color successfully updated");
                        }, 5000 ); */


                    }  
               });  

     }
     setInterval(function(){   
          autoSave();   
          }, 5000);  
});  
</script>

this is blade input field

     <div class="form-group">
                               <label for="statscolor">Background Color</label>

                               <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

                               <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" onChange="autoSave()">

                               <small id="autoSave"></small>

                           </div>
Tags:

2

Answers


  1. 0

    This answer is based on JQuery, but if you use jscolor.js (I guess) there may be a specific event. In this case, every time your color changes, your function is called. You should probably save the data when the colorpicker is closed.

    $(document).ready(function() {
  $('.jscolor').on('change', function() {
    var statscolor = $('#statscolor').val();

    alert('Your new Color:' + statscolor);
    //Replace the alert with the ajax call

  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="statscolor">Background Color</label>

    <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

    <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" >

    <small id="autoSave"></small>

  </div>

    Second solution

    If my guess is correct, this is the solution with jscolor.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<div class="form-group">
  <label for="statscolor">Background Color</label>

  <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

  <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" onChange="autoSave(this.jscolor)">

  <small id="autoSave"></small>

</div>

<script>
  function autoSave(jscolor) {
    // 'jscolor' instance can be used as a string
    alert('#' + jscolor);
  }
</script>
    Login or Signup to reply.
  2. 0

    So you can add an event Listener on the .jscolor element. for Jquery you can bind on() 

    <script>  
$(document).ready(function(){  
 function autoSave()  
 {  
        var id =$("#hid").val();
        var statscolor = $('#statscolor').val();  


           $.ajax({  
                headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                method:"put",  
                // url:"{{ route('companyStats.update', $auto->id) }}",   
                url:"colorstats/"+id,   
                data:{backgroundcolor:statscolor},  
                dataType:"text",  
                success:function(data)  
                {  

                     console.log(data);  
                     // $('#autoSave').fadeIn().text("color successfully updated");
                     // $('#autoSave').fadeOut(3000);
                     $('#autoSave').text('updatedsuccessfully');
                     // setInterval(function(){

                     //      $('#autoSave').fadeOut();


                     // }, 5000); 
                     /*setTimeout(function() {
                        // $('#autoSave').fadeOut("slow");
                        $('#autoSave').fadeIn().text("color successfully updated");
                    }, 5000 ); */


                }  
           });  

 } 

 $('.jscolor').on('change', function(e){autoSave()});
});  
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search