如何在AJAX查询匹配对应ID完成前禁用表单提交按钮？

你可以按照以下步骤修改代码实现需求： #

第一步：修复HTML结构与添加提交按钮 #

你现有代码里存在表单提前闭合的问题，search-to输入框不在表单范围内，提交时对应值不会传到后端，先调整结构，同时添加默认禁用的提交按钮：

<?php if ($redirects): ?>
  <form name="redirectform" action="admin/redirects" method="post">
      <div>    
                <input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/>
                <datalist id="search-from-list">
                    <?php foreach ($allredirects as $allredirect){ ?>
                      <option value="<?php echo $allredirect->from; ?>" id="<?php echo $allredirect->id; ?>" />
                    <?php } ?>
                </datalist>
            </div>

            <input type="hidden" name="linkid" id="linkid" />
            <input type="hidden" name="linkidto" id="linkidto" />

            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
      </div>
      
          <input list="search-to-list" id="search-to" name="search-to" style="width:100%;" />
          <datalist id="search-to-list">
              <?php foreach ($allredirects as $allredirect){ ?>
                <option value="<?php echo $allredirect->to; ?>" id="<?php echo $allredirect->id; ?>" />
              <?php } ?>
          </datalist>
      </div>
      <!-- 新增默认禁用的提交按钮 -->
      <button type="submit" id="submit-btn" disabled>提交搜索</button>
  <!-- 删掉原来多余的</form>，下面的form_close会输出闭合标签 -->
    <table>
        <?php foreach ($redirects as $redirect): ?>
        <tr>
          <td><?php echo $from=str_replace('%', '*', $redirect->from);?></td>
          <td><?php echo $redirect->to;?></td>
        </tr>
        <?php endforeach ?>
    </table>
    <?php echo form_close() ?> </div>
<?php else: ?>
    <div class="no_data">No Data</div>
<?php endif ?>

第二步：替换JS逻辑 #

你之前的代码存在两个问题：

1. 使用select事件绑定，只有选中文本时才触发，无法监听到datalist选择动作
2. 空的AJAX请求没有实际逻辑，反而导致提交按钮无法正常启用
   另外你当前的id是直接从页面渲染好的datalist中读取，不需要异步请求，不存在等待耗时，修改后的JS如下：

<script type="text/javascript">
$(document).ready(function(){
  const $submitBtn = $('#submit-btn');

  // 监听来源输入框选择/输入动作
  $("#search-from").on('input change', function(){
    const inputVal = $(this).val();
    const matchId = $('#search-from-list').find(`option[value="${inputVal}"]`).attr('id');
    
    // 赋值隐藏字段
    $('#linkid').val(matchId || '');
    // 清空另一个输入框的关联值，避免和控制器逻辑冲突
    $('#linkidto').val('');
    $('#search-to').val('');

    // 匹配到id则启用提交按钮，否则保持禁用
    $submitBtn.prop('disabled', !matchId);
  });

  // 监听目标输入框选择/输入动作
  $("#search-to").on('input change', function(){
    const inputVal = $(this).val();
    const matchId = $('#search-to-list').find(`option[value="${inputVal}"]`).attr('id');
    
    $('#linkidto').val(matchId || '');
    $('#linkid').val('');
    $('#search-from').val('');

    $submitBtn.prop('disabled', !matchId);
  });
});
</script>

可选：如果确实需要异步请求查询id #

如果你的业务逻辑需要调用后端接口查询对应id，可将对应输入框的事件逻辑替换为以下代码，同时记得提前在页面注入csrf参数供AJAX调用：

// 页面头部提前注入csrf参数
<script>
const csrfName = '<?php echo $this->security->get_csrf_token_name();?>';
const csrfHash = '<?php echo $this->security->get_csrf_hash();?>';
</script>

// 输入框事件逻辑
$("#search-from").on('input change', function(){
  const inputVal = $(this).val();
  // 发起请求前先禁用提交按钮
  $submitBtn.prop('disabled', true);

  $.ajax({
    url: '你的后端查询id接口地址',
    type: 'POST',
    data: {
      search_val: inputVal,
      [csrfName]: csrfHash
    },
    success: function(res){
      // 假设接口返回格式为 {code:200, id:xxx}
      if(res && res.id) {
        $('#linkid').val(res.id);
        $('#linkidto').val('');
        $('#search-to').val('');
        $submitBtn.prop('disabled', false);
      }
    }
  });
});

内容的提问来源于stack exchange，提问作者H2O