Question

我有1个滑块和1个按钮：

  <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>
      <option value="on">On</option>
    </select> 
  </div>

当滑块的值发生变化时，如何POST（如form action="http://somesite" method="post"）？按下按钮？

Answer 1

一种解决方案是添加一个自定义数据属性，使输入能够自动提交它所属的表单。

此类属性的格式可以是：

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

启用自动提交的jQuery代码就像下面一样简单，但是我们需要让它更复杂一些滑块，最后请看小提琴样本。

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

我不知道您是使用本机jQuery移动表单处理还是自定义处理，但如果您想在提交上使用自定义挂钩，它可能看起来像这样：

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

以下是一些运行示例代码的小提琴： http://jsfiddle.net/4VFgS/1/

小提琴代码得到了一些处理，以防止你每秒提交表格100次。

Answer 2

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

请参阅jQuery.post()和jQuery.change()

编辑：BTW：拥有2个具有相同ID的元素可能会比以后更快地导致重大问题。

编辑2：如果你试图以这种方式从不同的域获得响应，除非他们为你提供JSONP等，否则你可能会运气不好。由于源原始策略限制，您将无法通过XMLHttpRequest从第三方站点获取内容。

但是，您可以通过服务器代理请求，因此AJAX调用将转到同一个域。

使用jQuery mobile按下滑块的值/按钮时如何发布？

2 个答案: