ユーザーがボタンを使わずに値を変更したときにスライダの値を送信するにはどうすればいいですか？

私は、リモートコントローラと同じように、ユーザーがスライダを離すとすぐに私のWebページに答える球面浮上体を取得しようとしています。しかし、HTMLでの経験がほとんどないため、「スライダの値が変更された場合は、新しい値を投稿する（送信ボタンを実行してください）」などのソリューションを思いつくことはできませんでした。 Python。次のようにユーザーがボタンを使わずに値を変更したときにスライダの値を送信するにはどうすればいいですか？

は今、私のHTMLコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<style> 
#slidecontainer { 
    width: 100%; 
} 

.slider { 
    -webkit-appearance: none; 
    -webkit-transform: rotate(270deg); 
    width: 250px; 
    height: 10px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    left:30px; 
    top:300px; 
    background: #d3d3d3; 
    outline: none; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s; 
} 

} 
</style> 
<body> 
<h1 style="color:blue;">Floating spheres</h1> 
<p>Use slider to change sphere's height.</p> 

<FORM action="/" method="post"> 
<P> 
<input type="range" name="POT" min="0" max="100" value="50" class="slider" id="myRange"> 
<p>Power: <span id="demo"></span>%</p><br> 
<INPUT type="submit" name="Send"> 
</P> 
</FORM> 

<script> 
var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 

</script> 
</body> 
</html>

EDIT：

私はまっすぐ進むの答えがずっとあり、今のHTMLに深く行くために多くの時間を持っていません感謝。

"myRange"の値を変更したいと思います。

出典

2017-11-15 I. Doria

「スライダーの値が変化し、ポスト新値（送信ボタンが何を行う）場合」：あなたが達成しようとしているものに、さらに説明できますか？ – eeya

投稿ボタンを押す代わりに、ユーザがスライダを離したときに、フォームから値をPOSTしようとしています。 –

これは、onmouseupイベントを使用して実行できます。これは、ユーザーがスライダ上でマウスを離したときにトリガされます。スライダをスライドさせるとトリガされます。そこから、submit機能を実行させることができます。フォームにid属性を追加しましたが、スライダの相対セレクタでナビゲートすることができます（しかし、それはもっと面倒です）。

var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("demo"); 
 
output.innerHTML = slider.value; 
 

 
slider.oninput = function() { 
 
    output.innerHTML = this.value; 
 
} 
 

 
slider.onmouseup = function() { 
 
    document.getElementById("form").submit(); 
 
}

#slidecontainer { 
 
    width: 100%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    -webkit-transform: rotate(270deg); 
 
    width: 250px; 
 
    height: 10px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    left:30px; 
 
    top:300px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
}

<h1 style="color:blue;">Floating spheres</h1> 
 
<p>Use slider to change sphere's height.</p> 
 

 
<FORM action="/" method="post" id="form"> 
 
<P> 
 
<input type="range" name="POT" min="0" max="100" value="50" class="slider" id="myRange"> 
 
<p>Power: <span id="demo"></span>%</p><br> 
 
<INPUT type="submit" name="Send"> 
 
</P> 
 
</FORM>

出典

2017-11-15 01:41:09 Neil

ありがとう!!それはそれをした！ –

ユーザーがボタンを使わずに値を変更したときにスライダの値を送信するにはどうすればいいですか？

答えて

関連する問題