使用 jQuery 添加隐藏文本以提交表单

Question

所以我得到了这个登录表单，我想做的是在幕后为他们的用户名附加一条额外的数据，例如，假设它是 -123，因为这将决定他们登录哪个站点进入。

我的 HTML 页面中有以下内容，但不幸的是，这不起作用。有什么想法吗？

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

<script type="text/javascript">
$('submit').click(function () {
 $('input[username="username[]"]').map(function () {
  $(this).val($(this).attr('username') + '-123' + $(this).val());
   alert($(this).val());
  });
});

<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" style="text-align:left; margin-left:0px; margin-top:16px; height:217px; width:225px; background-image:url(images/please_login.jpg); background-repeat: no-repeat;">
     <div style="position:relative; left:24px; top:48px;">username:<br /><input type="text" name="username" value="" id="username" size="20" /></div>
 <div style="position:relative; left:24px; top:60px;">password:<br /><input type="password" name="password" value="" id="password" size="20" /></div>
 <div style="position:relative; left:124px; top:72px;"><input type="submit" value="Login" /></div>
</div>
</form>

Answer 1

您使用map() 设置val() 的逻辑非常复杂，根本不是您需要的。相反，在选择 #username 元素后，您可以将一个函数传递给 val()，它将所需的字符串附加到当前值，如下所示：

$('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>

请注意，您不应使用内联 style 属性。而是将样式放在外部样式表中 - 就像我在上面的 sn-p 中所做的那样。

Answer 2

只需按 ID 获取元素，因为它们都有 ID，然后在使用 val() 提交表单之前更改值。 submit 事件在表单提交之前触发。

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

Answer 3

如下更改脚本。您可以在 123 后面附加名称，并且 $(this).attr('name') 将属性值作为名称。在与 api 服务调用连接时删除此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>

在警告框中输出：

username-123<value in input tag>

标签下方的用户名

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

Answer 4

如下更改你的脚本

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

    </script >