Question

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

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>

我需要它，以便当用户滑动范围时，它以这种格式“Value is X”提交给服务器，其中X是范围输入的值。如果可能的话，我希望它能在用户滑动条形图时更改值。截至目前，表单提交，但它离开页面。我不确定如何正确实现jquery以提交到格式为“Value is X”的表单而不离开页面。谢谢！

Answer 1

表单提交的唯一原因是因为您实际上是使用javascript提交表单只需删除form.submit();，它就会不再提交，并使用ajax提交数据而无需重新加载页面：

HTML

<form id="percent" action="test.php" method="post">
    0<input id="val" type="range" min="0" max="100" value="0" />100%
     <input name="temp" type="hidden" />  
</form>

JS

$('#val').on('change', function() {
    $.ajax({
        url : this.form.action,
        type: this.form.method,
        data: {val: this.value}
    });
});

可以使用$_POST['val'];

在test.php中捕获

Answer 2

这应该有效：

$(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
          });
      });
  });

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

2 个答案: