How to POST when slider's value is changed/button is pressed with jQuery mobile?

I have 1 slider and 1 button:

  <div data-role="fieldcontain">
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  </div><br><br>
  <div data-role="fieldcontain">
    <select name="slider" id="slider" data-role="slider">
      <option value="off">Off</option>
      &开发者_Go百科lt;option value="on">On</option>
    </select> 
  </div>

How can I POST (like form action="http://somesite" method="post"), when slider's value is changed? button is pressed?

One solution would be to add a custom data attribute that enables the input to auto submit the form it is child of.

Format of such an attribute could be:

<select name="slider" id="slider" data-role="slider" data-autosubmit="true">
  <option value="off">Off</option>
  <option value="on">On</option>
</select> 

The jQuery code to enable auto submit is as easy as below, but we need to make it a bit more complicated for the slider, see the fiddle sample in the end for that.

$('[data-autosubmit="true"]').change(function(){
    $(this).parents('form:first').submit();
});

I don't know if you use the native jQuery mobile form handling or a custom one, but if you want to use a custom hook on the submit it could look something like this:

$("form").submit(function() {
    //Handle the submit with a jQuery.post or whatever
});

Here is a fiddle with some running sample code: http://jsfiddle.net/4VFgS/1/

The fiddle code got some handling to prevent that you submit the form 100 times per second.

$('#slider').change(function(){
    ...
    $.post(yoururl, yourdata, function(callbackdata){
        ...
    });
});

See jQuery.post() and jQuery.change()

Edit: BTW: Having 2 elements with the same id will likely lead to major problems sooner than later.

Edit 2: If you're trying to get a response from a different domain this way, you're probably out of luck unless they offer you JSONP or the like. You will not be able to fetch content from a 3rd party site via XMLHttpRequest because of Same Origin Policy Limitations.

You could proxy the request through your server, though, so the AJAX call would go to the same domain.