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

使用val()设置map()的逻辑非常复杂，根本不需要。相反，在选择#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事件。

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

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

4 个答案: