Jquery tabbed content just submits form

Question

I am setting up a jquery tabbed content page where a HTML form is organized into multiple tabs each tab with a next button that advances the user to the next tab. My issue is after clicking the Next button on the first tab it jumps right to submit the form instead of just advancing to the next tab. I can not spot the reason for this in my jquery as I am using the click function to trigger showing/hiding each tab/div

Hoping someone might help me spot the issue

var initialLoad = true;
$(document).ready(function() {
  // Hide all tabs except the first one
  $("#tab2, #tab3, #tab4").hide();
  initialLoad = false;

  if (initialLoad == 'false') {
    // Show tab2 when "Next" is clicked on tab1
    $("#buttonone").click(function() {
      $("#tab1").hide();
      $("#tab2").show();
      $("#tab3").hide();
      $("#tab4").hide();
    });
    // Show tab3 when "Next" is clicked on tab2
    $("#buttontwo").click(function() {
      $("#tab1").hide();
      $("#tab2").hide();
      $("#tab3").show();
      $("#tab4").hide();
    });
    // Show tab4 when "Next" is clicked on tab3
    $("#buttonthree").click(function() {
      $("#tab1").hide();
      $("#tab2").hide();
      $("#tab3").hide();
      $("#tab4").show();
    });
  }
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

<form id="form" action="appointment-success.php" method="post">
  <div id="tab1">
    <h2>Select a Service</h2>
    <p><small>Can select more then one</small></p>
    <button id="buttonone" class='btn btn-success'>Next</button>
  </div>
  <div id="tab2">
    <h2>Select a Barber</h2>

    <button id="buttontwo" class='btn btn-success'>Next</button>
  </div>
  <div id="tab3">
    <h2>Select a Date & Time</h2>

    <button id="buttonthree" class='btn btn-success'>Next</button>
  </div>
  <div id="tab4">
    <h2>Tell Us Who You Are</h2>



    <input type="submit" name="createappt" value="Submit Appointment">
  </div>
</form>

Answer 1

As Swati said in the comment section, you have to add type="button" to each of the buttons, else they will trigger the submit event of your form, because the default type of a button is submit

There is 2 things we can conclude about your initialLoad:

1. initialLoad is a boolean value (true/false) so in your if statement you compare it to a string, so that will not work.
2. If you do not use initialLoad for anything else, then you can completly remove it. Inside your .ready() you set the initialLoad to false and right after ask if it's false. This will do the same trick if you remove the if statement and initialLoad.

If you do the above you code will work, but if you wish to make your code a bit more dynamic, you can do this.

Demo

$("div[id^=tab] button[id^=button]").click(function() {
  var parentTab = $(this).parent();
  $("div[id^=tab]").not(parentTab.next()).hide();
  parentTab.next().show();
});

$(document).ready(function() {
  // Hide all tabs except the first one
  $("#tab2, #tab3, #tab4").hide();
  $("div[id^=tab] button[id^=button]").click(function() {
    var parentTab = $(this).parent();
    $("div[id^=tab]").not(parentTab.next()).hide();
    parentTab.next().show();
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>


<form id="form" action="appointment-success.php" method="post">
  <div id="tab1">
    <h2>Select a Service</h2>
    <p><small>Can select more then one</small></p>
    <button id="buttonone" type="button" class='btn btn-success'>Next</button>
  </div>
  <div id="tab2">
    <h2>Select a Barber</h2>

    <button id="buttontwo" type="button" class='btn btn-success'>Next</button>
  </div>
  <div id="tab3">
    <h2>Select a Date & Time</h2>

    <button id="buttonthree" type="button" class='btn btn-success'>Next</button>
  </div>
  <div id="tab4">
    <h2>Tell Us Who You Are</h2>



    <input type="submit" name="createappt" value="Submit Appointment">
  </div>
</form>