Last Updated:

JavaScript: Clear a form

 

JavaScript - Clear a form

To clear a form, there is a special Reset button that, when clicked, returns the form data to its original value. If you enter your data in the form, and then click on such a button, then all the entered data will return to the original value that was before the user entered. Therefore, from the point of view of convenience, the Reset button brings only harm, because you can accidentally click on it and reset the input results. However, sometimes the task of clearing the form through JavaScript arises. To do this, use the method , it is applied as follows (Example 1).reset

Example 1. Using the reset method

document.forms["form name"].reset()or
document.forms.formname.reset()

Consider the following task, where clearing the form can be very useful. For a site that primarily consists of articles, a form of writing a user comment can serve as a useful addition. There are two main approaches here.

In the first case, after entering the text and clicking on the Submit button, the data is sent to the server. Then the current page is reloaded in the browser, the same article appears again, but with an added comment, usually at the bottom of the page. The more comments you add, the slower the document loads and the more time you have to wait when adding a new one.

In the second case, after sending the comment form to the server, a new window opens in which the data processor program starts and reports that the text was added (or not added, and why). There is no automatic reload of the page, to make sure that everything is in order with the comment, you can do it <hand>. In this case, the form is not cleaned on its own, and this can confuse the user. After all, he will once again puzzle over whether he succeeded or not to send a comment to the server. This is where cleaning up the form using JavaScript comes in handy.

Advantages and disadvantages are inherent in each approach, here we will not go into details and analyze them. Let's try to better apply the method in practice, using the second described approach to add a comment.reset

To create a new window, use the window.open method, which allows you to control the display of window parameters. In particular, let's set it a hard size of 400 by 300 pixels, remove the menus, scroll bars and status bar. It's important to give the new window a name so that you can display text in this window instead of the current one. In the example, the window is named popmsg.

Let's take advantage of the fact that the FORM tag has a target parameter, it works similarly to the parameter for frames, namely, it loads the result of the execution of the server program specified in the action parameter into the specified window or frame. By specifying a value of , we redirect the output to a new window named popmsg created with JavaScript.target=popmsg

When the form is submitted to the server, the onSubmit event is generated, to which we <> its popupMsg function. This function checks whether all the data has been entered and, if successful, creates a new window named popmsg, where the result of the server program execution is loaded. The comment form is then cleared by the reset method (Example 2).

Example 2. Apply form cleanup

<html>
<body>

<script language="JavaScript">

function popupMsg(f) {

ok = 1
msg=""

// First, check the data for correctness.

if(!f.name.value) { ok = 0; msg = "Name\n" }
if(!f.text.value) { ok = 0; msg += "Comment text" }

if(ok) {

window.open("", "popmsg", "width=400, height=300, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")
f.submit()
f.reset()

} else alert("The following data is not specified:\n" + msg)

}

</script>

<form method=POST action=/cgi-bin/addcomment.cgi target=popmsg name=comment onSubmit="popupMsg(this); return false">

<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td align=right valign=top>Name</td>
<td><input name=name maxlength=50 size=20 type=text></td>
</tr>
<tr>
<td align=right valign=top>E-mail</td>
<td><input name=email maxlength=50 size=20 type=text></td>
</tr>
<tr>
<td align=right valign=top>Comment</td>
<td><textarea name=text cols=45 rows=10></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=submit value="Submit comment"></td>
</tr>
<tr>
</tr>
</table>
</form>

</body>
</html>

For convenience, when calling the popupMsg function, the this keyword is used, it allows you to access the form through the f argument pointing to the form.