Web Led turn on/off from webpage without particle redirect info

Hi!

I’m new to particle. I’ve been working through the Getting Started examples. I followed the ‘Control LED over the net’ example. I wanted to execute a variation of it: Clicking checkbox would turn the led on, Clicking off would turn the LED off(without a submit type). I was able to accomplish this. However as with the code example, the page refreshes every time a submit is sent to a new page.

I want to be able to turn the led on and off without a page redirect or refresh. I figured I would have to use AJAX to accomplish this. Here’s my code so far:

<div id="switch">
        <form id="ledForm" action="https://api.particle.io/v1/devices/deviceID/led?access_token6" id="particle" method="POST" > 
		<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" name="args"  value = "on" onChange="submitForm()"  >
		<label for="cmn-toggle-1"></label>
        </form>
</div>
 <div id="form_output"> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>

function submitForm(e) {
  $('#ledForm').submit();
     e.preventDefault();
    $.ajax({
        url : $(this).attr('action') || window.location.pathname,
        type: "GET",
        data: $(this).serialize(),
        success: function (data) {
         },
        error: function (jXHR, textStatus, errorThrown) { 
        }
    });
};

I’m new to AJAX and not sure how to proceed. This code isn’t changing the behavior…Any help or suggestion would be much appreciated!

Hey there, welcome to the community!

Though this question has been asked before (all hail the search button ;)), this should get you on your way:

Best of luck!

1 Like

Thank you, I’ll test it out!