Viel einfacher: Gleich im HTML das Attribute "required" setzen:
Code:
<input name="firstname" required>
Benutzt Du modernes Javascript, wird das Ganze noch viel einfacher:
Code:
<script>
fetch('../database/post_kontakt_neu.php', {
method: 'post',
body: new FormData(document.querySelector('form'))
}).then(res => {
return res.text();
}).then(res => {
console.log(res);
// Hier die Aktivitäten für "success"
// Die Antwort vom Server findest Du im Parameter "res"
});
</script>
D. h. Du brauchtst nicht alle Formularelemente einzeln in "data" einzutragen, das macht das "new FormData" für dich.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(09.07.2024, 08:59)Sempervivum schrieb: Viel einfacher: Gleich im HTML das Attribute "required" setzen:
Code:
<input name="firstname" required>
Benutzt Du modernes Javascript, wird das Ganze noch viel einfacher:
Code:
<script>
fetch('../database/post_kontakt_neu.php', {
method: 'post',
body: new FormData(document.querySelector('form'))
}).then(res => {
return res.text();
}).then(res => {
console.log(res);
// Hier die Aktivitäten für "success"
// Die Antwort vom Server findest Du im Parameter "res"
});
</script>
D. h. Du brauchtst nicht alle Formularelemente einzeln in "data" einzutragen, das macht das "new FormData" für dich.
das habe ich versucht :
Viel einfacher: Gleich im HTML das Attribute "required" setzen:
Code:
<input name="firstname" required>
wenn ich aber <button auf type="submit" umstelle, wird der POST blockiert ???
ohne submit hat required keine Auswirkung
Verstehe, ohne Submit funktioniert die Validierung des Formulars nicht. Du kannst aber, statt des "click", das Submit des Formulars abfangen und es mit Ajax an den Server schicken. Dann sollte die Validierung greifen:
Code:
<button type="submit" name="save_kontakt"
class="btn btn-outline-secondary btn-sm" value="save_kontakt">Kontakt erstellen</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', event => {
// Default-Aktion, Abschicken des Formulars, verhindern,
// weil wir es mit Ajax zum Server schicken wollen:
event.preventDefault();
fetch('dein-script.php', {
method: 'post',
body: new FormData(form)
}).then(res => {
return res.text();
}).then(res =>] {
console.log(res);
// Aktionen für "success" hier
});
});
</script>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(09.07.2024, 09:28)Sempervivum schrieb: Verstehe, ohne Submit funktioniert die Validierung des Formulars nicht. Du kannst aber, statt des "click", das Submit des Formulars abfangen und es mit Ajax an den Server schicken. Dann sollte die Validierung greifen:
Code:
<button type="submit" name="save_kontakt"
class="btn btn-outline-secondary btn-sm" value="save_kontakt">Kontakt erstellen</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', event => {
// Default-Aktion, Abschicken des Formulars, verhindern,
// weil wir es mit Ajax zum Server schicken wollen:
event.preventDefault();
fetch('dein-script.php', {
method: 'post',
body: new FormData(form)
}).then(res => {
return res.text();
}).then(res =>] {
console.log(res);
// Aktionen für "success" hier
});
});
</script>
Die Validierung des Formulars funktioniert jetzt! Dafür wird jetzt POST nicht ausgeführt sondern GET??
Siehe Bilder
Code:
/* START */
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
// Default-Aktion, Abschicken des Formulars, verhindern,
// weil wir es mit Ajax zum Server schicken wollen:
event.preventDefault();
fetch('../database/post_kontakt_neu.php', {
method: 'post',
body: new FormData(form),
})
.then((res) => {
return res.text();
})
.then((res) => {
console.log(res);
// Aktionen für "success" hier
});
});
/* ENDE */
Hm, kann es sein, dass Du mehr als ein Formular auf den Seite hast? Was ist pageKontakte.php, ich vermute, die Seite wo das Formular liegt? Und was ist prufen.php?
Am besten wäre es, wenn man sich das in Aktion ansehen könnte. Hast Du es online?
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(09.07.2024, 10:19)Sempervivum schrieb: Hm, kann es sein, dass Du mehr als ein Formular auf den Seite hast? Was ist pageKontakte.php, ich vermute, die Seite wo das Formular liegt? Und was ist prufen.php?
Am besten wäre es, wenn man sich das in Aktion ansehen könnte. Hast Du es online?
Ja, habe verschiedene Formulare auf der Seite, ist etwas verstrickt (siehe unten).
Was ist pageKontakte.php, ich vermute, die Seite wo das Formular liegt? "Richtig"
Am besten wäre es, wenn man sich das in Aktion ansehen könnte. Hast Du es online? "Leider nicht"
Wenn Du mehrere Formulare auf der Seite hast, erklärt das einiges: Das document.querySelector liefert das erste Element, auf das der Selektor passt. Wenn wir diesen ein wenig spezifischer machen, sollte es funktionieren. Eine entsprechende Variable hast Du ja in deinem ersten Posting: "formKontakt". Du brauchst nur diese zu verwenden:
Code:
formKontakt.addEventListener('submit', (event) => {
// Default-Aktion, Abschicken des Formulars, verhindern,
// weil wir es mit Ajax zum Server schicken wollen:
event.preventDefault();
fetch('../database/post_kontakt_neu.php', {
method: 'post',
body: new FormData(formKontakt),
}) // usw.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(09.07.2024, 10:59)Sempervivum schrieb: Wenn Du mehrere Formulare auf der Seite hast, erklärt das einiges: Das document.querySelector liefert das erste Element, auf das der Selektor passt. Wenn wir diesen ein wenig spezifischer machen, sollte es funktionieren. Eine entsprechende Variable hast Du ja in deinem ersten Posting: "formKontakt". Du brauchst nur diese zu verwenden:
Code:
formKontakt.addEventListener('submit', (event) => {
// Default-Aktion, Abschicken des Formulars, verhindern,
// weil wir es mit Ajax zum Server schicken wollen:
event.preventDefault();
fetch('../database/post_kontakt_neu.php', {
method: 'post',
body: new FormData(formKontakt),
}) // usw.
Ich glaube, dass wir auf dem richtigem Weg sind! Danke :-)
Muss ich in PHP noch ein Array erzeugen? (nicht definiertes Array?)
