[FRAGE] Problem mit HTML TextArea und JS Kommunikation

STFNJNG · 24. Juni 2014

Hallo zusammen,

ich habe wieder einmal ein kleineres Problem:
Ich habe in meinem Projekt ein paar Abläufe um etwas zu konfigurieren.
Ein paar Sachen kann man nicht konfigurieren daher muss in diesem Schritt ein Textfeld für Kundeneingaben sein.
Soweit bin ich. Jetzt würde ich gerne, bei Knopfdruck, die gesammelten Daten an eine Funktion in JS übergeben.

Folgendes habe ich dafür aktuell fertig:

Code:

if(x==anfrage){
var schritt_3="<div id=\"zusammenf\"><div class=\"meinetitel\"><b>IHRE ANFRAGE AN UNS</b></div><div class=\"clear\"></div>"
schritt_3=schritt_3+"<div id=\"uebersicht_container\" class=\"meineuebersicht\">Das von ihnen gewählte Modell ist momentan noch nicht konfigurierbar.<br />Sie haben die Möglichkeit zu diesem Modell eine Anfrage, in Text-Form zu senden.<br />Selbstverständlich erstellen wir ihnen gerne ein individuelles Angebot zu ihrer Anfrage!<br /><strong>Geben Sie hier ihre Anfrage ein:</strong><br /><br /><textarea id=\"anfragetext\" cols=\"50\" rows=\"6\"></textarea></div><div id=\"button_wk\"><input type=\"button\" class=\"meine_buttons\" name=\"button_wk\" value=\"In die Anfrage übernehmen\" onclick=\"fill_in('"+config+"<br />HIER MUSS DER TEXT AUS DEM TEXTFELD HIN!')\"></div>";
schritt_3=schritt_3+"<div class=\"clear\" style=\"background-color: #FFFFFF; margin-left: 100px; width: 100px;\"></div></div></div>"
$("#schritt_3").html(schritt_3);
}

Das funktioniert! An der Stelle an der "HIER MUSS DER TEXT AUS DEM TEXTFELD HIN!" steht hätte ich nun gerne, dass der eingegeben Text zusammen mit der Variable config an die Funktion fill_in übergeben wird.

Ich habe bereits folgendes probiert:

Code:

if(x==anfrage){
var schritt_3="<div id=\"zusammenf\"><div class=\"meinetitel\"><b>IHRE ANFRAGE AN UNS</b></div><div class=\"clear\"></div>"
schritt_3=schritt_3+"<div id=\"uebersicht_container\" class=\"meineuebersicht\">Das von ihnen gewählte Modell ist momentan noch nicht konfigurierbar.<br />Sie haben die Möglichkeit zu diesem Modell eine Anfrage, in Text-Form zu senden.<br />Selbstverständlich erstellen wir ihnen gerne ein individuelles Angebot zu ihrer Anfrage!<br /><strong>Geben Sie hier ihre Anfrage ein:</strong><br /><br /><textarea id=\"anfragetext\" cols=\"50\" rows=\"6\"></textarea></div><div id=\"button_wk\"><input type=\"button\" class=\"meine_buttons\" name=\"button_wk\" value=\"In die Anfrage übernehmen\" onclick=\"fill_in('"+config+"<br />"+document.getElementById('anfragetext').value+"')\"></div>";
schritt_3=schritt_3+"<div class=\"clear\" style=\"background-color: #FFFFFF; margin-left: 100px; width: 100px;\"></div></div></div>"
$("#schritt_3").html(schritt_3);
}

Leider öffnet er mir diesen Schritt dann komplett nicht, sprich es wird weder das Textfeld noch der Text und/oder der Button angezeigt.

Die Funktion fill_in:

Code:

function fill_in(c){
	var divTag=document.createElement("div");
	divTag.id="divTag"+durchgang; 
	divTag.setAttribute("align","center"); 
	divTag.className="div_ablage";
	divTag.style.margin="0px auto"; 
	divTag.innerHTML=hersteller+" - "+modell+" <a id=\"del"+durchgang+"\" onclick=\"loescheElement(\'divTag"+durchgang+"\')\"><img src=\"design/loesche_element.png\" title=\"Element löschen\"/></a>";
	divTag.dataset["config"]=c;
	var _ablage=document.getElementById("ablage");
	_ablage.appendChild(divTag);
}

Hat jemand einen Lösungsansatz!?
Vielen Dank an alle die sich meinem Problem annehmen!
Stefan

miniA4kuser · 24. Juni 2014

Dein Versuch mit ...+document.getElementById('anfragetext').value+... scheitert, weil su diesem Zeitpunkt das Element mit der ID anfragetext noch gar nicht existiert. Lösen kannst du das ganz einfach mit jQuery, welches du bereits in Benutzung hast (Habe den Cod emal etwas umformatiert):

Code:

var schritt_3 = '<div id="zusammenf">' +
	'<div class="meinetitel"><b>IHRE ANFRAGE AN UNS</b></div><div class="clear"></div>' +
	'<div id="uebersicht_container" class="meineuebersicht">Das von ihnen gewählte Modell ist momentan noch nicht konfigurierbar.' +
	'<br />Sie haben die Möglichkeit zu diesem Modell eine Anfrage, in Text-Form zu senden.' +
	'<br />Selbstverständlich erstellen wir ihnen gerne ein individuelles Angebot zu ihrer Anfrage!' +
	'<br /><strong>Geben Sie hier ihre Anfrage ein:</strong><br /><br />' +
	'<textarea id="anfragetext" cols="50" rows="6"></textarea></div>' +
	'<div id="button_wk"></div>' +
	'<div class="clear" style="background-color: #FFFFFF; margin-left: 100px; width: 100px;"></div></div></div>';
