Is there a way to quickly clear a form before data is entered?

[ChrisSergent]

I have a form that I am using to add or edit points to a map. Is there a way on start up to clear the form of  any pre-existing data on load?

Here is my form:

<div id="attributesSignModal" class="modal fade" style="display: none;" aria-hidden="true">
        <!-- Modal Dialog Begin -->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Add/Edit Sign</h4>
                </div>
                <div class="modal-body">


                    <!-- Installed Begin -->
                    <div class="form-group">
                        <label for="installed">Installed</label>
                        <input type="date" class="form-control" name="installed" id="installed" />
                    </div>
                    <!-- Installed End -->
                    <!-- Sign ID Begin -->
                    <div class="form-group">
                        <label for="signId">Sign ID</label>
                        <input type="number" class="form-control" placeholder="Sign ID" name="signId" id="signId" />
                    </div>
                    <!-- Sign ID End -->
                    <!-- Facing Begin -->
                    <div class="form-group">
                        <label for="facing">Facing</label>
                        <input type="text" class="form-control" placeholder="Facing" name="facing" id="facing" />
                    </div>
                    <!-- Facing End -->
                    <!-- Visibility Begin -->
                    <div class="form-group">
                        <label for="visibility">Visibility</label>
                        <select id="visibility" class="form-control" name="visibility">
                            
                        </select>
                    </div>
                    <!-- Visibility End -->
                    <!-- Condition Begin -->
                    <div class="form-group">
                        <label for="condition">Condition</label>
                        <select id="condition" class="form-control" name="visibility">
                            
                        </select>
                    </div>
                    <!-- Condition End -->
                    <!-- Support ID Begin -->
                    <div class="form-group">
                        <label for="supportId">Support ID</label>
                        <input type="number" class="form-control" name="supportId" id="supportId" />
                    </div>
                    <!-- Support ID End -->
                    <!-- Text Begin -->
                    <div class="form-group">
                        <label for="text">Text</label>
                        <input type="text" class="form-control" name="text" id="text" />
                    </div>
                    <!-- Text End -->
                    <!-- Color 1 Begin -->
                    <div class="form-group">
                        <label for="color1">Color 1</label>
                        <select id="color1" class="form-control" name="color1" required>
                           
                        </select>
                    </div>
                    <!-- Color 1 End -->
                    <!-- Delineator Begin -->
                    <div class="form-group">
                        <label for="delineator">Delineator</label>
                        <select id="delineator" class="form-control" name="delineator">
                            
                        </select>
                    </div>
                    <!-- Delineator End -->
                    <!-- Illum Begin -->
                    <div class="form-group">
                        <label for="illum">Illum</label>
                        <select id="illum" class="form-control" name="illum">
                           
                        </select>
                    </div>
                    <!-- Illum End-->
                    <!-- Offset Begin -->
                    <div class="form-group">
                        <label for="offset">Offset</label>
                        <input type="text" class="form-control" name="offset" id="offset" />
                    </div>
                    <!-- Offset Ends -->
                    <!-- Mountht Begin -->
                    <div class="form-group">
                        <label for="mountht">MOUNTHT</label>
                        <input type="text" class="form-control" name="mountht" id="mountht"/>
                    </div>
                    <!-- Mountht End -->


                    <!-- Backing Begin -->
                    <div class="form-group">
                        <label for="backing">Backing</label>
                        <select id="backing" class="form-control" name="backing">


                        </select>
                    </div>
                    <!-- Backing End -->


                    <!-- Width Begin -->
                    <div class="form-group">
                        <label for="width">Width</label>
                        <input type="text" class="form-control" name="width" id="width" />
                    </div>
                    <!-- Width End -->


                    <!-- Height Begin -->
                    <div class="form-group">
                        <label for="height">Height</label>
                        <input type="text" class="form-control" name="height" id="height"/>
                    </div>
                    <!-- Height End -->


                    <!-- Txt Size Begin -->
                    <div class="form-group">
                        <label for="txtSize">Text Size</label>
                        <input type="text" class="form-control" name="txtSize" id="txtSize"/>
                    </div>
                    <!-- Txt Size End -->


                    <!-- Num Size Begin -->
                    <div class="form-group">
                        <label for="numSize">Numsize</label>
                        <input type="text" class="form-control" name="numSize" id="numSize"/>
                    </div>
                    <!-- Num Size End -->


                    <!-- Comments Begin -->
                    <div class="form-group">
                        <label for="comments">Comments</label>
                        <input type="text" class="form-control" name="comments" id="comments"/>
                    </div>
                    <!-- Comments End -->


                    <!-- Two Sided Begin -->
                    <div class="form-group">
                        <label for="twoSided">Two Sided</label>
                        <input type="text" class="form-control" name="twoSided" id="twoSided" />
                    </div>
                    <!-- Two Sided End -->


                    <!-- Attach Type Begin -->
                    <div class="form-group">
                        <label for="attachType">Attach Type</label>
                        <select id="attachType" class="form-control" name="attachType">


                        </select>
                    </div>
                    <!-- Attach Type End -->


                    <!-- Attach Num Begin  -->
                    <div class="form-group">
                        <label for="attachNum">Attach Num</label>
                        <input type="text" class="form-control" name="attachNum" id="attachNum"/>
                    </div>
                    <!-- Attach Num End -->


                    <!-- Attach Loc Begin -->
                    <div class="form-group">
                        <label for="attachLoc">Attach Loc</label>
                        <select id="attachLoc" class="form-control" name="attachLoc">


                        </select>
                    </div>
                    <!-- Attach Loc End -->


                    <!-- siteObs Begin -->
                    <div class="form-group">
                        <label for="siteObs">Siteobs</label>
                        <select id="siteObs" class="form-control" name="siteObs">


                        </select>
                    </div>
                    <!-- siteObs End -->


                    <!-- Sign Shape Begin -->
                    <div class="form-group">
                        <label for="signShape">Sign Shape</label>
                        <select id="signShape" class="form-control" name="signShape">


                        </select>
                    </div>
                    <!-- Sign Shape End -->


                    <!-- Color 2 Begin -->
                    <div class="form-group">
                        <label for="color2">Color 2</label>
                        <select id="color2" class="form-control" name="color2">


                        </select>
                    </div>
                    <!-- Color 2 End -->


                    <!-- Mutcd Begin -->
                    <div class="form-group">
                        <label for="mutcd">MUTCD</label>
                        <select id="mutcd" class="form-control" name="mutcd">


                        </select>
                    </div>
                    <!-- Mutcd End -->




                    <button class="btn btn-success">Submit</button>
                    <button class="btn btn-default">Cancel</button>    
                    <button id="btnPrevious" class="btn navButton" style="visibility:hidden">Previous</button>  
                    <button id="btnNext" class="btn navButton" style="visibility:hidden">Next</button>


                </div>
            </div>
        </div>
        <!-- Modal Dialog End -->
    </div>

[SteveCole · Accepted solution]

How about something like....

var elems = document.getElementsByClassName("form-control");
for(var i = 0; i < elems.length; ++i)
{
  elems.value = "";
}

[ChrisSergent]

Thank you. Tom Wayson also found me this: HTML DOM Form reset() Method

I thought it had to be of a button type.

[SteveCole]

Nice. Even easier!