Question

对于模糊的标题感到抱歉，但我不知道如何用一个简短的句子更准确地描述问题。

我的问题如下：

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

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

有没有办法绕过这个？我想要的是发送被操纵的表单值，但没有用户实际看到表单数据已被更改。

谢谢！

Answer 1

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

 <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

Answer 2

没有理由采用第二种形式，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>

在提交之前处理表单值而不将其显示给用户？

2 个答案: