Why do I receive an error for resetting my form?

ChrisSergent — Sat, 11 Dec 2021 21:37:13 GMT

I am trying to reset a form for data entry once the form displays to ensure there are no previous values but I get the following error when I try reset:

Uncaught TypeError: document.getElementById(...).reset is not a function

The code I am using is:

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

A common mistake is having an element named reset, but I don't have that issue on my application.

Here is the form that I can not reset:

<!-- Attributes Sign Modal Begin -->
    <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>
    <!-- Attributes Sign Modal End -->

Re: Why do I receive an error for resetting my form?

SteveCole — Fri, 15 May 2015 17:00:22 GMT

My guess is that you're specifying the ID for a div, not a form. Actually, you don't have your form inputs contained inside of an HTML form element. Try wrapping everything inside that div with a <form></form> tag.

Re: Why do I receive an error for resetting my form?

ChrisSergent — Fri, 15 May 2015 17:15:42 GMT

I got this error when I added that:

Uncaught TypeError: Cannot read property 'defaultPrevented' of undefined

And it did not clear the form, but I did add form tags.

I uploaded the most recent version of my app on github: csergent45/streetSigns · GitHub

topic Re: Why do I receive an error for resetting my form? in ArcGIS JavaScript Maps SDK Questions

Why do I receive an error for resetting my form?

Re: Why do I receive an error for resetting my form?

Re: Why do I receive an error for resetting my form?