How to get a bootstrap switch value in hidden input

Question

I am using a bootstrap switch which looks like toggle box which toggle the two values in a click. Here is the switch code.

<input class="bt-switch transaction_type_filter" type="checkbox" checked data-on-text="Buy" name="transaction_type_filter" id="transaction_type_filter" data-off-text="Rent" data-on-color="primary" data-off-color="warning">

Whenever anyone clicks on this switch the switch toggle to left-right or right-left with the on off text.

I want that "data-on-text" & "data-off-text" in the hidden box or at least the true false states.

This is the hidden input in which i want the value.

<input class="prop_state" type="hidden" value="" id="prop_state">

I have tried some of this code to get the desired result.

    $(document).on('click', '#transaction_type_filter', function () {
    alert($('#transaction_type_filter').bootstrapSwitch('state'));
    alert($('#transaction_type_filter').bootstrapSwitch('toggleState'));
    console.log($('#transaction_type_filter').bootstrapSwitch('toggleState'));
    console.log($('#transaction_type_filter').bootstrapSwitch('state'));
});

and also tried some other scripts also.

 $(document).ready(function() {
 $('.transaction_type_filter').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    if($('#transaction_type_filter').bootstrapSwitch('state') === true){//this is true if the switch is on
       alert('true');
    }else{
       alert('false');
    }
});
 });

I have not much experience of working in jquery or in js. I am just trying it. Took me as a beginner. Thanks for any suggestion in advance.

This is the jsfiddle

You just need to $("#prop_state").val($('#transaction_type_filter').bootstrapSwitch('state')); — clu3Less, Mar 15 '17 at 11:55
I tried that option but not get the value if user click on the switch two times. — always-a-learner, Mar 15 '17 at 11:59
I have tried this code and did not get the changed value only get the one value. — always-a-learner, Mar 15 '17 at 12:01
Please put the code in jsFiddle and share the link here, makes it easier for us to immediately check and debug code. — clu3Less, Mar 15 '17 at 12:04
Try this, '$('#transaction_type_filter').on('switchChange.bootstrapSwitch', function (event, state) {}); ' — Vishnu S, Mar 15 '17 at 12:08

score 0 · Accepted Answer · answered Mar 15 '17 at 12:12

Thanks for the help friends. I got the correct way of getting the bootstrap switch state.Here is the code.

 $('#transaction_type_filter').on('change.bootstrapSwitch', function (e, state) {
    console.log(e.target.checked);
    alert(e.target.checked);
    if (e.target.checked == true) {
        $value = 'buy';
        $('input.prop_state').val($value);
    } else {
        $value = 'rent';
        $('input.prop_state').val($value);
    }
});

in this script what if i have to change a toggle color on change?? — , Mar 16 '17 at 04:47

How to get a bootstrap switch value in hidden input

1 Answers1