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

Posted 2023-05-07

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

【英文标题】：Adding additional string to an existing value in a HTML form's input box before submission

【发布时间】：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 的情况下将值保存为[e-mail]？

附：用户可以编辑值

【参考方案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>