在提交之前向 HTML 表单的输入框中的现有值添加附加字符串

【问题标题】：Adding additional string to an existing value in a HTML form's input box before submission在提交之前向 HTML 表单的输入框中的现有值添加附加字符串
【发布时间】：2018-11-25 23:28:33
【问题描述】：

我有一个带有输入框的表单，我想在提交之前更改值。

例子：

<form action="savefiends.php" method="post">
    <input type="text" name="id" value="123456"><br>
    <input type="submit">
</form>

如何在不编辑savefiends.php 的情况下将值保存为123456@example.com？

附：用户可以编辑值

【问题讨论】：

标签： html forms post input save

【解决方案1】：

您可以使用onsubmit 属性，如下面的sn-p 所示。

注意：我添加了额外的检查以避免附加"@example.com"（如果已经存在）。另外我将action属性内容替换为"#"以避免表单提交。

function resetId(){
  var idInput = document.getElementById("id");
  var suffix="@example.com";
  // just to check if @example.com is already present
  var checkRegExp=new RegExp(suffix + "$"); 
  if (!idInput.value.match(checkRegExp)) idInput.value +="@example.com";
  alert("Value before submit:" + idInput.value);
}

<form action="#" method="post" onsubmit="resetId();return false">
    <input type="text" name="id" value="123456" id="id"><br>
    <input type="submit">
</form>

【讨论】：