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

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>

Share Improve this question asked Nov 10, 2016 at 15:38 Oliver 71 silver badge6 bronze badges

Input element doesn't fire onload event. Only elements which load external resources fire the event. You can set the onload listener e.g to window instead. – Teemu Commented Nov 10, 2016 at 15:40
link:-stackoverflow./questions/2689658/… – Razia sultana Commented Nov 10, 2016 at 15:52

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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 = "";
}

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>

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 = ''
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Clear a single form field in HTML - Stack Overflow

HTML:

CSS:

JS:

HTML:

CSS:

JS:

3 Answers 3

与本文相关的文章

评论列表(0)