更改表单（输入）值而不显示用户答案

【问题标题】：Change form (input) value without showing user更改表单（输入）值而不显示用户
【发布时间】：2019-04-19 09:24:54
【问题描述】：

我有一个包含用户名和密码输入字段的表单。在提交之前，我想在用户名后面附加一个字符串：“_test”。我想这样做，但用户不知道/看到此更改。

function func(form){
   var userName = $("#username").val() + "_test";
   $("#username").val(userName);
   return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest" name="formtest" action="" method="post" onsubmit="return func(this)" >
   <input name="username" type="text" autofocus id="username"> 
</form>

如果我这样做并且用户输入“Albert”，则在提交表单之前用户名将短暂更改为“Albert_test”，并且用户会注意到他的用户名已更改，我不希望这种情况发生.我希望可见的用户名保持为“Albert”，但我希望提交“Albert_test”。

一个例子； https://codepen.io/anon/pen/MRGmyQ 如您所见，如果您单击按钮“_test”，则会添加，但我不希望用户看到/注意到这一点。我怎样才能做到这一点？

编辑：人们问我为什么不做这个服务器端。如果我对服务器端有任何控制权，这确实是一件轻而易举的事，不幸的是我只能对前端进行更改。

【问题讨论】：

与我们分享您的提交代码，例如您的 URL 以及您想在服务器端提交哪些数据
使用 name="username" 放置第二个隐藏输入并从第一个输入元素中删除名称（请参阅：codepen.io/anon/pen/NmMjwv）
在服务器端很容易被忽视的情况下，你为什么要在客户端尝试这样做？
如果我们不想展示给用户，那为什么我们在客户端做，为什么不在服务器端呢？

标签： javascript jquery html

【解决方案1】：

您可以使用隐藏输入。我修改了你的代码。添加提交按钮只是为了显示输出。

function func(){
   var userName = $("#username").val() + "_test";
   $("#usernamenew").val(userName); 
   console.log( $("#usernamenew").val())
   return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest" name="formtest" action="" method="post" onsubmit="return func(this)" >
   <input name="username" type="text" autofocus id="username"> 
   <input name="usernamenew" type="hidden" id="usernamenew"> 
    <input name="submit" type="button" id="submit" onclick="func(this)" value="submit">
</form>

【讨论】：

决定采用这个解决方案，虽然@Recep Karadas 是第一个，但我接受了这个，因为他只发表了评论，这是一个实际的答案。

【解决方案2】：

您尝试的场景是不可能的，但有一个替代方案，我们可以将该值存储在隐藏变量 tusername 中并使用它。

function func(form){
   var userName = $("#username").val() + "_test";
   $("#tusername").val(userName);
   console.log($("#tusername").val()); 
   return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest" name="formtest" action="" method="post" onsubmit="return func(this)" >
   <input name="username" type="text" autofocus id="username">
  <input type="hidden" name="tusername" id="tusername">
                              <input id="sms_submit" type="submit" class="ppButtonNormal" value="Click"/>

</form>

【讨论】：

【解决方案3】：

您可以使用 AJAX 代替依赖通过 HTML 提交的表单吗？

const func = event => {
  event.preventDefault();
  const payload = {}
  $('#formtest input').each(item => {
    payload[item.name] = item.val() + "_test";
  });

  fetch('/your-submit-url', {
    method: 'POST',
    body: JSON.stringify(payload),
  })
}

【讨论】：

如果我们不想展示给用户，那为什么我们在客户端做，为什么不在服务器端呢？
这是真的@M.Hemant。你可以在服务器端做。但是，@jack 可能必须处理客户端需要发布附加了 _test 的值以及何时不需要的情况。

【解决方案4】：

您可以通过setTimeout方法延迟

function func(form){
   setTimeout(function(){
      var userName = $("#username").val() + "_test";
      $("#username").val(userName);
   }, 1000);
   return true;
}

function func(form){
   setTimeout(function(){
      var userName = $("#username").val() + "_test";
      $("#username").val(userName);
   }, 1000);
   return true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest" name="formtest" action="" method="post" onsubmit="return func(this)" >
   <input name="username" type="text" autofocus id="username"> 
</form>

【讨论】：