Adil Waqar Adil Waqar - 26 days ago 7
jQuery Question

Changing Jquery Mobile FlipSwitch selected value Programmatically

I am trying to change flip switch value programmatically but its not working
here is the HTML

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="NG">NG</option>
<option value="OK">OK</option>
</select>
<input type="text" id="name" />
<input type="number" id="age" />


Here is the Script

$("#flip-1").on('slidestart', function (event) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if (name == "" || age == "") {

$("#flip-1").val("NG").flipswitch("refresh");
} else[
// slide it to OK
]
});


What i need is that
NG
to be selected all the time but only if there is some text in both inputs

Here is the Fiddle http://jsfiddle.net/r9X5U/6/

Answer Source

Try like the following it will work. Set change event for flip switch.

HTML is like

<select  name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
    <option value="NG">NG</option>
    <option value="OK">OK</option>
</select>
<input type="text" id="name" />
<input type="text" id="age" />

Javascript is like:

$("#snd-switch").on('change', function (event) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if(name == "" || age == ""){
   // alert("hi");
    $("#snd-switch").val("NG").flipswitch("refresh");
}else{
   $("#snd-switch").val("OK").flipswitch("refresh");
}
});

Here is the FIDDLE DEMO