添加隱藏文本使用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

通過ID就獲取這些元素，因爲它們都具有的ID，然後提交使用val()形式改變之前的值。在提交表單之前觸發事件submit。

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

Answer 2

你不得不使用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 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 >