Выполнение функции php и javascript нажатием одной кнопки

Question

Что я пытаюсь сделать, так это то, что нажатие кнопки вызывает функцию php, которая что-то делает, а также вызывает функцию javascript, которая проверяет, была ли нажата кнопка, и делает div невидимым и видимым.

Это «форма»

    <form id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
      <button type="submit" id="jahrgang1" name="j1" class="btn jahrgang1">Jahrgang 1</button><br>
      <button type="submit" id="jahrgang2" name="j2" class="btn jahrgang2">Jahrgang 2</button><br>
      <button type="submit" id="jahrgang3" name="j3" class="btn jahrgang3">Jahrgang 3</button><br>
      <button type="submit" id="jahrgang4" name="j4" class="btn jahrgang4">Jahrgang 4</button><br>
    </form>

Здесь я хочу выполнить функцию php, нажав на кнопки отправки. Это вызывает простую php функцию.

if(array_key_exists('j1', $_POST)) { 
 j1();
}
if(array_key_exists('j2', $_POST)) { 
 j2();
}
if(array_key_exists('j3', $_POST)) { 
 j3();
}
if(array_key_exists('j4', $_POST)) { 
 j4();
}

А вот что в моем javaScript файле.

const form1 = document.getElementById("form1");
form1.addEventListener("submit", einfachBtn)

function einfachBtn() {
 startseiteContainerElement.classList.add("hide")
 schwierigkeitContainerElement.classList.add("hide")
 anleitungContainerElement.classList.add("hide")
 aufgabeEinfachContainerElement.classList.remove("hide")
 hptmContainerElement.classList.remove("hide")
}

Если я делаю это так, функция php вызывается, и вы можете видеть, что код JavaScript выполняется, скрывает div и показывает другое в течение доли секунды, но затем возвращается к тому, что было раньше, и это было похоже на то, что функция JavaScript не была вызвана.

Однако, если я делаю это так, выполняется только код JavaScript, а функция php - нет:

function einfachBtn(event) {
  event.preventDefault();
  startseiteContainerElement.classList.add("hide")
  schwierigkeitContainerElement.classList.add("hide")
  anleitungContainerElement.classList.add("hide")
  aufgabeEinfachContainerElement.classList.remove("hide")
  hptmContainerElement.classList.remove("hide")
}

Есть ли какое-либо решение о том, как я могу выполнить с помощью одной кнопки обе эти функции?

Заранее спасибо!

Answer 1

Помещая «event.preventDefault ()» внутри своей функции, вы фактически указываете этой функции не выполнять отправку формы. Вы не поместили здесь весь свой код, поэтому я могу только догадываться, что вы поместили тег «script» в заголовок или над элементами, которые необходимо скрыть. Я бы посоветовал вам поместить тег «script» чуть выше тега «/ body», как вы знаете, в самом конце вашей программы, чтобы он мог отрисовать все элементы в первую очередь перед выполнением функции javascript.