ComputerBase Menü
Aktuelles

HTML Tab-Browsing in einem HTML-Formular

AMD4Ever

AMD4Ever

Ensign
Registriert
Apr. 2008
Beiträge
188
Hallo

Ich habe folgendes vor und komme irgendwie nicht weiter. In einem Formular möchte ich Tabs einsetzen, die ich mit einem Javsscript Code-Schnipsel ansteuer. Quasi das Prinzip was auf https://www.w3schools.com/w3css/w3css_tabulators.asp eingesetzt wird.

Das Problem bei mir ist, dass ich mein Formular mittels <form method="post" action="xxx.php"> an den Server sende und dieses sich nicht mit meinem JS Code-Schipsel verträgt.
Der JS Onclick-Befehl wird in der Verschachtelung mit dem form method="post" irgendwie ignoriert und springt auf den ersten Tab um, der nicht auf style="display:none" steht.

Das habe ich vor...

snipping.PNG

Könnt ihr mir weiterhelfen??
 
Nun der Quelltext aus dem HTML und JavaScript-Teil

HTML: 
<div class="w3-container w3-light-gray">

<!--<div align="center"><h3>Testberichte Eingabefeld<br>***Testberichte***</h3></div>-->

<form method="post" action="testberichte2.php">
	<div class="w3-row">
		<div style="float:left; padding-right:20px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit7" value="save"><b>&lt; prev.</b></button></div>
		<div style="float:left; padding-right:20px"><input type="text" style="width:50px;" class="w3-input w3-round w3-border" placeholder="ID" size="3" value="" name="SPID"></div>
		<div style="float:left; padding-right:20px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit5" value="save"><b>Jump to ID</b></button></div>
		<div style="float:left; padding-right:50px"><button class="w3-btn w3-white w3-border w3-round-large"  type="submit" name="submit6" value="save"><b>next ></b></button></div>

		<div style="float:left; padding-right:20px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit4" value="save"><img src="new.png" height="20" width="20" alt="NEU"> neu</button></div>
		<div style="float:left; padding-right:20px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit1" value="save"><img src="save.png" height="20" width="20" alt="SAVE"> speichern</button></div>
		<div style="float:left; padding-right:20px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit2" value="save"><img src="edit.png" height="20" width="20" alt="EDIT"> überschreiben</button></div>
		<div style="float:left; padding-right:50px"><button class="w3-btn w3-white w3-border w3-round-large" type="submit" name="submit3" value="save"><img src="delete.png" height="20" width="20" alt="DELETE"> löschen</button></div>
		<div style="float:left; padding-right:20px"><a href="article2.php" class="w3-btn w3-white w3-border w3-round-large"><img src="table.png" height="20" width="20" alt="Table"></a></div>
	</div>
	<br>
	<div class="w3-bar w3-medium">
		<div class="w3-col l1 m1"><input class="w3-input w3-border" type="text" size="1" placeholder="ID" value="<?= $_POST[ID] ?>" name="ID"></div>
		<div class="w3-col l2 m4"><input class="w3-input w3-border" type="text" size="15" placeholder="Datum" value="<?= $_POST['date'] ?>" name="date"></div>
		<div class="w3-col l4 m5"><input class="w3-input w3-border" type="text" size="50" placeholder="Titel" value="<?= $_POST[Title] ?>" name="Title"></div>
		<div class="w3-col l5 m6"><input class="w3-input w3-border" type="text" size="50" placeholder="Titelbild" value="<?= $_POST[title_pic] ?>" name="title_pic"></div>
	</div>
	
	<div class="w3-bar">
		<button class="w3-button" onclick="openPage('Page1')">Überschriften</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page2')">Seite 1</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page3')">Seite 2</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page4')">Seite 3</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page5')">Seite 4</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page6')">Seite 5</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page7')">Seite 6</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page8')">Seite 7</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page9')">Seite 8</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page10')">Seite 9</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page11')">Seite 10</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page12')">Seite 11</button>
		<button class="w3-bar-item w3-button" onclick="openPage('Page13')">Seite 12</button>
	</div> 
	
	<br>
	<br>


	<div id="Page1" class="w3-container page"  style="width:600px">
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 1" value="<?= $_POST[Heading1] ?>" name="Heading1"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 2" value="<?= $_POST[Heading2] ?>" name="Heading2"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 3" value="<?= $_POST[Heading3] ?>" name="Heading3"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 4" value="<?= $_POST[Heading4] ?>" name="Heading4"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 5" value="<?= $_POST[Heading5] ?>" name="Heading5"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 6" value="<?= $_POST[Heading6] ?>" name="Heading6"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 7" value="<?= $_POST[Heading7] ?>" name="Heading7"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 8" value="<?= $_POST[Heading8] ?>" name="Heading8"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 9" value="<?= $_POST[Heading9] ?>" name="Heading9"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 10" value="<?= $_POST[Heading10] ?>" name="Heading10"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 11" value="<?= $_POST[Heading11] ?>" name="Heading11"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 12" value="<?= $_POST[Heading12] ?>" name="Heading12"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 13" value="<?= $_POST[Heading13] ?>" name="Heading13"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 14" value="<?= $_POST[Heading14] ?>" name="Heading14"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 15" value="<?= $_POST[Heading15] ?>" name="Heading15"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 16" value="<?= $_POST[Heading16] ?>" name="Heading16"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 17" value="<?= $_POST[Heading17] ?>" name="Heading17"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 18" value="<?= $_POST[Heading18] ?>" name="Heading18"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 19" value="<?= $_POST[Heading19] ?>" name="Heading19"></p>
		<p><input class="w3-input w3-border w3-small" type="text" placeholder="Überschrift 20" value="<?= $_POST[Heading20] ?>" name="Heading20"></p>
	</div>	
	<div id="Page2" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page1]; ?></textarea></div>
	<div id="Page3" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page2]; ?></textarea></div>
	<div id="Page4" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page3]; ?></textarea></div>
	<div id="Page5" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page4]; ?></textarea></div>
	<div id="Page6" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page5]; ?></textarea></div>
	<div id="Page7" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page6]; ?></textarea></div>
	<div id="Page8" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page7]; ?></textarea></div>
	<div id="Page9" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page8]; ?></textarea></div>
	<div id="Page10" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page9]; ?></textarea></div>
	<div id="Page11" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page10]; ?></textarea></div>
	<div id="Page12" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page11]; ?></textarea></div>
	<div id="Page13" class="w3-container page" style="display:none"><textarea class="w3-input w3-border" rows="30" name="Page1"><?=$_POST[Page12]; ?></textarea></div>
<br>
</form>


	<!--End of Content -->


	<br>
	</div>
	</div>

<script>
function openPage(pageName) {
    var i;
    var x = document.getElementsByClassName("page");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(pageName).style.display = "block";  
}
</script>


Frag mich nicht, was die orangen #-bedeuten, bei mir im Quelltext vom Programm sind sie auf jeden Fall nicht vorhanden
 
Die # sehe ich heute auch zum ersten mal, habe mich eben schon bei anderen Threads gewundert :D

Ein return false; nach openPage sollte reichen.

Code: 
<button class="w3-button" onclick="openPage('Page1'); return false;">Überschriften</button>
<button class="w3-bar-item w3-button" onclick="openPage('Page2'); return false;">Seite 1</button>
usw...

Oder du verwendest Links und machst aus ihnen per CSS Buttons :D
 
Hey, cool!

Das funktioniert schon mal wunderbar :king:

Kann ich die Inhalte aus den nicht angezeiten Tabs an meine PHP Datenbank übergeben?
Ich habe mir dabei schon einen kompletten Datensatz zerschossen. Mir wurden dann nur noch die Überschriften also der erste und aktive Tab angezeigt. Der Rest war dann völlig entleert. :(
Ergänzung ()

hat sich erledigt, durch den Copy & Paste Wahnsinn habe ich ein paar names nicht fortlaufend nummeriert. Jetzt gehts:

HTML: 
<textarea class="w3-input w3-border" rows="30" name="Page1">
...
HTML: 
<textarea class="w3-input w3-border" rows="30" name="Page2">
 
Dazu muesstest du die Daten per AJAX im Hintergrund abschicken und speichern (also quasi so also wuerdest du den "Speichern"-Button druecken). Koennst du beim jedem Tabwechsel ausfuehren.
Die AJAX Requests kannst du mit axios machen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

M
HTML/JavaScript: user input submit in externe Tabelle speichern?
Antworten
8
Aufrufe
1.832
Joshinator
J
C
Thymeleaf + Spring Boot: Modaler Dialog mit Validierung Server-Side
Antworten
1
Aufrufe
2.714
Testa2014
T
Orgelnator
  • Artikel
Leserartikel Splitology: Mein Weg zum Stereo-Tippen (II)
Antworten
3
Aufrufe
1.742
Nightmare85
Nightmare85
Sarius87
  • Gesperrt
JavaScript Vor form absenden Bedingung in externer Datei prüfen
Antworten
2
Aufrufe
790
Drexel
Drexel
cardinal
Nachrichtenausgabe via Toastr von einer HTML Form funktioniert nicht
Antworten
8
Aufrufe
1.278
cardinal
cardinal
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz