Button mit HTML und JavaScript
Michael Segin
- javascript
0 ChrisB0 Michael Segin0 ChrisB0 Michael Segin0 ChrisB0 suit
1 Der Martin
Hallo,
ich habe da ein bisschen HTML mit JavaScript. Drei Button, zwei mit HTML
und einer mit JavaScript. Die zwei laufen auf allen Brosern, der eine nur
im MS Explorer. Das ist mir auch bekannt und ich weiß auch warum. Habe ich
auf SELFHTML gelesen. Aber zwei Dinge interessieren mich doch. Eigentlich
machen alle dass Gleiche und doch wird bei dem dritten Button die Seite neu
aufgebaut. Gibt es noch andere Technologien dieser Art, die dann z.B. auch
auf dem Firefox funktionieren?
<html>
<head>
<title>Zimmer Michael Segin Schütze</title>
<script type="text/javascript">
function WriteData()
{ document.write("<form action=\"/WRITEPI\" methode=\"post\" name=\"ButtonForm\">");
document.write("<input type=\"hidden\" name=\"ADR1\" value=\"MW10\" />");
document.write("<input type=\"hidden\" name=\"VALUE1\" value=\"33333\" />");
document.write("<input type=\"hidden\" name=\"FORMAT1\" value=\"%d\" />");
document.write("</form>");
window.setTimeout("document.ButtonForm.submit()", 1);
}
</script>
<head>
<body>
<form action="/WRITEPI" methode="post">
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="65535" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="65535" />
</form>
<form action="/WRITEPI" methode="post">
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="0" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="00000" />
</form>
<form>
<input type="submit" value="33333" onClick="WriteData()" />
</form>
</body>
</html>
Mit bestem Dank an alle
Michael
Hi,
Eigentlich machen alle dass Gleiche und doch wird bei dem dritten Button die Seite neu aufgebaut.
Das liegt an der Verwendung von document.write.
Gibt es noch andere Technologien dieser Art, die dann z.B. auch auf dem Firefox funktionieren?
Technologien *welcher* Art?
Es wäre allgemein besser, wenn du beschreiben würdest, was du eigentlich *erreichen* willst - dann könnte man dir auch konkrete Tipps zur Umsetzung geben.
MfG ChrisB
Hallo.
Es ist doch eigentlich ganz einfach. Mit Hilfe von Formularen werden Daten von der Webseite auf eine SPS (Speicherprogrammierbare Steuerung) gesandt. Dies ist leider die einzige Möglichkeit die Daten von der Webseite zur SPS zu bekommen. Mit HTML auch kein Problem, aber von einem JavaScript-Programm muss man ein Formular simulieren und dass am besten ohne das man auf der Webseite etwas merkt oder sogar die Seite neu Aufgebaut wird.
MfG Michael
Hi,
Es ist doch eigentlich ganz einfach.
Kommt irgendwie seltsam, wenn das der mit dem Problem sagt.
Mit Hilfe von Formularen werden Daten von der Webseite auf eine SPS (Speicherprogrammierbare Steuerung) gesandt. Dies ist leider die einzige Möglichkeit die Daten von der Webseite zur SPS zu bekommen. Mit HTML auch kein Problem, aber von einem JavaScript-Programm muss man ein Formular simulieren und dass am besten ohne das man auf der Webseite etwas merkt oder sogar die Seite neu Aufgebaut wird.
Dann lautet dein Stichwort AJAX.
MfG ChrisB
Hi,
mach ich schon beim lesen der Daten.
<script type="text/javascript">
var xhr =null;
var interval = window.setInterval("anfrage()",1000);
if (window.XMLHttpRequest)
{ xhr = new XMLHttpRequest();
}
else
{ if (window.ActiveXObject)
{ xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function anfrage()
{ if (xhr != null)
{ xhr.open("GET", "automaten.xml", true);
xhr.onreadystatechange = ausgeben;
xhr.send(null);
}
}
function ausgeben()
{ if (xhr.readyState == 4)
{ var XmlDatei = xhr.responseXML;
var SpsDaten = XmlDatei.getElementsByTagName("Daten");
var Input29 = SpsDaten[0];
var Input30 = SpsDaten[1];
var InputWord29 = Input29.getAttribute("text");
var InputWord30 = Input30.getAttribute("text");
document.getElementById("F3_1").bgColor = (1 & InputWord29 ? "#00ff00" : "#ff0000");
document.getElementById("F3_2").bgColor = (2 & InputWord29 | !(1 & InputWord29) ? "#00ff00" : "#ff0000");
document.getElementById("F4_1").bgColor = (4 & InputWord29 ? "#00ff00" : "#ff0000");
document.getElementById("F4_2").bgColor = (8 & InputWord29 | !(4 & InputWord29) ? "#00ff00" : "#ff0000");
...
<?xml version="1.0" encoding="UTF-8"?>
<SpsDaten>
<Daten text="<!--#READPI ADR=IW29&FORMAT=%d-->" />
<Daten text="<!--#READPI ADR=IW30&FORMAT=%d-->" />
</SpsDaten>
Geht aber nur beim Lesen. Oder wie gaukle ich mit AJAX der SPS
ein Formular vor?
Gruß Michael
Hi,
Oder wie gaukle ich mit AJAX der SPS ein Formular vor?
In dem du der SPS die Daten in genau der gleichen Form schickst, wie es ein herkömmlicher Browser bei Benutzung eines Formulars auch tun würde.
MfG ChrisB
In dem du der SPS die Daten in genau der gleichen Form schickst, wie es ein herkömmlicher Browser bei Benutzung eines Formulars auch tun würde.
Chris meint damit "post" oder "get" (idR. post) - ob der request von einem JavaScript-Formular stammt oder ob es HTML war bzw. ob das ganze überhaupt von einem Browser erzeugt wurde, ist ansich egal. Deine Schnittstelle erwartet mit fast 100%iger Sicherheit einfach eine simple HTTP-Anfrage (egal wie diese zustande kommt).
Hallo,
Ja, super Idee. Werde ich auch so machen. Dann habe ich auch wieder HTML und JavaScribt sauber voneinander getrennt. Gibt es eigentlich eine Funktion die einen String an den Server sendet?
Mir ist aber noch eine etwas unsaubere Lösung eingefallen. Ich habe meinen Button einfach ins HTML geschrieben, ohne die "submit" Zeile und nur den Aufruf in der Funktion gelassen. So erzeuge ich kein neues HTML und die Seite wir nicht neu aufgebaut. Mit "getElementByName" bin ich sogar in der Lage die "value" Elemente zu ändern. Was mich überrascht hat, war dass die Seite jetzt auch im Firefox funktioniert, obwohl das "submit" in der Funktion "WriteData" noch das ist, was ja angeblich das Problem verursachte.
Gruß Michael
<html>
<head>
<title>Zimmer Michael Segin Schütze</title>
<script type="text/javascript">
function WriteData()
{
window.setTimeout("document.ButtonForm2.submit()", 1);
}
</script>
<head>
<body>
<form action="/WRITEPI" methode="post" >
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="65535" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="65535" />
</form>
<form action="/WRITEPI" methode="post" >
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="0" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="00000" />
</form>
<form action="/WRITEPI" methode="post" name="ButtonForm2" >
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="33333" />
<input type="hidden" name="FORMAT1" value="%d" />
</form>
<form>
<input type="submit" value="33333" onClick="WriteData()" />
</form>
</body>
</html>
Gibt es eigentlich eine Funktion die einen String an den Server sendet?
Ich dachte, den XMLHttpRequest kennst du schon - der kann sowohl POST alsauch GET. Bei Bedarf wären sogar HEAD und PUT möglich.
Hi,
Mir ist aber noch eine etwas unsaubere Lösung eingefallen. Ich habe meinen Button einfach ins HTML geschrieben, ohne die "submit" Zeile und nur den Aufruf in der Funktion gelassen. So erzeuge ich kein neues HTML und die Seite wir nicht neu aufgebaut.
Warum sollte sie das nicht werden?
Du sendest ein Formular ab, und wenn der "Server" auf der Gegenseite darauf mit der Auslieferung eines neuen HTML-Dokumentes antwortet, dann sollte der Brwser das auch anzeigen.
Ob du das Formular dabei per normalem Submit-Button, per JavaScript oder auch per JS und zeitverzögert aufrufst - das macht überhaupt keinen Unterschied.
Was mich überrascht hat, war dass die Seite jetzt auch im Firefox funktioniert, obwohl das "submit" in der Funktion "WriteData" noch das ist, was ja angeblich das Problem verursachte.
Wer hat denn das behauptet?
Darauf, dass die Verwendung von document.write problematisch ist, darauf hat Martin hingewiesen.
MfG ChrisB
Hallo,
ich habe da ein bisschen HTML mit JavaScript. Drei Button, zwei mit HTML und einer mit JavaScript. Die zwei laufen auf allen Brosern, der eine nur
im MS Explorer.
das dritte Formular dürfte in keinem Browser "laufen" oder "funktionieren".
Eigentlich machen alle dass Gleiche
Mitnichten!
und doch wird bei dem dritten Button die Seite neu aufgebaut.
Anders gesagt: Die Seite wird durch das neu ausgegebene Formular ersetzt!
Gibt es noch andere Technologien dieser Art, die dann z.B. auch auf dem Firefox funktionieren?
Kommt drauf an, was du erreichen willst.
function WriteData()
{ document.write("<form action="/WRITEPI" methode="post" name="ButtonForm">");
document.write("<input type="hidden" name="ADR1" value="MW10" />");
document.write("<input type="hidden" name="VALUE1" value="33333" />");
document.write("<input type="hidden" name="FORMAT1" value="%d" />");
document.write("</form>");window.setTimeout("document.ButtonForm.submit()", 1);
}
Anstatt den Quellcode mit Backslashes zu verunzieren, könntest du auch auf einfache Anführungszeichen ausweichen. Das sieht übersichtlicher aus.
<form action="/WRITEPI" methode="post">
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="65535" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="65535" />
</form><form action="/WRITEPI" methode="post">
<input type="hidden" name="ADR1" value="MW10" />
<input type="hidden" name="VALUE1" value="0" />
<input type="hidden" name="FORMAT1" value="%d" />
<input type="submit" value="00000" />
</form>
Zwei ganz normale Formulare.
<form>
<input type="submit" value="33333" onClick="WriteData()" />
</form>
Und was ist das? Beim Klicken auf den Submit-Button wird eine Javascript-Funktion aufgerufen, die document.write() verwendet. Wird document.write() aber nach dem Rendern eines Dokuments aufgerufen, dann ersetzt die Javascript-Ausgabe das bisherige Dokument komplett.
Es sei denn, das Javascript wird gar nicht ausgeführt: Dann kommt das action-Attribut des Formulars zum Tragen, das hier fehlt. Es gilt also der Defaultwert "" (Leerstring), der das aktuelle Dokument neu vom Server anfordert.
So long,
Martin