How to clear all Input Field values inside a DIV element using JavaScript and jQuery

Here’s a quick tip for beginners. Let’s assume, you have a web page or a form that has many input fields such as, textbox, buttons, password, checkboxes etc, and you want to clear the values of all the fields. Here, I am sharing two different examples on how to clear input field values inside a DIV element using JavaScript and jQuery.

Clear Input Fields inside DIV using JavaScript

The <input> element in HTML allows users to input data. It’s one of the most important elements and has many different types. In the examples that I am sharing here, has many input elements with different types and I’ll show you how to clear all the fields with the click of a button.

The Markup
<body>
    <div id="mainContainer">
        <p><input type="button" id="b" value="Button" /></p>
        <p><input type="text" id="tb" value="" /></p>
        <p><input type="submit" id="tbSub" /></p>
        <p><input type="password" id="pass" value="" /></p>
        <p><input type="file" id="file" /></p>
        <p><input type="email" id="email" /></p>
        <p><input type="date" id="dt" /></p>
        <p><input type="number" id="no" /></p>
        <p><input type="checkbox" id="chk" checked /></p>
        <p><input type="radio" id="radio" checked /></p>
    </div>
    
    <p>
        <input type="button" id="btClear" value="Clear All" 
            onclick="clearInputFields('mainContainer')" />
    </p>
</body>
The Script
<script>
    function clearInputFields(divElement) {
        var ele = document.getElementById(divElement);

        // IT WILL READ ALL THE ELEMENTS. <p>, <div>, <input> ETC.
        for (i = 0; i < ele.childNodes.length; i++) {

            // SINCE THE <input> FIELDS ARE INSIDE A <p> TAG, 
            // I'LL USE THE "firstChild" PROPERTY TO GET THE <input> TAG.
            var child = ele.childNodes[i].firstChild;
            //console.log(child);

            // CHECK IF CHILD NOT NULL.
            // THIS IS IMPORTANT AS IT WILL RETURN A TEXT FOR EVERY "Whitespace".
            // 'Whitespace' IS A TEXT OR NODE BETWEEN <div> AND <p> AND AFTER <p>.
            if (child) {
                switch (child.type) {
                    case 'button':
                    case 'text':
                    case 'submit':
                    case 'password':
                    case 'file':
                    case 'email':
                    case 'date':
                    case 'number':
                        child.value = '';
                    case 'checkbox':
                    case 'radio':
                        child.checked = false;
                }
            }
        }
    }
</script>
</html>

I have a function that has the procedures to clear the input fields. I’ll call the function using the onclick property of the button. First, I’ll create an object of the parent container or the <div> element in this case. Then I’ll loop through each element inside the <div> using the childNodes property.

Since I have defined the <input> elements inside a <p> element, the childNodes property will return the p’s first. Therefore, I am using firstChild property to get the <input> elements.

var child = ele.childNodes[i].firstChild;

Read more about firstChild here.

Finally, check the type of each input element and accordingly clear the values it. For types checkbox and radio, the value is false.

Clear Input Fields inside DIV using jQuery

For the jQuery method, I using all the <input> types that I have defined in the above example using JavaScript. The important function is inside the <script> tag. Don’t forget to add jQuery library (CDN) inside the <head> tag.

The Markup

The markup remains the same as defined in the above example. However, you’ll need to first add the jQuery library.

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<p><input type="button" id="btClearAll" value="Clear All" /></p>
The Script
<script>
    $(document).ready(function () {
        $('#btClearAll').click(function () {

            $('#mainContainer').find(':input').each(function () {
                switch (this.type) {
                    case 'button':
                    case 'text':
                    case 'submit':
                    case 'password':
                    case 'file':
                    case 'email':
                    case 'date':
                    case 'number':
                        $(this).val('');
                        break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                        break;
                }
            });
        });
    });
</script>

Here, I am using jQuery .find() method to search for <input> elements inside the <div>. The .each() method will loop through each element and check its type. If it’s a match, clear the values.

Well, that’s it. Thanks for reading.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!