Orion31 Orion31 - 5 months ago 16
Javascript Question

.HTML File has Password in URL [SOLVED]

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!

Answer

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>