CODEWITHSUNDEEP
javascriptjqueryhtml
Tim Rowland
Tim Rowland

Reputation: 37

HTML slider won't hide

I am trying to hide an html slider and submit button with jquery when the submit button is clicked. Unfortunately, my code isn't working and the slider and submit button are only momentarily hidden before they come back. I would really appreciate and help!

    <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>

Upvotes: 1

Views: 63

Answers (2)

GraveyardQueen
GraveyardQueen

Reputation: 769

You can try this,you had forgotten the "#" which selects the id of range span element,have included in the below snippet

<!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>

Upvotes: 1

Onfealive
Onfealive

Reputation: 70

Maybe I understand your design...

If you just want to hide slider and submit button when you clicked, you can try:

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

When you use type="submit" button, it will send form and refresh the page.

Upvotes: 1

Related Questions