如果第一次点击是提交，onChange 不起作用

Question

不确定这是否可以解决，或者我是否需要查看其他选项，但这是我的问题。

我有一个文本输入框，当输入文本时，它会触发一个 ajax 函数并将数据写入数据库。如果我在框中写然后 click/tab 开箱即用，这很好用。页面上还有一个提交按钮，如果我在输入框中键入并单击该按钮，则不会触发 ajax。

<form name="cart_quantity" 
action="http://127.0.0.1/360v3/product_info.php? 
products_id=20%7B3%7D28&amp;action=add_product" method="post" role="form"> 
<input name="formid" type="hidden" 
value="e0cfde314f5da74abe48a886de30aea6c996c334cd40521209a181caba46b763" 
class="form-control">

<div class="row is-product">
<div class="col-sm-12 cm-pi-modular">
<div class="row">


<div class="col-sm-4">

<div class="col-sm-12 text-right mt-2 pi-text-input">

  <div class="form-group row">
      <label class="col-form-label col-sm-3 text-left text-sm-right">Name 
</label>
   <div class="col-sm-9">
       <div id="tagit">
<input name="name" type="text" class="form-control" id="name">           
           <input name="id[3]" type="hidden" class="form-control" 
id="input_3" value="30">
       </div>
      </div>
      </div>
</div>

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

<script type="text/javascript">
$( document ).on( 'blur',  '#tagit #name', function(){
    name = $('#name').val();
pID = $('#pID').val();
$.ajax({
    type: "POST", 
    url: "ext/scripts/textAttribute.php", 
    data: "name=" + name + "&pID=" + pID + "&type=insert",
    cache: true, 
    success: function(data){
      $("#input_3").val(data);
    }
  });
  
});
</script>

<div class="col-sm-12 pi-buy-button mt-2">
<button data-has-attributes="1" data-in-stock="0" data-product-id="20" 
class="btn btn-success btn-block btn-lg btn-product-info btn-buy" 
type="submit"> <span class="fas fa-shopping-cart" aria-hidden="true"> 
</span> Add To Cart</button><input name="products_id" type="hidden" 
value="20" class="form-control"></div>

  </div></div>

</div>
</div>

</form>

textAttribute.php 的内容已被省略，因为我认为它与问题无关。

到目前为止，我已经将 onChange 更改为 onBlur，但同样的问题和 onInput 但是这会触发每次击键的功能。

我错过了什么？

更新

我已将 onChange 更改为 onInput，现在正在寻找使用计时器或类似工具将其运行次数限制为一次的方法。

Answer 1

您好，如果您正在研究如何限制它，可以使用所谓的“去抖动”功能。

基本上您可以限制某些操作的处理速度。

如果第一次点击是提交，onChange 不起作用

onChange not working if first click is on submit

javascript

ajax

jquery