在提交之前操作表单值而不向用户显示

Manipulating form values before submitting without displaying it to the user?

本文关键字：用户 显示 表单 提交 操作 操作表      更新时间：2023-09-26

很抱歉标题含糊不清，但我不知道如何用简短的句子更准确地描述这个问题。

我的问题如下：

当我在 onsubmit 回调函数中操作表单值时，如以下示例所示，浏览器有时会在提交表单时和转发到结果页面之前向用户显示更改的输入/文本区域值。

<html>
<head>
  <script type="text/javascript">
    function manipulateForm() {
      document.forms["myForm"]["myField"].value = "new value";
      return true;
    }
  </script>
</head>
<body>
  <form name="myForm" action="submit.htm" onsubmit="manipulateForm()">
    <input type="text" name="myField">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

有什么办法可以规避这一点吗？我想要的是发送经过操纵的表单值，但用户实际上看不到表单数据已更改。

如何

创建两个表单，一个是假的，另一个是真的......用户以虚假形式输入数据。提交时调用函数 操纵表单...阻止了虚假表单的默认提交操作。 并从假货中提取数据..数据处理。。并设置在真实形式中..然后触发真实的表单提交...
类似的东西..这里有一个例子..

 <div>
   <form onsubmit="return manipulateForm()">
    <input type="text" id="myFieldFake">
    <input type="submit" value="Submit">
  </form>
     <form id="myForm"  action="javascript:alert('Replace with your form action')" style="display:none" >
    <input hidden="true" type="text" id="myFieldReal">
    <input  hidden="true" type="submit" value="Submit">
  </form>
  </div>

对于操作功能... 

 function manipulateForm() {
  var myFieldValue = document.getElementById("myFieldFake").value;
 // do something with myFieldValue... 
 document.getElementById("myFieldReal").value = myFieldValue ;
document.getElementById("myForm").submit() ;
      return false ;
    }

js小提琴

没有理由制作第二个表单，onsubmit函数可以在提交数据之前更改数据。

在下面的示例中，数据将在发送之前被更改。

<html>
<form id=myform target=apage.html onsubmit=alter()>
<input type=text id=name name=name>
<input type=age id=age name=age>
<input type=submit>
</html>
<script>
function alter(){
    age.value=Number(age.value)+10;
    name.value="My your Is "+name.value;
}
</script>
相关文章：