如何在此脚本中使用 onchange 事件而不是 setInterval

Question

在我的 laravel 项目中，我有颜色选择器输入字段，我想在其中自动保存数据库中的值。在本节中，我粘贴了运行正常的脚本。但问题是这是在间隔后继续保存值。但我想要什么？ 当我单击输入字段时，事件将触发而不单击它不会继续。 所以请任何人都可以帮助我如何使用 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（我猜）可能会有特定事件。在这种情况下，每次您的颜色发生变化时，都会调用您的函数。您可能应该在颜色选择器关闭时保存数据。

$(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，你可以绑定 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>