CODEWITHSUNDEEP
javascripthtml
Oliver
Oliver

Reputation: 7

Clear a single form field in HTML

I am creating a simple HTML login page, but if I enter data into the fields it stays there when I refresh the page. I have tried function pageInit(ID) { this.browserbot.getCurrentWindow().document.getElementById(ID).value = ''; } but this doesn't do anything (I placed it into onLoad on the inputs of the login.)

HTML:

`

    <title>Login</title>

</head>

<body>

    <form>
        <fieldset>
            <legend><h3>Please Login:</h3></legend>
            <input type="text" placeholder="Username" name="userId" id="userId" onLoad="pageInit('userId');"><br>
            <input type="password" placeholder="Password" name="passwd" id="passwd" onLoad="pageInit('passwd');"><br>
        </fieldset>

    </form>

</body>

CSS:

<style>

html {
    font-family: sans-serif;
    text-align: center;
}

a {
    font-weight: normal;
}

a:hover {
    font-weight: bold;
}

#userId, #passwd {
    width: 30%;
    height: 40px;
    text-align: center;
}

</style>

JS:

<script>

function pageInit(ID) {
    this.browserbot.getCurrentWindow().document.getElementById(ID).value = '';
}

</script>

Upvotes: 0

Views: 5926

Answers (3)

octacian
octacian

Reputation: 128

As far as I can tell, the previous answers to not cover the full extent of the question. The original question requests a function to be called to clear the field. However, I'm going to address this in several different ways.

This can be achieved with no JavaScript at all, but simply setting the value attribute as below:

<input type="text" placeholder="Username" name="userId" id="userId" value="" />
<input type="password" placeholder="Password" name="passwd" id="passwd" value="" />

The above will ensure that the fields are clear when the page is loaded, but using only HTML. To do this via JavaScript, multiple things have to be taken into consideration. First, a function should be defined, which needs to be called when the page is loaded.

function clearValue(id) {
    document.getElementById(id).value = "";
}

This will simply set the value to blank. However, this gets us back to the original issue. Setting onload for each element does not work, instead we must use window.onload.

window.onload = function() {
    clearValue("userID");
    clearValue("passwd");
}

This will clear each value one-by-one. However, there is an even better way to do this. JavaScript has built-in functions that make it easy to clear the entire form, or access the elements of the form by their name, even if they are the child of another element within the form. However, keep in mind that only valid input (includes textarea, etc...) fields can be accessed in this way.

So, assuming that the form's ID is myform, this would clear the entire form, no matter how many fields:

document.getElementById("myform").reset();

It's that simple. Using the form element, you can also access the fields by name, as mentioned above.

var f = document.getElementById("myform").elements;
f["userId"].value = "";
f["passwd"].value = "";

Using the above code makes it much quicker, especially if you have more fields.

Putting the JS together, it might look like this:

window.onload = function() {
    // using function
    clearValue("userID");
    clearValue("passwd");

    // or, reset entire form
    document.getElementById("myform").reset();

    // or, clear each field one-by-one
    var f = document.getElementById("myform").elements;
    f["userId"].value = "";
    f["passwd"].value = "";
}

Upvotes: 3

Razia sultana
Razia sultana

Reputation: 2221

May be it will help you.

<input type="text" value="initial" id="field">
<button id="reset">reset</button>
<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field= document.getElementById('field');
        field.value= field.defaultValue;
    };
</script>

Upvotes: 2

mancestr
mancestr

Reputation: 990

Set the input value to " " - in other words, nothing. This way, the value will be cleared when the page loads.

Implment this like so:

<input value="">

If you'd rather use JS, add this to your onload event:

window.onload = myOnloadFunc;

function myOnloadFunc() {
   document.getElementById('userId').value = ''
}

Upvotes: 0

Related Questions