Help with background POST on mobile webpage

C

Cicero

Expert Member
Joined
Jul 20, 2010
Messages
2,286
Reaction score
14
Location
Coastal
Please can someone help me out guys - my web knowledge is lacking.

I am implementing a remote control kinda thing on a mobile page, with a few sliders on (with text boxes to display their values), and a checkbox. When I change one of the sliders or change the checkbox, I update the slider text box with a value, but I'd also like to post the data to another cgi script now.

This is where I have issues. How can I post the values of all sliders and the checkbox and pick it up the other side on any change? I'd also not like to refresh the page is possible, post in the background :shock:

So what I have now is the 3 sliders and text boxes, and a checkbox.

Code: 
<html>
<head><title>Controller</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function submitform()
{
  document.controlForm.submit();
}

// Any change of the slider value - updates its corresponding text box with the value
function slideValue(sliderID, spanbox){
    var x = document.getElementById(sliderID);
    var y = document.getElementById(spanbox);
    
    if (sliderID == 'flow') {
      var str1 = "Val=";           
      y.value = str1.concat(parseInt(x.value));
    }
    
    if (sliderID == 'dur') {
      var str1 = "Val= ";
      y.value = str1.concat(parseInt(x.value));
    }
    
    if (sliderID == 'int') {
      var str1 = "Val= ";
      y.value = str1.concat(parseInt(x.value));
    }    
}



window.onload = function() { 
   slideValue('flow', 'flowTxt'); 
   slideValue('int', 'intTxt'); 
   slideValue('dur', 'durTxt'); 
}   
</script>
</head>
<body>
<div id="main">
<h1><img src="cats/logo.png"><br />CONTROLLER</h1>
<form name="controlForm" action="control.cgi">
<ul style="list-style-type:none">
<li><input type="text" id="flowTxt" style="border:none" readonly><input type="range" id="flow" min="0" max="100" value="0" step="1" onchange="slideValue('flow', 'flowTxt');"></li>
<li><input type="text" id="durTxt" style="border:none" readonly><input type="range" id="dur" min="0" max="100" value="50" step="10" onchange="slideValue('dur', 'durTxt');"> </li> 
<li><input type="text" id="intTxt" style="border:none" readonly><input type="range" id="int" min="0" max="100" value="50" step="10" onchange="slideValue('int', 'intTxt');"></li> 
<li></li>
<li>          
  <div class="onoffswitch" align="center">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
      <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
      </label>
  </div>
</li>
</ul>
</form>
</div>
</body></html>
 
You want to use jQuery and ajax, something along the lines of:

Code: 
$(document).ready(function() {
    $('form[name="controlForm"] input').change(function () {
        
        var flow = $('#flow').val();
        var dur = $('#dur').val();        
        var int = $('#int').val();
            $.ajax({
                type: "POST",
                data: {flow: flow, dur: dur, int: int},
                url: "control.cgi",
            })
                .done(function (msg) {
                    console.log("Control.cgi outputted: " + msg);
                });
        }
    });
});

Something like that should work.
The first line should find your form and on change of any of the input inside the form it should run the rest.
The rest gets the different values of the inputs based on their id's and does an ajax POST to control.cgi.
Whatever gets outputted by control.cgi will be in the msg variable in the .done(function (msg) piece..

If you don't want to use jQuery then the same can be done using straight javascript but I'm too lazy to convert it now ..
 
Thanks bro, appreciate it.

EDIT: Champ, worked like a bomb!
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X