How to make conditional refresh django

Question

I am making a website and I have 3 buttons. Button named "byHour" is a normal button but how do I make so that the other 2 button will not refresh the page when clicking them.

<form method="POST" >
    {% csrf_token %}
    <center>
        <input list="name" name="enterName"  placeholder="enter name..." style="margin-bottom: 10px;">
        <datalist id="name">
            {% for empName in empName %}
                <option value="{{empName.employee}}">
            {% endfor %}
        </datalist>
        <div id="date" style="display: none;">
            <input type="date" name="firstDate" value="firstDate" style="margin-right: 10px;">
            <input type="date" name="secondDate" value="secondDate">
        </div>
        <p class="p2" style="margin-top: 10px; font-size: 15px;">Filter by: </p>
    <div class = "pad3">
        <button type="submit" name="byHour" value="byHour" class="button1" id="example2" onclick="closeFunction()" style="width: fit-content; margin-right: 50px; font-size: 12px;">Total Hours</button>
        <button type="submit" name="byDate" value="byDate" class="button1" id="example2" onclick="closeFunction()" style="width: fit-content; margin-right: 50px; font-size: 12px;">Date</button>
        <button type="submit" name="specificDate" value="specificDate" class="button1" id="example2" onclick="myFunction()" style="width: fit-content; font-size: 12px;">Date Range</button>
    </div>
    </center>
</form>

<script>
    function myFunction() {
      var x = document.getElementById("date");
      if (x.style.display == "none") {
        x.style.display = "block";
      }
      else{
        x.style.display = "none"
      }
    }

    function closeFunction() {
      var x = document.getElementById("date");
      x.style.display = "none"
    }
</script>

Answer 1

type=submit will always submit the form, so the page will reload. Just change the type to button like explained more in detail here:

<button type="button">Button</button>`