Change form (input) value without showing user

Question

I have a form containing username and password inputfields. Before submitting I would like to append the username with a string: "_test". I would like to do this, but without the user knowing/seeing this change.

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>

If I do something like this and the user enters "Albert", the username will briefly change into "Albert_test" before the form is submitted and the user will notice that his username has changed, I don't want this to happen. I want the visible username to remain "Albert" but I want "Albert_test" to be submitted.

An example; https://codepen.io/anon/pen/MRGmyQ As you can see, if you click the button "_test" is added, but I don't want the user to see/notice this. How can I accomplish this?

Edit: People are asking why i'm not doing this server-side. If I had any control over the server-side this would indeed be a breeze, unfortunately I can only make changes to the front-end side of things.

share with us your submit code like your URL and what data you want to submit in your server-side — M.Hemant
– M.Hemant, Commented Apr 19, 2019 at 9:28
Put a second hidden input with name="username" and remove the name from the first input element (see: codepen.io/anon/pen/NmMjwv) — Recep Karadas
– Recep Karadas, Commented Apr 19, 2019 at 9:29
Why would you try and do that on the client side when it's so easy to do so unnoticed on server side? — user5327930
– user5327930, Commented Apr 19, 2019 at 9:33
If we don't want to show to a user then why we are doing at client side why not at server side? — M.Hemant
– M.Hemant, Commented Apr 19, 2019 at 9:36

Negi Rox · Accepted Answer · 2019-04-19 09:49:16Z

1

you can use hidden input. I modified your code. Submit button is added just for showing an output.

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>

answered Apr 19, 2019 at 9:49

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

Decided to go for this solution, although @Recep Karadas was first, I accepted this as he only gave a comment and this is an actual answer.

Rahul · Accepted Answer · 2019-04-19 09:31:00Z

The scenario you are trying is not possible, but there is an alternative where we can store that value in hidden variable tusername and use it.

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>

stwilz · Accepted Answer · 2019-04-19 09:31:41Z

0

Instead of relying on the form submitting via HTML can you use AJAX?

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

answered Apr 19, 2019 at 9:31

stwilz

2,4172 gold badges23 silver badges26 bronze badges

2 Comments

M.Hemant Over a year ago

If we don't want to show to a user then why we are doing at client side why not at server side?

stwilz Over a year ago

That's true @M.Hemant. You could just do it server side. However @jack might have to handle scenarios where the client needs to post values that are appended with _test and when not.

Hien Nguyen · Accepted Answer · 2019-04-19 09:37:03Z

0

You can delay by setTimeout method

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>

answered Apr 19, 2019 at 9:37

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Change form (input) value without showing user

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related