JQuery Mobile reset html 5 form

Question

I have a form that I want to reset when I click the button. But I just can't get it to work. It seems that the input type range is reset, but not an option.

HTML

<form id="details_to_add"> <div data-role="fieldcontain"> <select id="select_company" data-native-menu="false" onchange="openNewcompanyDialog(this)" value="Company"> <option data-placeholder="company">Company</option> <option value=""></option> <option value="test">Test</option> <option value="internal1">Internal</option> <option value="new_company_option">Add a new company</option> </select> </div> <div data-role="fieldcontain"> <select id="select_description" data-native-menu="false" onchange="handleInternalChoice(this)" value="Description"> <option data-placeholder="description">Description</option> <!--Options to be shown when "internal" is chosen from company --> <option value="internal1_1">Day off</option> <option value="internal1_2">Time off</option> <option value="internal1_3">Vacation</option> </select> </div> <div data-role="fieldcontain"> <label for="number_of_hours">Number of hours:</label> <input type="range" id="number_of_hours" value="0" min="0" max="24" step="0.25" /> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-rel="back">Close</a> <a href="#" data-role="button" data-rel="back" onclick="pushData()">Save</a> </div> </form> 

I tried a bunch of ways to reset this form, but as mentioned above, it only resets the slider. Any suggestions?

Answer 1

You can solve this problem by adding a button like this:

 <a id="reset" data-role="button">Reset</a> 

And with a little help from jQuery ...

 $('#reset').click(function() { $('#number_of_hours').val('0').slider('refresh'); $('#select_company').val('Company').selectmenu('refresh'); $('#select_description').val('Description').selectmenu('refresh'); }); 

Try an example here: http://jsfiddle.net/KxakF/6/