Wie bekomme ich ein dynamisches Formular, um Text in HTML zu aktualisieren?

Lesezeit: 3 Minuten

Richard Jones

Ich habe ein Formular, das mit einem WordPress-Plugin namens Gravity Forms erstellt wurde.

Ich versuche, den Namen beim Hinzufügen zum HTML hinzuzufügen:

Hello [name]

Wo „Hallo [name]” ist im HTML (nicht im Formular)

und wo [name] wird durch das Eingabetextfeld ersetzt, das ich haben möchte?

Ich habe das Formular erstellt und herausgefunden, dass der Feldname: input_1 und die ID des Felds input_32_1 ist

Ich habe diesen Code ausprobiert:

<script>
$(document).ready(function() {
$("#input_32_1").keyup(function() {
document.getElementById("fname").innerHMTL = document.getElementsByName('input_1')[0].value;
});
});
</script>

Aber es funktioniert nicht. Können Sie mir sagen, was ich falsch gemacht habe?

Können Sie auch Ihren HTML-Code bereitstellen?

– Talemyn

18. Februar 2014 um 20:11 Uhr
redest du von diesem HTML: <span id='nameFromInput'><script language="JavaScript"> document.write(document.getElementsByName('input_1')[0].value);</script></span> Wo habe ich denn den Namen in das Eingabefeld eingetragen?

– Richard Jones

18. Februar 2014 um 23:56 Uhr

Mobys Stuntdouble

Ihr Markup sollte sein:

Hello <span id="nameFromInput"></span>

Und das Skript wäre dann:

$("#input_32_1").keyup(function() {
    $("span#nameFromInput").text($("#input_32_1").val());
});

Hier ist eine jsfiddle, die wie oben funktioniert:
http://jsfiddle.net/cTq7K/

Ich habe es versucht, nichts hat funktioniert. Ich werde unten einen Kommentar einfügen, da ich gerade alles eingegeben habe und es hieß, es seien zu viele Zeichen.

– Richard Jones

18. Februar 2014 um 23:49 Uhr
Ich habe das und viele Variationen davon ausprobiert: <script> $(document).ready(function() { $("#input_32_1").keyup(function() { $("#input_32_1").keyup(function() { $("span#nameFromInput").text($("#input_32_1").val()); }); }); }); </script> und <script> $(document).ready(function() { $("#input_32_1").keyup(function() { document.getElementById('nameFromInput').innerHTML = document.getElementsByName('input_1')[0].value; }); }); </script> hatte keinen Platz mehr für den Rest, also füge es im nächsten Kommentar hinzu.

– Richard Jones

18. Februar 2014 um 23:53 Uhr
und ich habe viele andere ausprobiert, während das HTML so ist: <span id='nameFromInput'><script language="JavaScript"> document.write(document.getElementsByName('input_1')[0].value);</script></span> und habe es so probiert: <span id='nameFromInput'></span> keiner von ihnen funktionierte. Das einzige, was funktioniert, ist dieses hier: <span id='nameFromInput'><script language="JavaScript"> document.write(document.getElementsByName('input_1')[0].value);</script></span> Weil (Wieder kein Platz mehr, also werde ich wieder einen neuen Kommentar hinzufügen …

– Richard Jones

18. Februar 2014 um 23:55 Uhr
Der Grund, warum das Letzte funktioniert, und der einzige Grund ist, dass Gravity Forms weiß, dass ich einen vollständigen Namen eingegeben habe. Wenn ich auf Aktualisieren klicke, lege es wieder dort hinein, was ich eingegeben habe, bevor ich auf Aktualisieren klicke. Wenn ich also auf Aktualisieren klicke, sehe ich den aktuellen Wert im HTML, aber wenn ich einen anderen Namen eingebe, wird er nicht aktualisiert.

– Richard Jones

18. Februar 2014 um 23:55 Uhr
Ok, ich sehe, dass es in jsfiddle funktioniert, aber es funktioniert immer noch nicht auf meiner Seite. 🙁 verrückt. Gibt es eine Möglichkeit, es bei jedem Klick auf die Seite oder bei der Taste nach oben oder so zu machen, dass es nur mit dem Feld input_1 aktualisiert wird? Zum Beispiel, wenn sie irgendwo auf der Seite klicken, nach oben oder unten scrollen, mit der Tabulatortaste von Feld für Feld, tippe irgendein Feld ein, klicke auf „Senden“, irgendetwas?

– Richard Jones

19. Februar 2014 um 0:34 Uhr

9973700cookie-checkWie bekomme ich ein dynamisches Formular, um Text in HTML zu aktualisieren?

#Abfrage #html #Javascript #WordPress