• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Denselben Wert in einem Formular anzeigen UND speichern

J

JeanK

Neues Mitglied
Hallo!

Ich bräuchte eure Hilfe.

Ich habe ein Formular, wo ich ich Werte aus der Url auslesen, sichtbar auf der Seite zeigen und GLEICHZEITIG diesen Wert in einem "Hidden Field" speichern möchte.


Eines von beiden habe ich hingekriegt, aber zweimal derselbe Wert leider nicht.

Also ich kann die Werte entweder auf der Seite anzeigen ODER speichern, aber ich bräuchte beides.

Ich vermute mal weil z.B. der Wert NAME nur EINMAL vergeben werden darf, aber da gibt es doch bestimmt eine Lösung.

Anbei ein Beispielcode:

<div class="container mt-3">
<h6><input type="text" name="Name" readonly></h6>
<h6><input type="text" name="Language" readonly></h6>

<form action="https://example.com" method="POST" style="max-width:300px">

<input type="hidden" name="Name" value="">
<input type="hidden" name="Language" value="">

<div class="mt-3"> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div>

<script> var queryForm = function(settings){ var reset = settings && settings.reset ? settings.reset : false; var self = window.location.toString(); var querystring = self.split("?"); if (querystring.length > 1) { var pairs = querystring[1].split("&"); for (i in pairs) { var keyval = pairs.split("="); if (reset || sessionStorage.getItem(keyval[0]) === null) { sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1])); } } } var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]"); for (var i=0; i<hiddenFields.length; i++) { var param = sessionStorage.getItem(hiddenFields.name); if (param) document.getElementsByName(hiddenFields.name)[0].value = param; } } setTimeout(function(){queryForm();}, 100); </script>

Danke für eure Hilfe
 
Wie wäre es mit einem freundlichen "Hallo lieber neuer User, zuallererst freuen wir uns Dich als neues Mitglied unserer Gemeinschaft begrüssen zu dürfen und möchten Dich gleichzeitig darauf hinweisen das es gegen die Forenregeln, verstößt denselben Beitrag in diversen Foren gleichzeitig zu posten".?
 
Eventuell gibt es ja die Möglichkeit zu einem neutralem, positivem Neustart.

Mein Problem kennt ihr ja.

Es wäre echt total toll wenn mir jemand diesbezüglich helfen könnte.

Vielen Dank
 
Ist das hier ein Rätselforum? Ich würde wetten DU weißt die Lösung, weil das lies hier jede(r) aus Deiner sarkastischen Bewerkung raus. Ich schreibe jetzt hier nicht, das ich verschiedenste Varianten ausprobiert habe, denn das würdest DU wieder mit Vorliebe zitieren, stimmst? Also hoffe ich auf eine(n) ANDERE(N) User(in) in diesem Forum, der mir helfen wird.

P.S. Sei so lieb und schreib mir NICHT mehr. Danke
 
Hi Sempervivum!

Vielen Dank für Deine Hilfe.

Ich habe das jetzt mal zusammengebaut und getestet, aber es werden nach wie vor nur die hiddenFields gefüllt und gespeichert?

Die "fetten" Blöcke sind von Dir ...

<div class="container mt-3">
<h6 id="out-Name"></h6>
<h6 id="out-Language"></h6>

<form action="https://example.com" method="POST" style="max-width:300px">

<input type="hidden" name="Name" value="">
<input type="hidden" name="Language" value="">

<div class="mt-3"> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div>

<script>for (var i = 0; i < hiddenFields.length; i++) {
var param = sessionStorage.getItem(hiddenFields.name);
if (param) {
document.getElementsByName(hiddenFields.name)[0].value = param;
document.getElementById('out-' + hiddenFields.name).textContent = param;
}
</script>

<script> var queryForm = function(settings){ var reset = settings && settings.reset ? settings.reset : false; var self = window.location.toString(); var querystring = self.split("?"); if (querystring.length > 1) { var pairs = querystring[1].split("&"); for (i in pairs) { var keyval = pairs.split("="); if (reset || sessionStorage.getItem(keyval[0]) === null) { sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1])); } } } var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]"); for (var i=0; i<hiddenFields.length; i++) { var param = sessionStorage.getItem(hiddenFields.name); if (param) document.getElementsByName(hiddenFields.name)[0].value = param; } } setTimeout(function(){queryForm();}, 100); </script>

P.S.

Eigentlich sollte der sichtbare Text ein Fliesstext werden, nach dem Motto:

"Hi NAME,

Sprichst DU LANGUAGE? usw.
 
Warum speicherst du das überhaupt in sessionstorage ?
Soll das nur gespeichert werden damit es beim nächsten Reload an den Feldern angezeigt wird, oder soll das länger gespeichert werden?

Das, was du jetzt hast, geht mit PHP eigentlich einfacher.
Man müsste eigentlich nur wissen, was du genau vorhast, dann könnte man überlegen ob der PHP oder Javascript Weg einfacher oder besser ist?
 
Zuletzt bearbeitet:
Hi Sempervivum!

Hab es getestet, klappt prima.

Jetzt habe ich nur das Problem das alle Parameter angezeigt werden müssen, obwohl ich in diesem Formular nicht alle brauche. Ich weiß, ich hatte das so geschrieben, ist ja auch richtig, nur falsch gedacht.

Also ich habe (immer) die Parameter: A, B, C, D, E, F und G in der Url:

?A=1&B=2&C=3&D=4&E=5&F=6&G=7

Aktuell bräuchte ich zum Anzeigen auf der Seite aber nur die drei: C, E und G

<h6 id="out-C" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-G"></h6>

Nur die Url wird ja wohl der Reihe nach zerteilt, deswegen steht da NIX.

<h6 id="out-A" ></h6>
<h6 id="out-B"></h6>
<h6 id="out-C"></h6>
<h6 id="out-D" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-F"></h6>
<h6 id="out-G" ></h6>geht ohne Probleme, weil da sind alle und in der richtigen Reihenfolge.

Aber

<h6 id="out-A" ></h6>
<h6 id="out-B"></h6>
<h6 id="out-D" ></h6>

steht nur

<h6 id="out-A" ></h6>
<h6 id="out-B"></h6>

weil

<h6 id="out-C"></h6>

fehlt.

Gibt dafür auch eine Lösung?

Danke
 
Hi Basti!

Ich brauche die sichtbaren Felder nur zum Anzeigen auf der Seite.

Die hiddenfields aus der url werden mit dem restlichen Formular verschickt, wo ich sie dann weiterverarbeite.
 
Hi Sempervivum!

Genau, ich brauche immer alle hiddenfields.

Habe genau den alten Codeblock gegen Deinen neuen Codeblock ausgetauscht und es mit verschiedenen Varianten probiert.

Aber so ein verkürzter, unterbrochener Block wird gar nicht angezeigt.

<h6 id="out-C" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-G"></h6>


<script>
var queryForm = function (settings) {
var reset = settings && settings.reset ? settings.reset : false;
var self = window.location.toString();
var querystring = self.split("?");
if (querystring.length > 1) {
var pairs = querystring[1].split("&");
for (i in pairs) {
var keyval = pairs.split("=");
if (reset || sessionStorage.getItem(keyval[0]) === null) {
sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1]));
}
}
}
var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]");
for (var i = 0; i < hiddenFields.length; i++) {
var param = sessionStorage.getItem(hiddenFields.name);
if (param) {
// document.getElementsByName(hiddenFields.name)[0].value = param;
// document.getElementById('out-' + hiddenFields.name).textContent = param;
hiddenFields.value = param;
// Dieses kommt hinzu: Werte auch in die h6-Elemente eintragen:
const out = document.getElementById('out-' + hiddenFields.name);
if (out) {
out.textContent = param;
}
}
}
setTimeout(function () {
queryForm();
}, 100);
</script>
 
JeanK schrieb:
Also ich habe (immer) die Parameter: A, B, C, D, E, F und G in der Url:

?A=1&B=2&C=3&D=4&E=5&F=6&G=7

Aktuell bräuchte ich zum Anzeigen auf der Seite aber nur die drei: C, E und G

<h6 id="out-C" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-G"></h6>
Zum Vergrößern anklicken....

JeanK schrieb:
Aber so ein verkürzter, unterbrochener Block wird gar nicht angezeigt.

<h6 id="out-C" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-G"></h6>
Zum Vergrößern anklicken....

Der Code von Sempervivum schreibt den Inhalt nur in vorhandene Elemente.
Wenn dein C, E, G out Element noch nicht vorhanden ist, dann geht der jetzige Code noch nicht.
aber...
Wenn du auf eine Seite nur c, e, g brauchst, wie sieht der Link den dann aus?
So wie du geschrieben hast
?A=1&B=2&C=3&D=4&E=5&F=6&G=7
oder z. B.
?A=&B=&C=3&D=&E=5&F=&G=7 das die anderen leer sind.?
Ich frage deswegen, weil wenn du die
HTML: 
<h6 id="out-C" ></h6>
<h6 id="out-E"></h6>
<h6 id="out-G"></h6>
Nicht schon auf der Seite stehen hast, muss man ja irgendwie erkennen welchen Output du angezeigt haben möchtest, dann kann man die mit JS oder PHP auch erstellen.

