html input range的橫桿如何滑順的更新參數?

html javascript ajax

改革家ForFun 2021-07-10 13:09:08 ‧ 2728 瀏覽

分享至

各位大神好
菜雞求教
如圖所示小弟想要在拖曳橫桿的時候數字能後即時改變在網址value=的

並且在提交之後橫桿依然能夠維持在value相對應的位置而不是回到一開始的中間

(目前是只能點一下目標位置讓橫桿一下子跑過去才能得到正確參數，如果用拖曳的方式
會在還沒到達目的地的時候就提交出去...)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <script>
        function myFunction() {
            var x = document.getElementById("myRange").value;
            document.getElementById("demo").innerHTML = "目前數字:" + x + "%";
            document.myform.submit();
        }
    </script>

</head>
<body>
<form method="GET" name="myform">
    <div class="slidecontainer">
        <input type="range" min="0" max="100" oninput="myFunction()" id="myRange" name="value">
        <p id="demo">目前數字:</p>
    </div>
</form>
</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

犬千賀

iT邦新手 3 級 ‧ 2021-07-13 13:40:53

最佳解答

關鍵字 searchParams ((幫樓上簡化一點...

<script>
window.onload = () => {
    const myRange = document.getElementById('myRange');
    let params =(new URL(document.location)).searchParams,
        x = params.get('value');
    
    if( x ){
        myRange.value = x;
        RangeInput();
    }
}

function RangeInput() {
    var x = document.getElementById("myRange").value;
    document.getElementById("demo").innerHTML = "目前數字:" + x + "%";
    
    let params = new URLSearchParams(window.location.search);
        params.set("value", x);
    
    window.history.replaceState(null, null, "?"+params.toString());
}
</script>

正常來說，資料不這麼傳...
猜你是不是因為 js 抓不到POST 資料，才想改GET資料. 但其實Form 都能解決的喔!

回應
分享
檢舉

登入發表回應

jokie7585

iT邦新手 5 級 ‧ 2021-07-10 16:16:24

或許你可以把某一行註解掉看看

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <script>
        function myFunction() {
            let x = document.getElementById("myRange").value;

            document.getElementById("demo").innerHTML = "目前數字:" + x + "%";
            // submit reload了你的page
            // document.myform.submit(); 
           
        }
    </script>

</head>
<body>
<form method="GET" name="myform">
    <div class="slidecontainer">
        <input type="range" min="0" max="100" oninput="myFunction()" id="myRange" name="value">
        <p id="demo">目前數字:</p>
    </div>
</form>
</body>
</html>

問題出在submit reload了你的page。這是瀏覽器的實作，如果你想要保留表單的狀態，那你需要另外寫一個function來把你的form data送到後端，而不是使用submit。

你可以參考 https://www.ucamc.com/articles/332-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8jquery-ajax-submit-%E5%82%B3%E9%80%81form%E8%A1%A8%E5%96%AEserialize-%E6%96%B9%E6%B3%95

回應
分享
檢舉

登入發表回應

froce

iT邦大師 1 級 ‧ 2021-07-10 22:19:09

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <script>
            window.onload = () => {
                const myRange = document.getElementById('myRange')
                let params = decodeURI(window.location.search)
                    .replace('?', '')
                    .split('&')
                    .map(param => param.split('='))
                    .reduce((values, [ key, value ]) => {
                    values[ key ] = value
                    return values
                    }, {})
                if (Object.hasOwnProperty.call(params, 'value')){
                    myRange.value = params['value']
                }
                document.getElementById("demo").innerHTML = "目前數字:" + myRange.value + "%";
            }
            function myFunction() {
                var x = document.getElementById("myRange").value;
                document.getElementById("demo").innerHTML = "目前數字:" + x + "%";
                let searchParams = new URLSearchParams(window.location.search)
                searchParams.set("value", x)
                let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString()
                window.history.replaceState({path: newurl}, '', newurl);            
            }
        </script>

    </head>

    <body>
        <form method="GET" name="myform">
            <div class="slidecontainer">
                <input type="range" min="0" max="100" onchange="myFunction()" id="myRange" name="value" value="50">
                <p id="demo">目前數字:</p>
            </div>
        </form>
    </body>

</html>

頂多做到載入時改bar的值。
要拉動時只改網址列應該是不可能，一定都會重送request。

不過實際上也不是這樣玩的，老實說你想做的沒啥意義...

update:
原來history api可以做到push query不重新更新網頁。
目前範例已改。