下拉菜单选择Other后弹出文本框，数据库存储值为Other而非输入内容如何解决

问题原因 #

后端存储职业信息时读取的是表单中OCCUPATION字段的值，你选择「Other」时，下拉框的OCCUPATION值固定为「Other」，额外弹出的输入框参数名为other，后端默认不会把该值替换为职业字段的存储值，因此入库内容始终是「Other」。

解决方案 #

我们可以在表单提交时做判断：如果下拉框选的是「Other」，就把输入框里的内容赋值给OCCUPATION字段再提交。
需要修改的部分如下：

1. 新增表单提交校验的JS函数
2. 给form标签绑定提交事件
3. 给弹出的输入框加id方便取值

修改后的完整代码：

<head>  
<script type="text/javascript">
function showfield(name){
  if(name=='Other'){
    document.getElementById('div1').innerHTML='Other: <input type="text" id="other_input" name="other" />';
  } else {
    document.getElementById('div1').innerHTML='';
  }
}

// 新增提交处理函数
function handleSubmit(){
  const selectVal = document.getElementById('OCCUPATION').value;
  const otherInput = document.getElementById('other_input');
  // 如果选了Other且输入框有值，就把下拉框的值替换成输入的内容
  if(selectVal == 'Other' && otherInput && otherInput.value.trim()){
    document.getElementById('OCCUPATION').value = otherInput.value.trim();
  }
  return true;
}
</script> 
</head>
<!-- 给form加onsubmit事件 -->
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post" onsubmit="return handleSubmit()">
<div class="box box-primary borderless">
  <div class="box-header">
  <h3 class="box-title">Website Subscribers</h3>
  </div>
  <select name="OCCUPATION" id="OCCUPATION" 
  onchange="showfield(this.options[this.selectedIndex].value)">
    <option selected="selected">Please select ...</option>
    <option value="Student">Student</option>
    <option value="Educator">Educator</option>
    <option value="Designer">Designer</option>
    <option value="Other">Other</option>
  </select>
  <div id="div1"></div>
  <div class="box-footer">
    <div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
    <div class="clearfix"> </div>
  </div>
</div>
</form>

可选补充方案（如果可以修改后端代码） #

也可以在后端接收参数时做判断：如果接收到的OCCUPATION值为Other，且同时存在非空的other参数，就用other参数的值作为职业字段入库，无需修改前端代码。

内容的提问来源于stack exchange，提问作者Mr.Joe