HTML表單調用后隱藏字段

Question

我正在嘗試對登錄頁面進行后期處理。 用戶手動輸入用戶名/密碼。 但是，我希望在用戶輸入用戶名時將以下字段設置為name = username。

我在下面有這些字段。 我有一個隱藏字段，想用用戶手動輸入的用戶名替換用戶名。

<input class="form-control" type="hidden" required name="username" placeholder="Username">
<input class="form-control" type="password" required name="password" placeholder="Password">

<input class="form-control" type="hidden" required name="arg" placeholder="name">

所以必須

username=stack
password=userset
arg='name=stack'

Answer 1

如果我正確理解了您想做什么，這聽起來像是您希望在用戶每次更改用戶名文本輸入框中的值時獲取input DOM對象並更改其占位符屬性。

您可以使用getElementsByName('NAME')[0]來獲取DOM元素（假設名稱是唯一的，或者甚至最好使用ID來確保它們是唯一的）。

然后附加一個函數以偵聽更改，並使用inputDomObject.addEventListener("change", functionToHandleChanges);交換placeholder的新值inputDomObject.addEventListener("change", functionToHandleChanges);

您可以使用placeholderDomObject.setAttribute("placeholder", "thingToSetItTo");在輸入的DOM對象上（因此在頁面上）設置placeholder值placeholderDomObject.setAttribute("placeholder", "thingToSetItTo");

如果您需要任何澄清，請發表評論:)

Answer 2

您可以嘗試使用jQuery。 在這里，我有一個示例，其中用戶仍未提交表單。

$(document).ready(function() {

    $("input[name='username']").keyup(function() {
         $("input[name='arg']").val("'name=" + $(this).val() + "'");
    });

});

如果您真的想獲取$ _POST值，則必須使用一些php將它們序列化。

<script type="text/javascript">
    var $post = <?php echo json_encode($_POST); ?>;
</script>

然后，您可以使用$ post [“ username”]訪問變量。 但我不明白為什么要使用此解決方案，因為您可以使用常規php來做到這一點。

在您的代碼中，該代碼應如下所示：

<script type="text/javascript">

     $(document).ready(function() {
        $('form#form1').submit(function(){
            $.ajax({type: "Post",
                    url: $('form').attr('action'),
                    data: $(this).serialize(),
                    success: function(data, status, xhr) {
                        alert("Login successful. Please press OK to be redirected. Redirecting in 5 seconds.");
                        window.setTimeout(function(){window.location.href = "/login"},5000);},
                        error: function(data, status, xhr) {
                            $('form').trigger("reset");
                            alert("Failed to login. Please try again.");
                        }
                    });

                return false;
                alert("AJAX request successfully completed");
            });



          $("input[name='username']").keyup(function() {
              $("input[name='arg']").val("'name=" + $(this).val() + "'");
          });
     });

</script>