jqueryformsjquery-mobilesetintervaljquery-mobile-flipswitch

how to submit form when the flip switcher go to on state in jquery mobile


I have simple form contain two input user name & password and flip swithcher I want to sumbitt the form when the flip go to on state I try using this :

<select name="flip-1" id="flip-1" data-role="slider">
<option value="off"></option>
<option value="on"><input type="submit" value="" data-inline="true" /></option>
            </select>

but not work any one can help???


Solution

  • Here's a working code.

    HTML :

    <form id="some-form">
        <select name="flip-1" id="flip-1" data-role="slider">
            <option value="off"></option>
            <option value="on">Submit</option>
        </select>                                
    </form>
    

    Javascript :

    $(document).on('change', '#flip-1', function(){    
        if($("#flip-1 option:selected").attr('value') == 'on') {
            $('#some-form').submit();
        }
    });
    

    EDIT :

    This should do it:

    $(document).on('pagebeforeshow', '#index', function(){       
        $(document).on('change', '#flip-1', function(){    
            if($("#flip-1 option:selected").attr('value') == 'on') {
                $('#some-form').submit();
                var timer = setInterval(function() { 
                    $('#flip-1 option[value="off"]').attr('selected','selected');
                    $('#flip-1').slider('refresh'); 
                    clearInterval(timer);
                }, 500)
            }
        });
    });
    

    setInterval is here just so it can look like flip switch was turned on then off.