Refreshing and Auto Initialization of Form Elements

---

---

In this chapter we will study about refreshing form element and preventing auto-initialization of form elements.

Refreshing Form Elements

Refresh method is used to update the new state of form control by itself and updates the form control with JavaScript. Following code snippets are used for different form elements −

Checkboxes

$( "input[type = 'checkbox']" ).prop( "checked", true ).checkboxradio( "refresh" );

Radios

$( "input[type = 'radio']" ).prop( "checked", true ).checkboxradio( "refresh" );

Selects

var myselect  =  $( "#selectfoo" );
myselect[0].selectedIndex = 3;
myselect.selectmenu( "refresh" );

Sliders

$( "input[type = 'range']" ).val( 60 ).slider( "refresh" );

Flip switches

var myswitch = $( "#selectbar" );
myswitch[ 0 ].selectedIndex = 1;
myswitch.slider( "refresh" );

Preventing Auto-initialization of Form Elements

Include the attribute data-role = "none" to modify the selector which are used to prevent auto-initialization. Bound the data-role = "none" attribute with mobileinit event to load the first page along with subsequent pages.

<label for = "test">
<select id = "test" name = "test" data-role = "none">
   <option value = "Mumbai">Mumbai</option>
   <option value = "Pune">Pune</option>
   <option value = "Belgaum">Belgaum</option>
   <option value = "Chennai">Chennai</option>
   <option value = "Bangalore">Bangalore</option>
</select>

$( document ).bind( "mobileinit", function() {
   $.mobile.page.prototype.options.keepNative = "select, input.test, textarea.bar";
});