location.href adds "" to file name

Question

This is my code:

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
    #wrap { 
        width: 1000px; 
        margin: 0 auto; 
    }
    .out_box {
        float: left;
        margin: 20px 20px 20px 20px;
        border: 1px solid black;
        padding: 0 5px 0 5px;
        min-width: 280px;
    }
    input {
        margin: 10px;
    }
    input {
        vertical-align: -3px;
    }
    h1 {
        font-size: 400%;
        color: black;
        margin: 0 0 10px 0;
    text-align: center;
    }
    h2 {
        font-size: 100%;
        color: black;
        margin: 5px 0 5px 0;
    text-align: center;
    }
    h3 {
        font-size: 95%;
        color: black;
        margin: 5px 0 5px 0;
    }
    h4 {
        font-size: 200%;
        color: black;
        margin: 5px 0 5px 0;
    text-align: center;
    }
    p, form, button {
        font-size: 80%;
        color: #252525;
    }
    .small_text {
        font-size: 70%;
        color: #737373;
    }
    body {
        background-color: lightblue;
    }
</style>
</head>
<body>
    <div id=wrap>
        <h1>Login</h1>
        <form class="form1" action=”index3.htm”>
            <div class="formtitle">
                Enter the password to proceed
            </div>

            <div class="input nobottomborder">
                <div class="inputtext">
                    Password:
                </div>

                <div class="inputcontent">
                    <input type="password" id="password" /><br />
                </div>
            </div>

            <div class="buttons">
                <input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == ’smurfsmurf’) location.href='index3.htm'; else alert('Wrong Password!');" />
            </div>
        </form>
    </div>
</body>
</html>

When I make it redirect it does like this with the adress: file:///Volumes/ETHERNET/"index3.htm".

There is a file in that directory named index.htm, and that's the file I am trying to access. How do I fix it adding the "" signs?

Best Regards

Oskar

Jonathan · Accepted Answer · 2015-05-09T22:57:55.083

You have the wrong type of quotes in your form's action. Change this line:

<form class="form1" action=”index3.htm”>

for this:

<form class="form1" action="index3.htm">

Also, because your javascript is on a button that will, according to standards, submit the form, your javascript will not react as you expect. You should add a return false; into the code, and add your curly braces around your if statements, and remove the curved single quotes:

<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'smurfsmurf') {location.href='index3.htm';} else {alert('Wrong Password!');}return false;" />

Although, personally, I would recommend against inline JavaScripting like that. Instead, use EventTarget.addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Scroll down to the example to see how it works.

Explanation:

Straight quotes are not technically necessary for HTML attribute values (I highly recommend using them anyway). You have not used straight quotes ("), but instead curved quotes (”), which never were valid for wrapping HTML attribute vales. Thus, the browser interprets your action on your form to be ”index3.htm” instead of index3.htm.

When you click your submit button, the default action is to submit the form to it's action attribute. So your browser is redirected to /”index3.htm”. Your JavaScript won't have time to kick-in and change your browser's location before you are redirected to the form's action's value.

Let me know if that explanation makes since.

"Straight quotes are no longer technically necessary for HTML5 attribute values" — The rules for when quotes are needed around attribute values have changed little since the original HTML spec. — Quentin, May 09 '15 at 22:56
Thanks for all of your responses, it works!!!!!! How do I write the straight quotes on mac? And how do I center the button and text input? — Oskar Stenberg, May 10 '15 at 06:37
Awesome! Sorry - I don't have a mac. Writing straight quotes will depend mostly on which keyboard (ex.: US English or Canadian French, etc.) you use. Also, some non-plain-text editors may auto-convert straight quotes to curved quotes. Are you trying to align vertically or horizontally? for horizontal, use `text-align:center;` on the parent div. You may want to create a `center` class and add it to the class list of those divs. — Jonathan, May 11 '15 at 01:07

location.href adds "" to file name

1 Answers1