Jquery 提交自定义html范围输入而不离开页面

所以我在表单中有一个范围输入：

javascript函数：

function mkString(id, pt, value, rw)
{
   var form = document.getElementById(id);
   var output = "Value is " + value;
   form.temp.value = output; //store correct "Value is X"
   form.submit();
}


<form id="percent" action="test.php" method="post" oninput="mkString('percent', 0, val.value, '1')">
    0<input id="val" type="range" min="0" max="100" value="0">100%
     <input name="temp" "type="hidden"> 
</form>

函数mkString（id、pt、value、rw）
{
var form=document.getElementById（id）；
var output=“Value是”+值；
form.temp.value=output；//存储正确的“值为X”
表单提交（）；
}
0100%
表单提交的唯一原因是您实际使用javascript提交表单。

只需删除
form.submit（）
将不再提交，并使用ajax提交数据，无需重新加载页面：

HTML

可以使用
$\u POST['val']在test.php中捕获
这应该可以：

$(function()
  {
      var form = $('#percent');

      form.submit(function(event)
      {
          event.preventDefault();

          form.find('input[name=temp]').val("Value is " + $('#val').val());

          $.post('test.php', form.serialize(), function(response)
          {
              // do something here with the response from the server if you need to
          });
      });
  });

我好像没法让它工作。完全没有反应。我按照您的建议注释掉了form.submit（）。@NothinRandom-您是否更改了HTML并删除了oninput处理程序，并包含了jQuery、将代码包装到document ready中等。请尝试打开控制台并检查错误？这是我当前使用的：
0100%$（document）.ready（function（）{$（'#inten'））.on（'change'，function（）{$.ajax（{url:this.form.action，type:this.form.method，data:{val:this.value}}）；}）我也不能让这个工作。完全没有反应。我正在使用jquery-1.10.2.min.js
$('#val').on('change', function() {
    $.ajax({
        url : this.form.action,
        type: this.form.method,
        data: {val: this.value}
    });
});

$(function()
  {
      var form = $('#percent');

      form.submit(function(event)
      {
          event.preventDefault();

          form.find('input[name=temp]').val("Value is " + $('#val').val());

          $.post('test.php', form.serialize(), function(response)
          {
              // do something here with the response from the server if you need to
          });
      });
  });