Переключение вкладок без перезагрузки с использованием Javascript

Question

У меня есть 3 вкладки на странице. Эта вкладка Переключение в Javascript. Я уже установил, что первая вкладка открыта по умолчанию. Итак ... Я нажимаю "Вторая вкладка" - это кнопка "Текст и отправить" ... я нажимаю кнопку "Отправить", чтобы открыть первую вкладку ... Я действительно хочу перейти на вторую вкладку после кнопки "Отправить". Пожалуйста, дайте мне пример для моего кода. это мой код здесь ...

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
  <form method="post">
    <input type="submit" value="submit">
  </form>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>

  <form method="post">
    <input type="submit" value="submit">
  </form>
</div>

Answer 1

Поскольку вы используете кнопки типа «отправить», по умолчанию при нажатии на них будет отправляться запрос. Я не уверен, что именно вы пытаетесь достичь, но есть два пути:

1: изменить тип «отправить» на кнопку типа «кнопка». (Данные формы не будут отправлены).

2: прекратить поведение кнопок «Отправить» по умолчанию, добавив обработчик событий для событий «отправки» формы, а затем вручную обработать запросы и поток вашего приложения. Например:

const form = document.querySelector(“#yourFormID”)
form.addEventListener(“submit”, function(event) {
    event.preventDefault(); // this will stop the default behaviour

    // your custom functions here
});

Answer 2

Вы можете использовать запрос XMLHttpRequest (Ajax) для получения данных из почтовой формы и визуализации данных.

    window.onload = function() {
        Array.from(document.querySelectorAll('form')).map(function(form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var xhr = new XMLHttpRequest();
                var params = "Key1=value1&key2=vakue2";
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                        } else {
                            console.log("Error", xhr.statusText);
                        }
                    }
                }
                xhr.open(this.method, this.action, true);
                xhr.send(params);
            });
        });
    };

Answer 3

Это потому, что после отправки страницы формы происходит перезагрузка и вкладки обратно на первую вкладку по умолчанию.

Вы можете обработать / отправить форму с помощью ajax, чтобы предотвратить перезагрузку страницы. Что-то вроде следующего.

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();

    // code for ajax from submission 
})

Таким образом, ваш полный код Javascript должен выглядеть следующим образом

    <script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

    // Prevent Page Loading and Submit From By Ajax
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault(); // prevent default form action

        // code for ajax form submission 
    });
</script>