.HTML File has Password in URL

Question

I usually code in Java, but I knew a little HTML, so I decided I would learn more. My problem is that I have a password field and a submit button. When I hit the button, it checks to see if the password is right, and then asks you what your name is. It then changes a text field to say You got it right, NAME. The thing is, when you hit submit, the code submitted is added to the URL, so if you type password as the password, ?password is added on to the URL. That is fine with me, but since the URL is changed, the page reloads, making the text field go back to normal. I am using Google Chrome. Is there anyway around this, or is it because I am running a .HTML file, not going to a website?

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <title>Ryan Club Homepage</title>
    <script>
    function codeEnter(){
    var s = document.getElementById("in").value;
    var correct = "lolliPiper5";
    if(s === correct){
        var name = prompt("What is your name");
        document.getElementById("cde").innerHTML = "You got the password right!, " + name;
    }
    }
</script>
</head>

<body style="font-family:'Myriad Pro' ">

        <form onsubmit="codeEnter();">
            <input type="password" name="code" id="in">
            <br />
            <input type="submit"  value="Ready!">
        </form>
</body>

</html>

Thank you!

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: [mcve]. — CollinD, Jul 09 '16 at 00:15
@CollinD I know that the code works. I am wondering about the way .html files run in browsers. I want to know if there is a more official way to do it. — Orion31, Jul 09 '16 at 00:19
Are you running any sort of server-side scripting? If not, then the web browser itself is doing all of the logic, and a web browser cannot handle a POST request (which is where the password would not be appended to the URL). I'd recommend a basic PHP tutorial. Though @CollinD is correct in that without any code, it's difficult to see what your talking about. — dangel, Jul 09 '16 at 00:28
Because your are submitting to the same page, so it acts like a page reload. The reason why it's in the URL is because you are using a GET request (*which places the parameters in the URL*). It's what is supposed to happen, the page load isn't because of the URL parameters, that what the submit does. — Spencer Wieczorek, Jul 09 '16 at 00:30
It's as @SpencerWieczorek described. when you hit submit, the page changes. That page is stateless, which means when a page changes or reloads, it looses all of the data that was there. so the only way to remember what data was entered, is to send it along with the URL as a `query parameter.` Using some sort of server-side scripting language would eliminate this, though the password would still be submitted, just sort of "hidden" from the user. — dangel, Jul 09 '16 at 00:41
@dangel How would I do that? As I said, I am not very strong in HTML. — Orion31, Jul 09 '16 at 00:45

arshovon · Accepted Answer · 2016-07-09T02:55:18.330

1

You need to use JavaScript / jQuery to prevent the form from submitting. I am using jQuery 2.1.1.

For password field let's assume it 123 for now.

The e.preventDefault() method stops the default action of an element from happening. Here it stops the submit button to submit the form to URL specified in form's action attribute.

$(document).ready(function(){
    $("#name_container").hide();
    $('#submit').on("click",function(e){
        e.preventDefault();
        $password = $('#password').val();
        if($password == '123'){
            $("#password_container").hide();
            $("#name_container").show();
            $("#result").html("");
        }
        else{
           $("#result").html("Password is incorrect.");
        }
        $name = $("#name").val();
        if($name != '' && $name != null ){
            $("#form").hide();
            $("#result").html("You got it right, "+$name);
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" method="post" id="form">
    <div id="password_container">
        Password: <input type="password" id="password" />                
    </div>
    <div id="name_container">
        Name: <input type="text" id="name" />
    </div>
    <input type="submit" id="submit">            
</form>
<div id="result">

</div>

(Updated) Here you go:

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="font-family:'Myriad Pro' ">

    <form id="form" method="post" action="#">
        Password:
        <input type="password" name="code" id="in">
        <br />
        <input type="submit" value="Ready!" id="submit">
    </form>
    <div class="ps"></div>
    <script>
        $(document).ready(function () {
            $('#submit').on("click", function (e) {
                e.preventDefault();
                $password = $('#in').val();
                if ($password == 'lolliPiper5') {
                    $name = prompt("Enter your name", "ACCESS GRANTED");
                    $(".ps").html("Welcome to the team, " + $name);
                }
            });
         });
    </script>
</body>

</html>

edited Jul 09 '16 at 02:55

answered Jul 09 '16 at 00:42

arshovon

13,270
9
51
69

I have never used jQuery before. Do you recommend any tutorials I could watch? – Orion31 Jul 09 '16 at 01:29
Wise man says, "Never say never". So give a try to jQuery. It's really worth it. For starting you can take a look at sequential tutorials from http://www.tutorialspoint.com/jquery/ or the official jquery tutorials: https://learn.jquery.com/ – arshovon Jul 09 '16 at 01:38
how did the jQuery code run if you didn't link it to the HTML? Is there no need for ``? – Orion31 Jul 09 '16 at 01:51
Here is the full code: http://paste.ubuntu.com/18848809/ e is the short var reference for event object which will be passed to event handlers. I have passed it to the function as a parameter. To learn more about e : http://stackoverflow.com/a/10323409/3129414 – arshovon Jul 09 '16 at 02:09
I tried using jQuery, and I still ran into the same problem. Here is my jQuery code: http://paste.ubuntu.com/18852042/ – Orion31 Jul 09 '16 at 02:39
can you share your full code in paste.ubuntu.com? so that I can run your file. – arshovon Jul 09 '16 at 02:41
My little sister is getting impatient x_x she wants this for her "team" with her friend – Orion31 Jul 09 '16 at 02:42
Updated the code. Here is full code: http://paste.ubuntu.com/18853159/ – arshovon Jul 09 '16 at 02:56
the page says `Cannot POST /club.html` – Orion31 Jul 09 '16 at 03:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116847/discussion-between-arsho-and-orion31). – arshovon Jul 09 '16 at 03:05

score 0 · Answer 2 · answered Jul 09 '16 at 03:43

In your simplified (I hope) code you need at least set

<form onsubmit="return codeEnter()">
...
// and in the script
function codeEnter(){
        var s = document.getElementById("in").value;
        var correct = "lolliPiper5";
        if(s === correct){
           var name = prompt("What is your name");
           document.getElementById("cde").innerHTML = "You got the password right!, " + name;
        }
        else return false; //do not submit
}

nshoo · Answer 3 · 2016-07-09T04:10:01.897

In the real world if you actually wanted to submit the password, hidden from the user you would change the form code to

<form onsubmit="codeEnter();" method="post">

By default the form submits data to the server via a GET request which causes the values to show in the url, thus this is usually only used for making queries such as page numbers (?page=num) etc (all insensitive data).

However, when you set method="post" the form sends data using a POST request which is invisible to the user and in some cases encrypted before sending and therefore much safer.

An example of a for using method="POST" can be found here

.HTML File has Password in URL

3 Answers3