Werden in anderen Formulare andere Outputs gebraucht als wie c, e, g?
Wenn die immer anders sein könnten, muss man das ja irgendwie erkennen können, ob durch leere Parameter. oder sonst was.
 
Zuletzt bearbeitet:
Hi Sempervivum,

Der frühe Vogel fängt den Wurm, in diesem Falle die fehlende Klammer.

Jetzt funktioniert es, Danke vielmals.

Ich habe mal ein wenig mit den sichtbaren Variablen rum experimentiert, aber ich bekomme einfach keinen brauchbaren Fließtext Satz zustande.

Hi id="out-C",

wir freuen uns über Dein Interesse an id="out-D" und id="out-A". Eventuell wäre ja auch noch id="out-E" für Dich interessant. Viele Grüsse aus id="out-B".

Der Satz ergibt nicht wirklich Sinn, mir ging es dabei nur um die Begrüßung, den Abstand, die folgenden Sätze und Punkte und Kommas usw. Ich habe mal extra. die id Reihenfolge geändert, weil ich das bestimmt die Tage mal gerne ausprobieren würde, aber ich denke das geht mit Deinem Code (oder einer Klammer mehr).

Gibt es eventuell noch eine Möglichkeit den ganzen sichtbaren Bereich, also nicht nur die id werte, sondern, eben den gesamten Text auszublenden/unsichtbar zu machen, WENN KEINE Parameter vorhanden sind?

Weil sonst stände dann da:

Hi ,

wir freuen uns über Dein Interesse an und . Eventuell wäre ja auch noch für Dich interessant. Viele Grüsse aus .

Danke
 
Hi Sempervivum,

mit dem "span" vergesse ich irgendwie immer.

Klappt super, muss nur noch ein wenig an der Formatierung arbeiten.

Vielen Dank

Ursprünglich sollte das so aussehen:

<input type="text" id="out-A" readonly>
<input type="text" id="out-C" readonly>
<input type="text" id="out-E" readonly>

Jetzt denkst Du bestimmt, warum denn so?

Aber dann ist es im Still des Formulars vorausgefüllt und nicht veränderbar!

Sieht strukturierter und irgendwie professioneller aus.

Nur leider harmoniert das Teil nicht mit Deinem Code und die Werte werden nicht dargestellt.

Hast Du da eine Idee?
 
Der Wahn macht Sinn!

Klappt prima, teste mal ein wenig und melde mich gleich wieder.

Vielen Dank

Gibt es eventuell noch eine Möglichkeit den ganzen Block

<input type="text" id="out-A" readonly>
<input type="text" id="out-C" readonly>
<input type="text" id="out-E" readonly>

auszublenden/unsichtbar zu machen, WENN KEINE Parameter vorhanden sind?
 
@Sempervivum
ich verstehe das echt nicht. Immer wieder lieferst du fertige Lösungen, auch wenn man eindeutig erkennen kann, dass auf der anderen Seite kein bis sehr wenig Wille besteht, sich in das Thema einzuarbeiten und nur darauf gewartet wird, dass es jemand anderes erledigt. Da ist der Lerneffekt nahe Null und beim nächsten kleinen Problem kommen wieder die nächsten Fragen. In meinen Augen widerspricht das dem Sinn von Foren, das hat mit Hilfe zur Selbsthilfe nicht mehr viel zu tun.
 
Dazu sage ich jetzt mal nichts, weil ich kann mich davon auch nicht frei sprechen.
Ich wundere mich nur das der TO nur den einen Weg sieht?
Warum Javascript nutzen, wenn es mit PHP auch schon geht und kürzer ist?

Aber man kennt das ja, der Weg der am wenigsten Arbeit macht (fertige Lösung), der wird genommen.
So ist das in vielen Fällen und ich habe das an meine Anfangszeit genau so gemacht, ob es noch kürzer, besser oder sinnvoller geht, wahr erst mal Nebensache.
@Sempervivum , das wahr jetzt nicht gegen dich,du hast alles richtig gemacht .
Dass aber in den meisten fälle, die erste Lösung genommen wird, das haben will alle schon in vielen Foren gesehen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben