#javascript
#javascript
Вопрос:
У меня есть код, который помогает мне переключаться между формами, однако, когда я отправляю форму, страница сбрасывается и снова отображается первая (по умолчанию) вкладка. Может ли кто-нибудь помочь мне понять, как я могу сделать так, чтобы вкладка, с которой я отправляю форму, оставалась там, если отправка завершилась неудачно или даже если отправка прошла успешно?
Формы переключаются с использованием небольшого кода JS и отправляются из формы метода PHP POST.
Пожалуйста, найдите код ниже:
Javascript отвечает за переключение между вкладками:
function onTabClick(event) {
let activeTabs = document.querySelectorAll('.active');
// deactivate existing active tab
for (let i = 0; i < activeTabs.length; i ) {
activeTabs[i].className = activeTabs[i].className.replace('active', '');
}
// activate new tab
event.target.parentElement.className = 'active';
document.getElementById(event.target.href.split('#')[1]).className = 'active';
}
const elements = document.getElementsByClassName('nav-tab-element');
for (let i = 0; i < elements.length; i ) {
elements[i].addEventListener('click', onTabClick, false);
}
CSS:
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
И вот HTML-формы:
<body>
<header>
<h1 class="main-header">
Add a New Product
</h1>
</header>
<main>
<ul id="nav-tab" class="nav">
<li class="active">
<a class="nav-tab-element" href="#books">Books</a>
</li>
<li>
<a class="nav-tab-element" href="#dvds">DVD's</a>
</li>
<li>
<a class="nav-tab-element" href="#furniture">Furniture</a>
</li>
</ul>
<form method="POST">
<div class="tab-content active" id="books">
<div class="book-tab">
<input type="text" name="sku" placeholder="test form for books" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="dvds">
<div class="dvd-tab">
<input type="text" name="sku" placeholder="test form for DVD" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="furniture">
<div class="furniture-tab">
<input type="text" name="sku" placeholder="test form for furniture" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
</main>
<script src="main.js"></script>
</body>
Комментарии:
1. Чтобы остановить перезагрузку страницы при отправке формы, вам нужно будет отправить эту форму с помощью ajax. Это позволит вам отправлять свою форму без перезагрузки страницы, а также показывать пользователю сообщение об успехе / ошибке на основе ответа от сервера.
Ответ №1:
Щелчок submit отправляет данные формы на страницу, указанную в action атрибуте в форме. Если вы не введете этот атрибут (как вы этого не сделали), по умолчанию выполняется отправка на текущую страницу.
Чтобы устранить возникшую у вас проблему, я бы посоветовал вместо использования отправки ванильной формы отправлять отправку через ajax. Выполнение вызова ajax в jQuery довольно просто, поэтому я рекомендую вам изучить это.
Ответ №2:
Существует событие, которое запускается при отправке формы. Вы можете запретить перезагрузку своей страницы, выполнив следующее:
event.preventDefault()
вы можете найти больше здесь: https://www.w3schools.com/jsref/event_preventdefault.asp или здесь https://www.w3schools.com/jquery/event_preventdefault.asp
Комментарии:
1. Спасибо, возможно ли, что вы скажете мне, где, по вашему мнению, я должен поместить строку event.preventDefault?
2. Есть два способа, или вы включаете onsubmit в свой тег формы следующим образом: <form onsubmit=»onSubmitItems()»> Введите имя: <тип ввода =»текст»> <тип ввода =»отправить»> </form> или onclick в вашем типе ввода submit . затем вы можете создать функцию типа: function onSubmitItems(event) { event.preventDefault() }
3. Спасибо за предложение, однако это останавливает меня от отправки формы вообще. Может быть, у вас есть идея о том, как я могу это реализовать, по-прежнему отправлять форму, но после отправки формы выбранная вкладка по-прежнему отображается вместо возврата страницы к первой вкладке?
4. чтобы не перезагружать страницу, вам нужно сделать то, что я сказал выше. Чтобы выполнить оба действия, отправить и запретить перезагрузку страницы, вам потребуется работа, например, с Axios или Ajax .
5. Да, к сожалению, я тоже пришел к этому. Спасибо за помощь.
Ответ №3:
Все, что вам нужно сделать, это добавить event.preventDefault() в первую строку вашей функции onTabClick(событие). После того, как вы preventDefault, вы можете запустить любую логику, которую вы хотите прямо там.
Способ взаимодействия ванильного html / js заключается в следующем: при отправке формы страница пытается отправить информацию на сервер, а затем обновляется для обновления новой информацией. Рост SPAS изменил желаемое поведение, и вам нужно переопределить поведение браузера по умолчанию, чтобы остановить обновление.
Добавление Ajax / Axios будет работать, поскольку большинство этих библиотек API имеют встроенные функции для переопределения значений по умолчанию, но в этом нет необходимости.
Комментарии:
1. Привет, спасибо за ответ! Я попытался добавить эту строку в свой код, но, к сожалению, не смог заставить ее работать. Возможно ли, чтобы вы сообщили мне, где именно в коде JS я должен это вставить? Я попытался поместить его ниже и поверх переменной activeTabs, но это не сработало.