как использовать событие onchage вместо setInterval в этом скрипте

Question

в моем laravel проекте у меня есть поле ввода colorpicker, где я хочу автоматически сохранить значение в базе данных. В этом разделе я вставил скрипт, который работает правильно. Но проблема в том, что продолжать сохранять значение после интервала. Но чего я хочу? Когда я щелкаю по полю ввода, событие запускается без щелчка, оно не продолжается так что, пожалуйста, кто-нибудь может мне помочь, как я могу использовать событие onchange для этого. Я вставил код ниже, пожалуйста, проверьте его и дайте мне знать

<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>

это поле ввода лезвия

     <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>

Answer 1

Этот ответ основан на JQuery, но если вы используете jscolor. js (я полагаю) может быть указанное c событие. В этом случае каждый раз, когда ваш цвет меняется, вызывается ваша функция. Вам, вероятно, следует сохранить данные, когда средство выбора цветов закрыто.

$(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>

---

Второе решение

Если мое предположение верно, это решение с 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>

Answer 2

Таким образом, вы можете добавить прослушиватель событий в элемент .jscolor. для Jquery вы можете привязать ()

<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>