HTML form post call hidden field

Question

I am trying to do a post call for the login page. User manually enters username/password. However, I want the below field to be set name=username when user inputs his/her username.

I have these fields below. And I have a hidden field and would like to replace the username bit with the username that user manually enters.

<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">

So it has to be

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

Answer 1

If I'm understanding correctly what you want to do, it sounds like you want to get the input DOM object and change its placeholder attribute every time the user changes the value in the username text input box.

You can grab the DOM elements using getElementsByName('NAME')[0] (assuming the names are unique, or even better use IDs instead to make sure they are unique).

Then attach a function to listen for changes and swap in placeholder 's new value using inputDomObject.addEventListener("change", functionToHandleChanges);

You can set the placeholder value on the input's DOM object (and therefore on the page) using placeholderDomObject.setAttribute("placeholder", "thingToSetItTo");

If you need any clarification just leave a comment :)

Answer 2

You could try using jQuery. Here I have an example where the user still hasn't submited the form.

$(document).ready(function() {

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

});

If you really want to get $_POST values, you have to serialize them using some php.

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

Then you can access your variable using $post["username"]. But i don't see why you would use this solution, since you can just use regular php to do this.

In your code this should look like this :

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