Envíe la entrada de rango html personalizado sin salir de la página

So I have a range input inside a form:

función 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>

I need it so that when the user slides the range around, it submits to the server in this format "Value is X" where X is the value of the range input. If possible, I would like it so that the value changes as the user slides the bar around. As of now, the form submits, but it leaves the page. I'm not sure how to properly implement jquery to submit to the form with the format "Value is X" without leaving the page. Thanks!

preguntado el 10 de septiembre de 13 a las 00:09

2 Respuestas

The only reason the form is submitting is because you're actually submitting it with javascript.
Solo quitar form.submit(); and it will no longer be submitted, and use ajax to submit the data without reloading the page :

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

can be captured in test.php with $_POST['val'];

Respondido el 10 de Septiembre de 13 a las 00:09

I can't seem to get this to work. No response at all. I commented out form.submit() as you had suggested. - Nada al azar

@NothinRandom - Did you change the HTML and removed the oninput handler, and included jQuery, wrapped the code in document ready etc. Try opening the console and check for errors ? - adeneo

This is what I'm currently using: <code> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script> <form id="d2d" action="test.php" method="post"> 0<input id="inten" type="range" min="0" max="4095" value="0">100% <input name="test" type="hidden"> </form> $(document).ready(function(){ $('#inten').on('change', function() { $.ajax({ url : this.form.action, type: this.form.method, data: {val: this.value} }); }); }); </code> - Nada al azar

Esto debería funcionar:

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

Respondido el 10 de Septiembre de 13 a las 00:09

I can't get this one to work either. No response at all. I'm using jquery-1.10.2.min.js - Nada al azar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.