CODEWITHSUNDEEP
javascriptjqueryhtml
Jack
Jack

Reputation: 109

Change form (input) value without showing user

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.

Upvotes: 0

Views: 642

Answers (4)

Negi Rox
Negi Rox

Reputation: 3922

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>

Upvotes: 1

Hien Nguyen
Hien Nguyen

Reputation: 18975

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>

Upvotes: 0

stwilz
stwilz

Reputation: 2397

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

Upvotes: 0

Rahul
Rahul

Reputation: 18557

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>

Upvotes: 1

Related Questions