使用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 >