jquery - jQuery toggle -> get/post

Question

I'm having trouble with Flip Switch Toggles in jQuery. I need the buttons to toggle between HTTP_GET requests when pressed.

The HTML output (there's some PHP behind this)

<label for="device-2">Power outlet</label>
<select name="device-2" id="device-2" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

I'm able to get the device powered on/off but I have to be able to make two separate HTTP_GETs (turnon and turnoff)

$("#device-2").on("change", function() {
    $.get( "functions/caller.php", { action: "turnon", device: "2" });
});

I've tried out this toggle function but it's just dead. It doesn't seem to make any HTTP requests when I've troubleshooted it in browser console

$("#device-2").toggle(function() {
    $.get( "functions/caller.php", { action: "turnon", device: "2" });
}, function() {
    $.get( "functions/caller.php", { action: "turnoff", device: "2" });
});

Could somebody please point me in the right direction?

Answer 1

Try this:

$("#device-2").on("change", function() {
    var value = $(this).val();
    $.get( "functions/caller.php", { action: "turn" + value, device: "2" });
});

Assuming that your caller.php file accepts the actions "turnon" and "turnoff", this should dynamically change the $.get call based on the selected element's value.

Answer 2

Is this what you're looking for?

$("#device-2").on("change", function() {
    var state = $(this).val();
    $.get( "functions/caller.php", { action: state, device: "2" });
});