在选择更改事件上通过 jquery 提交表单

Posted 2023-03-14

【中文标题】在选择更改事件上通过 jquery 提交表单

【英文标题】：submit form via jquery on select change event

【发布时间】：2018-09-02 04:45:13

【问题描述】：

我正在尝试通过jQuery提交表单时，在SELECT字段中发生更改事件时：

$('select#slc_level').change(function(event)
event.preventDefault();
console.log('changed')
$('form#formLevel').submit();

但是，Jquery 似乎无法捕获该事件。没有错误消息。 我在表单中有三个“小部件”，但选择字段位于“小部件”级别。 奇怪的是，Jquery 可以以我在此页面中的另一种形式捕获数字对象小部件中输入文件字段的更改事件。 我页面中的整个代码是：

<div class='col-md-3'>
<div class="widget">
  <!-- Level widget -->
  <h4 class="text-info">Níveis</h4>
  @if(count($collection->collections) > 0)
    <ul class="list-group">
    @foreach($collection->collections as $sub_collection)
      <li class="list-group-item">$sub_collection->name</li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif
    <form method="post" action="route('collection.form_level')" id="formLevel">
    <select id="slc_level" name="level_id" class="custom-select" autofocus>
      <option>Selecione ...</option>
      @foreach($levels as $level)
      <option value=" $level->id "> $level->name </option>
      @endforeach
    </select>
     csrf_field() 
    <input type="hidden" name="collection_id" value="$collection->id">
  </form>
</div>
<hr>

<!-- Digital Object widget -->
<div class="widget">
  <h4 class="text-info">Objeto Digital</h4>
  @if(count($collection->objects) > 0)
    <ul class="list-group">
    @foreach($collection->objects as $object)
      <li class="list-group-item">str_limit($object->path,20) - $object->type - round(Storage::size($object->path)/(1024*1024),2)MB
        <a id="$object->id" href="#" class="delobject text-danger" title="Remover item">(x)</a>
      </li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif
  <form method="post" action="route('object.attach')" enctype="multipart/form-data" id="formObject">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" name="path">
    <label class="custom-file-label" for="customFile">Escolher arquivo</label>
  </div>
   csrf_field() 
  <input type="hidden" name="collection_id" value="$collection->id">
  <input type="hidden" name="type" value="jpeg">
  </form> 
</div>
<hr>

<!-- Dimension widget -->
<div class="widget">
  <h4 class="text-info">Dimensão e suporte</h4>
  @if(count($collection->dimensions) > 0)
    <ul class="list-group">
    @foreach($collection->dimensions as $dimension)
      <li class="list-group-item">$dimension->name, ($dimension->size) $dimension->type
        <a id="$dimension->id" href="#" class="deldimension text-danger" title="Remover item">(x)</a>
      </li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif        
  <button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#dimensionModal">Inserir</button>
</div>
<hr>

<!-- Action widget -->
<div class="widget">
  <h4 class="text-info">Operações</h4>
  <a href="route('collection.edit',['collection_id'=>$collection->id])" class="btn btn-warning btn-sm btn-block">Editar</a>
  <button type="button" class="btn btn-danger btn-sm btn-block" id="btDelCollection" data-toggle="modal" data-target="#deleteModal" >Excluir</button>
  <a href="route('collection.publish',['collection_id'=>$collection->id]) " class="btn btn-primary btn-sm btn-block">($collection->published)?'Não publicar':'Publicar'</a>
</div>  

出了什么问题？

【参考方案1】：

我认为你不需要把 select#slc'_level

$('select#slc_level').change(function(event)
event.preventDefault();
console.log('changed')
$('form#formLevel').submit();

你可以直接把id 喜欢

$('#slc_level').change(function(event)
event.preventDefault();
console.log('changed')
$('#formLevel').submit();

【参考方案2】：

试试jqueryon方法

$(document).on("change",'#slc_level',function()
  $("#formLevel").submit();
);

【参考方案3】：

试试这个

$("#slc_level").change(function()
    $('#formLevel').submit();
);