CODEWITHSUNDEEP
htmlformstwitter-bootstrap
Roberto Flores
Roberto Flores

Reputation: 789

Reset Button does not reset select element

I created a reset button using bootstrap and html reset. It works in IE but not in Chrome and Firefox.

For some reason, when I reset the form, the rest of the fields within the form do reset for all three browsers. However, unlike IE that resets the form completely, there is a particular field that displays the miles.

In Chrome and Firefox, instead of showing a blank mile, it goes to the last option which is 20 miles.

I do not understand why it is behaving that way. Any help would be appreciated

<div class="form-group">
    <div class="input-group">
        <select class="form-control" name="distance" ng-model="searchParam.distance">
            <option selected="selected" value=" "></option>
            <option selected="selected">5</option>
            <option selected="selected">10</option>
            <option selected="selected">15</option>
            <option selected="selected">20</option>
        </select>
    
        <div class="input-group-addon">mi</div>
    </div>
</div>

<!---The reset button --->

<div class="form-group">
    <input class="btn btn-primary btn-block" type="reset" value="Reset" />    
</div>

Upvotes: 1

Views: 2624

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

Use selected="selected" only with the default option:

<select class="form-control" name="distance" ng-model="searchParam.distance">
    <option selected="selected"></option>
    <option>5</option>
    <option>10</option>
    <option>15</option>
    <option>20</option>
</select>


<form>
    <div class="form-group">
        <div class="input-group">
            <select class="form-control" name="distance" ng-model="searchParam.distance">
                <option selected="selected"></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
            </select>

            <div class="input-group-addon">mi</div>
        </div>
    </div>

    <!---The reset button --->

    <div class="form-group">
        <input class="btn btn-primary btn-block" type="reset" value="Reset" />
    </div>
</form>

See JSFiddle

Upvotes: 4

Related Questions