Hi ich möchte eine E-Learning Plattform erstellen.
Jetzt Möchte ich das Übergabe per JS Läuft
Das heißt ich benötige für jede Schulform ein anderes Register Formular.
Ich möchte nicht das die ganze Seite neu lädt.
Ich will nur das das Formular neu lädt.
Wie bekomme ich das hin.
Hier der Quellcode:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
li{
display: inline;
}
li>a{
color: #65CF65;
}
</style>
<script>
function val() {
schulform = document.getElementById("select_id").value;
document.getElementById("ausgabe").innerHTML = "Sie Unterrichten eine " + schulform + " Klasse";
if(schulform = "Hauptschule"){
document.getElementById("ausgabe2").innerHTML = "<label>Fach1:</label><br>";
}
}
</script>
</script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Learnbyweb | Lernen im Web</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="250"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<div class="container shadow p-3 mb-5 bg-white rounded">
<div class="jumbotron">
<img src="img/logo.png">
<h2><u>Wir möchten auch den Kleinsten etwas geben</u></h2>
<p>Wir benutzen zufalls Zahlen um eine Rechnung zuerzeugen.
<p><strong>Wir geben ihnen ein Beispiel:</strong><p>
<script type="text/javascript">
let zahl1;
let zahl2;
let ergebnis;
zahl1 = Math.floor( Math.random() * 10 + 1 );
zahl2 = Math.floor( Math.random() * 10 + 1 );
ergebnis = zahl1 * zahl2;
document.write(zahl1 + ' * ' + zahl2 + ' = ' + ergebnis );
</script>
<p><strong>Auch sätze werden per Zufallsprinzip erstellt.</strong></p>
<p id="wort"></p>
<script type="text/javascript">
var wort = [
"Du bist 4km gelaufen und hast da für 4 Stunden gebraucht, wie viel Zeit benötigst du für 12km ?",
"Ein Flugzeug fliegt von Lisabon bis London wie lange wird es Benötigen ?",
"Ein Schwimmbecken wird von 4 gleichgroßen Rohren in 100 Minuten gefüllt. Wie lange würde es dauern, wenn 5 Rohre eingesetzt werden?"
];
document.getElementById("wort").innerHTML = "?????";
var daswort = wort[Math.floor(Math.random()*wort.length)];
document.getElementById("wort").innerHTML = daswort;
</script>
<p>Drag and drop Beispiele können wir ihnen noch nicht zeigen.</p><br><br>
<h2><u>Registrieren</u></h2>
<p>Welche Schulform Unterrichten sie</p>
<form action="index.php" post="get">
<select name="Schulform"onchange="val()" id="select_id" class="form-control">
<option value="Hauptschule">Hauptschule</option>
<option value="Realschule">Realschule</option>
<option value="Gymnasium">Gymnasium</option>
</select><br>
<h2 id="ausgabe"></h2>
<div id="ausgabe2"></div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>