$('#schritt_3').html(schritt_3);
$('<input type="button" class="meine_buttons" name="button_wk" value="In die Anfrage übernehmen" ">').click(function () {
	fill_in(config + '<br />' + $('#anfragetext').val());
}).appendTo('#button_wk');

STFNJNG · 24. Juni 2014

Hey miniA4kuser,

danke erstmal für deinen Ansatz.
Ich werde ihn gleich mal testen und dann berichten!

DANKE SCHONMAL!

tsseh · 24. Juni 2014

das sieht gruselig aus, wie du dort html in js-strings vermatscht. das versteht kein mensch mehr
da würde wenigstens ein templatesystem sinn machen

Code:

<html>
  <head>
    <title></title>
    <script src="jquery.js"></script>
    <script src="handlebars.js"></script>
    <script id="template" type="text/x-handlebars-template">
      <div id="log">
      </div>
      <input type="text" />
    </script>
    <script type="text/javascript">
      $(document).ready(function()
      {
        $("button").on("click", function()
        {
          var source = $("#template").html();
          var template = Handlebars.compile(source);
          $("#data").html(template());
          $("input").on("change", function()
          {
            $("#log").text($("input").val());
          });
        });
      });
    </script>
  </head>
  <body>
    <button>klick</button>
    <div id="data">
      
    </div>
  </body>
</html>

wobei du dir die templates auch über einen anderen weg laden kannst. evtl macht auch ein routing framework sinn

kkapsner · 25. Juni 2014

miniA4kuser schrieb:
Dein Versuch mit ...+document.getElementById('anfragetext').value+... scheitert, weil su diesem Zeitpunkt das Element mit der ID anfragetext noch gar nicht existiert.

Was man auch schnell in der Fehlerkonsole gesehen hätte.

STFNJNG · 25. Juni 2014

Hallo liebe Gemeinde,

die Lösung von miniA4kuser funktioniert.
Ich bin noch nicht so lange mit JS, jQuery & Co. vertraut, daher geht es sicherlich auch einfacher aber dafür werde ich erst noch meine Grundlagen erweitern müssen.
Vielen Dank trotzdem an alle die sich an der Diskussion beteiligt haben…

Liebe Grüße, Stefan

STFNJNG · 27. Juni 2014

Hallo ich hoffe es ist nicht zu spät, noch eine weitere Frage zu diesem Thema zu stellen?

Ich habe folgenden Code:

Code:

var schritt_4="<div id=\"zusammenf\"><div class=\"meinetitel\"><b>DIE KONFIGURATION IN DER ÜBERSICHT</b></div><div class=\"clear\"></div>"
								schritt_4=schritt_4+"<div id=\"uebersicht_container\" class=\"meineuebersicht\">"+config+"</div><div id=\"anzahl\" class=\"anzahlcontainer\"><b>Anzahl:</b> <input type=\"text\" id=\"useranzahl\" value=\"1\" maxlength=\"2\" size=\"1\"></textarea> <button class=\"plusminusbuttons\" onclick=\"anzahlPlus();\">+</button>|<button class=\"plusminusbuttons\" onclick=\"anzahlMinus();\">-</button></div></div><div id=\"button_wk\"><input type=\"button\" class=\"meine_buttons\" name=\"button_wk\" value=\"In die Anfrage übernehmen\" onclick=\"fill_in('"+config+"','KOMMENTAR');\"></div><div class=\"kommentar\"><textarea id=\"kommentarfeld\" rows=\"5\" cols=\"40\" onFocus=\"if(this.value=='Hier können Sie uns einen Kommentar zu diesem Element hinterlassen...') this.value=''\">Hier können Sie uns einen Kommentar zu diesem Element hinterlassen...</textarea></div>";
								schritt_4=schritt_4+"<div class=\"clear\" style=\"background-color: #FFFFFF; margin-left: 100px; width: 100px;\"></div></div></div>"
								$("#schritt_4").html(schritt_4);

Ich glaube ich habe hier das selbe Problem, komme aber gerade nicht weiter …
In meinem onClick-Part rufe ich ja meine Funktion fill_in, übergebe eine Variable (config) und durch ein Komma getrennt eine weitere (Kommentar).
Das klappt soweit … Allerdings möchte ich gerne das der momentane String KOMMENTAR durch den Inhalt des Textfeldes kommentarfeld ersetzt wird.

Wie bekomme ich den Inhalt des Feldes in der Funktion übergeben?

Danke für alle Ansätze und Ratschläge…

Stefan

miniA4kuser · 27. Juni 2014

Ist es denn wirklich sooo schwer den Code mal ordentlich zu formatieren? Zumindes befor man ih hier postet?

Habe mir dieses Mal nicht die Mühe gemacht, sieht beim überfliegen aber nach dem gleichen Problem aus. Somit wäre die Lösung bereits in Post #2 geliefert.

Formatiere mal deinen Code und versuche die Änderungen, die bei schritt_3 eingeflossen sind auf schritt_4 zu übertragen. Wenn du dann noch immer Fragen hast, kannst du diese gerne stellen.

[FRAGE] Problem mit HTML TextArea und JS Kommunikation

STFNJNG

New member

miniA4kuser

Lounge-Member

STFNJNG

New member

tsseh

Lounge-Member

kkapsner

Super Moderator

STFNJNG

New member

STFNJNG

New member

miniA4kuser

Lounge-Member