HTML Javascript - Beim Drücken von Enter Button anstatt Submit

Hallo

Ich habe mir einen kleinen Rechner gebastelt und möchte da nun die Eingabefelder mit Javascript auslesen. Das funktioniert auch alles.

Allerdings mache ich das ganze mit einem normalen anstelle eines Submit-Buttons, da sonst die Seite neu geladen wird und dadurch alle Werte in den Eingabefeldern weg sind.

Mein Problem dabei ist, das, wenn man Enter drückt, meine Funktion nicht aufgerufen wird, da es ja nur ein gewöhnlicher Button ist. Ist es möglich, ein Mittelding zwischen beiden Buttons zu machen? Also einerseits soll die Seite nicht neu geladen werden (was beim Submit-Button passieren würde), andererseits soll, wenn man Enter drückt, die Funktion eines bestimmten Buttons ausgeführt werden.

Ich hoffe, ihr könnt mir helfen.

Phippe

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

WhiteGandalf

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

05.09.2013, 23:26

Schließe das, was Du im Javascript-Schnipsel im onclick des Submit-Buttons machen läßt, mit einem "return false" ab!

<button type="submit" onclick="rechne(); return false;">ausrechnen!</button>

Damit wird die Standard-Reaktion unterdrückt.

P.S.: Wobei... Du wolltest ja auf "Enter" hinaus... Gab es da nicht ein onsubmit fürs Formular? Das sollte für beides (Maus und Tastatur und egal welches Button oder input submitted) funktionieren! Denk auch hier an das "return false" zum Schluß!

blauegruetze

05.09.2013, 20:03

Meines Wissens, macht man es im Normalfall so, dass man einen Submitbutton nimmt und die Felder einfach wieder mit dem gesendeten Wert füllt. Beispiel bei einem Formular, bei welchem ein falsches Passwort eingegeben wurde: Die Felder von Name, Adresse und Co werden mit dem übermittelten Wert gefüllt, Passwort wird leer gelassen, stattdessen kommt eine Fehlermeldung.

Grundsätzlich kannst du mit Events arbeiten (onkeydown) und dort das Enter abfangen.

Ähnliche Beiträge

Per if Abfrage schauen ob Button gedrückt wird JavaScript?

Hi, ich versuche es hinzubekommen, dass wenn ein Button gedrückt wird eine Funktion aufgerufen wird. Wenn nicht dann eine andere. Ungefähr so soll es aussehen:

if (Button1 wurde angeklickt) {
   submit()
} else {
   counter()
}

Klingt einfach, aber ich hab nichts brauchbares gefunden...

...zum Beitrag

Bei Enter Reload der Seite?

Ich habe mir ein ganz einfaches Formular mit HTML erstellt, wenn ich dann aber den submit Button oder Enter drücke, wird die Seite einfach neu geladen. Woran könnte das liegen?

...zum Beitrag

Von Vue-script auf Vue-style zugreifen?

Hallo, in meiner Vue-Datei habe ich im script-Teil eine Funktion, die überprüft, ob es leere Eingabefelder gibt, bevor man einen Button drückt. Falls ja, sollten diese leeren Eingabefelder im style verändert werden. Beispielsweise wird dann das Eingabefeld etwas rot. Wie setze ich das um?

PS: Die Überprüfungsfunktion brauch ich nicht mehr, nur noch wie ich quasi auf den style zugreife und etwas verändere.

...zum Beitrag

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zum Beitrag

JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

...zum Beitrag

Button mit JavaScript bewegen?

Ich möchte wenn man auf einen Button drückt, das er sich bewegt.

Z.b. vorher x=500px ; danach x=600px

Ich habe im Internet gefunden wie man die aktuellen Koordinaten auslesen kann, aber nicht wie man in Javascript neue setzen kann.

Hoffentlich kann mir jemand helfen

...zum Beitrag

wie kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zum Beitrag

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zum Beitrag

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zum Beitrag

Wie kann man mit PHP/JavaScript eine neue Website erstellen?

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zum Beitrag

HTML/Javascript: Wie erzeuge ich mehrere Eingabefelder?

Ich möchte 6 Eingabefelder erzeugen, in die man Zahlen eingeben kann. Wenn man dann auf einen Button klickt, sollen alle eingegebenen Zahlen aufgelistet werden (Zum Beispiel mit "Du hast xyz eingegeben" oder "Dein Tipp lautet xyz" oder so ähnlich)

Im Javascript-File habe ich sechs mal hintereinander prompt("Bitte gib eine Zahl ein") eingegeben, aber es werden nicht sechs Eingabefelder dargestellt, sondern ein einziges, das sich sechs mal öffnet(Erst öffnet es sich, wenn man dann eine Zahl eingibt, verschwindet es kurz und taucht dann sofort wieder auf, das ganze wiederholt sich sechs mal) Diese prompt-Befehle habe ich dann gelöscht.

Stattdessen habe ich im HTML-Dokument sechs Eingabefelder mit erzeugt und somit das Problem mit den Eingabefeldern gelöst. Der Button ist auch schon sichtbar, aber er funktioniert nicht.

Was muss ich anwenden, um sechs Eingabefelder erscheinen zu lassen und dann mit dem Button die eingegebenen Zahlen aufzulisten?

...zum Beitrag

Addition in Javascript funktioniert nicht?

Ich versuche es zu erreichen, dass wenn ein HTML-Button gedrückt wird eine Javascript-Funktion aufgerufen wird. Diese soll die Variable Anzahl dann um 1 erhöhen. Beim 1. Mal funktioniert das auch und der voher definierte Wert (z.B. 7) erhöt sich um einen. Dann bleibt er aber bei 8.

var Anzahl = parseFloat(7);



function gedrueckt(Anzahl) {
    Anzahl += 1;
    console.log(Anzahl);
}

Wisst ihr woran das liegen könnte?

Ich hoffe auf antworten

Bohne47

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen