提交表单时更改隐藏的输入值答案

【问题标题】：Change hidden input value when form is submitted提交表单时更改隐藏的输入值
【发布时间】：2020-02-12 18:15:06
【问题描述】：

我有一个隐藏的状态字段，D&B 使用 2 个字母的状态代码自动填充。提交表格后，我希望将其更改为完整的州名（例如 NY 将变为 New York）。最好的方法是什么？

【问题讨论】：

请附上您的代码。

【解决方案1】：

您可以将onsubmit 属性添加到您的form 元素：

<form onsubmit="return changeValue();" id="my-form">
    <input type="hidden" value="NY" id="state-code">
</form>

然后添加以下javascript：

var stateNames = {
  NY: "New York",
  EG: "Example City"
}

function changeValue() {

  hiddenInput = document.getElementById("state-code")

  currentValue = hiddenInput.value;
  newValue = stateNames[currentValue];

  hiddenInput.value = newValue;
}

【讨论】：

这看起来很简单。但是，每个表单提交的状态各不相同。 javascript 将如何识别被缩写的状态？
@Kat 使用 javascript 对象来存储州名及其缩写。我已经编辑了问题以建议如何做到这一点。

【解决方案2】：

您应该拥有包含短状态名称和完整状态名称之间映射的对象

let statesNameMap = {
        NY: 'New York',
        IL: 'Illinois',
}

例如 formValues 是您应该提交的数据

let formValues = {state: 'NY', Name: 'Lorem' }
const handleSubmit = () => {
    formValues.state = stateNameMap[formValues.state];
    // Result: formValues = {state: "New York", Name: "Lorem"}
    // handle submission logic
}

【讨论】：