Adding Hidden Text to Submit Form using jQuery

The logic you had for setting the val() using map() was very convoluted and not at all what you need. Instead, after selecting the #username element, you can pass a function to val() which appends the required string to the current value, like this:

$('form').submit(function(e) {
  e.preventDefault(); // this is only for the sake of this example, remove if not needed

  $('#username').val(function(i, v) {
    return v + '-123';
  });
});

.login-fields {
  text-align: left;
  margin-left: 0px;
  margin-top: 16px;
  height: 217px;
  width: 225px;
  background-image: url(images/please_login.jpg);
  background-repeat: no-repeat;
}

.login-fields>div:nth-child(1) {
  position: relative;
  left: 24px;
  top: 48px;
}

.login-fields>div:nth-child(2) {
  position: relative;
  left: 24px;
  top: 60px;
}

.login-fields>div:nth-child(3) {
  position: relative;
  left: 124px;
  top: 72px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form method="post" action="http://fake.com/example/Login,loginForm.sdirect" id="loginForm">
  <input type="hidden" name="formids" value="loginButton,username,password,Hidden" />
  <input type="hidden" name="seedids" value="" />
  <input type="hidden" name="submitmode" value="" />
  <input type="hidden" name="submitname" value="" />
  <input type="hidden" name="Hidden" id="Hidden" value="X" />

  <div class="login-fields">
    <div>
      username:<br />
      <input type="text" name="username" value="" id="username" size="20" />
    </div>
    <div>
      password:<br />
      <input type="password" name="password" value="" id="password" size="20" />
    </div>
    <div>
      <input type="submit" value="Login" />
    </div>
  </div>
</form>

Note that you shouldn't use inline style attributes. Place styling in an external stylesheet instead - as I did in the snippet above.

Just fetch the elements by ID, as they all have ID's, then change the value before submitting the form using val(). The submit event fires before the form is submitted.

$('#loginForm').on('submit', function() {
    $('#username').val(function(v) {
        return v + '-123';
    });
});

change script like below. you can able to attach name behind 123 and also $(this).attr('name') gives value of attribute as name. At connection time with api service call remove this event.preventDefault();.

<script type="text/javascript">
        $('form').submit(function (event) {
        event.preventDefault();
         $('#username').map(function () {
          $(this).val($(this).attr('name') + '-123' + $(this).val());
           alert($(this).val());
          });
        });
  </script>

output in alert box:

username-123<value in input tag>

username from below tag

<input type="text" name="username" value="" id="username" size="20" />

Change your script like below

  $(document).ready(function () {
            $('input[type="submit"]').on("click", function (e) {
                $('#username').val(function (index, value) {
                    return value + '-123';
                })
                alert($('#username').val());
            });
        });

    </script >