Question

我正在尝试隐藏html滑块并在单击提交按钮时使用jquery提交按钮。不幸的是，我的代码不起作用，滑块和提交按钮只是在它们返回之前暂时隐藏。我真的很感激和帮助！

    <form>
        <input id="bet" type="range" min="0" max="100" value="0" step="1"   onchange="showValue(this.value)" />
        <input id="submit_bet" type="submit" value="Submit Bet!"/>
    </form>

    <span id="range">0</span>

    <script type="text/javascript">
    function showValue(newValue)
    {
        document.getElementById("range").innerHTML=newValue;
    }
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#submit_bet").click(function() {
                $("#bet").hide();
                $("#submit_bet").hide();
                $("range").hide();
            });
        })
    </script>

Answer 1

你可以试试这个，你忘记了选择范围span元素id的“＃”，已经包含在下面的代码片段中

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        <input id="bet" type="range" min="0" max="100" value="0" step="1"   onchange="showValue(this.value)" />
        <input id="submit_bet" type="submit" value="Submit Bet!"/>
    </form>

    <span id="range">0</span>

    <script type="text/javascript">
    function showValue(newValue)
    {
        document.getElementById("range").innerHTML=newValue;
    }
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#submit_bet").click(function(event) {
            	event.preventDefault();
                $("#bet").hide();
                $("#submit_bet").hide();
                $("#range").hide();
            });
        })
    </script>
</body>
</html>

Answer 2

也许我理解你的设计......

如果您只想在单击时隐藏滑块和提交按钮，可以尝试：

<input id="submit_bet" type="button" value="Submit Bet!"/>

当您使用type="submit"按钮时，它会发送表单并刷新页面。

HTML滑块不会隐藏

2 个答案: