求助：jQuery修改input值后表单提交无法携带新值

问题场景 #

点击.liner类的列表项后，输入框显示值已更新，但表单提交后后端始终获取不到新的Zip值，只能拿到默认值；手动修改输入框后点击提交按钮却能正常工作。

原问题代码 #

表单HTML

<form id="newZipSubmit" class="mb-25" action="<?php echo get_permalink(); ?>" method="post">
  <input type="text" name="newZip" placeholder="Another Zip" id="newZip">
  <button id="submitNewZip" name="search" type="submit" class="btn btn-primary">Search</button>
    <h4>Click to see Nearby Zips:</h4>
    <ul>
      <li class="liner"><?php echo $nearbyZip1;?></li>
      <li class="liner"><?php echo $nearbyZip2;?></li>
      <li class="liner"><?php echo $nearbyZip3;?></li>
      <li class="liner"""><?php echo $nearbyZip4;?></li> <!-- 注意此处有多余引号，建议修正 -->
      <li class="liner"><?php echo $nearbyZip5;?></li>
    </ul>
</form>

原JS代码

$(document).ready(function() {
  $('.liner').on('click', function(){
    $('#newZip').attr('value', $(this).text());
    $('#newZipSubmit').submit();
  });
});

后端PHP代码

if(isset($_POST['search'])) {
  $searchZip = $_POST['newZip'];
} else {
  $searchZip = '77040';
}

解决方案 #

修改JS代码，将更新输入框值的方式替换为以下写法：

$(document).ready(function() {
  $('.liner').on('click', function(){
    $('#newZip').val($(this).text());
    $('#newZipSubmit').submit();
  });
});

同时建议修正HTML中<li class="liner""的多余引号问题，避免可能触发其他异常。

内容的提问来源于stack exchange，提问作者Jerome Dela Cruz