Question

我有一个包含用户名和密码输入字段的表单。在提交之前，我想在用户名后附加一个字符串：“ _ 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”，则会添加该按钮，但我不希望用户看到/注意这一点。我该怎么做？

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

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

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

Answer 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),
  })
}

Answer 4

您可以通过SELECT contract_no, LOWER(REPLACE(REPLACE(color, '.', ' '), '-', ' ')) ROUND(SUM(meter_yard_length), 0) AS TotaL_Length_Contract, ROUND(SUM(IF(quality = 'A', meter_yard_length, 0)), 0) AS A_Quality_length, ROUND(SUM(IF(quality = 'B', meter_yard_length, 0)), 0) AS B_Quality_length FROM yourTable GROUP BY contract_no, LOWER(REPLACE(REPLACE(color, '.', ' '), '-', ' '));方法进行延迟

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

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

4 个答案: