使用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属性。 而是将样式放在外部样式表中，就像我在上面的代码段中所做的那样。

Answer 2

只需按ID提取元素，因为它们都具有ID，然后在使用val()提交表单之前更改值。 submit表单之前会触发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 >