2

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

我的问题如下：

当我在回调函数中操作表单值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>

有什么办法可以规避这种情况吗？我想要的是发送操纵的表单值，但没有用户实际看到表单数据已更改。

4

2 回答 2

4

如何创建两个表单，一个是假的，另一个是真实的......用户在假表单中输入数据......当提交时调用函数操作表单......假表单的默认提交操作被阻止......以及来自的数据假冒被提取..操纵..并以真实形式设置..然后触发真实的表单提交......
类似的东西..这是一个例子..

 <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 ;
    }

jsFiddle

于 2013-10-13T14:40:44.070 回答
1

没有理由制作第二个表单，该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>
于 2020-03-19T20:00:49.493 回答