Onclick und inputfield?

Hallo zusammen,

Ich würde gerne eine demo-version von einem Loginformular erstellen.

Problem : ich habe zwei Inputfelder einmal type="email" und type="password"

Darunter befindet sich ein Button type="button". Ich möchte, wenn im Inputfield type="email" ein @ zeichen eingegeben wird, beziehungsweise die eingabe korrekt war ein onclick event startet sobald man auf den Button Einloggen drückt.. Leider klappt das nicht ganz. Da er das onclick Event auch auslöst, wenn man nur jeweils ein Zeichen in Password und email input setzt. Da ich nur value.length als if Abfrage genommen habe. Wie schaffe ich das das Event erst startet wenn man erkennt, dass das Inputfeld ein @ Zeichen enthält.

Type="submit" funktioniert nicht , da die Seite dann ja neu geladen wird und alle Änderungen vom onclick Event weg sind.

4 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, JavaScript, Programmieren & Softwareentwicklung

15.08.2022, 18:58

Hänge dich an das submit-Event. Mit der preventDefault-Methode kannst du die Ausführung des Standard-Handler verhinden. Das heißt, der Browser wird keinen Request verschicken, was das Neuladen der Seite bewirken würde.

HTML-Formular:

<form id="some-form">
  <input required type="email">
  <button>Send</button>
</form>

JavaScript:

document.getElementById("some-form").addEventListener("submit", evt => {
  evt.preventDefault();
  /* do something ... */
});

Die Validation der E-Mail kann der Browser übernehmen. Die Voraussetzung dafür ist, dass das Eingabefeld vom Typ email ist und als erforderliches Feld markiert wird.

GrakaVII

15.08.2022, 08:47

Am einfachsten validierest du eine Email mit hilfe eines Regex, siehe https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript

alternativ kannst du das Feld auch einfach zu einem type email machen und ein required hinzufügen, dann brauchst du nicht mit JS validieren

Woher ich das weiß:Studium / Ausbildung – Studium in theoretischer Informatik (Master)

Sebbo588

Beitragsersteller

15.08.2022, 11:19

Danke für deine Hilfe :)

requiered ist schon hinzugefügt. Also es validiert schon automatisch.

Nur wenn ich dann auf den button einloggen clicke startet ja mein Event.

Folgendes:

Function Einloggen {

Let Login =

document.getElementById('Anmelden').value;

Let Password = document.getElemenById('Password').value;

Nun das Event:

If(Login && Password.value.length){

document.getElementById('id').style.display = 'none';

}

Nun wenn ich auf den Button Einloggen drücke, wirs das Event allerdings schon ausgelöst wenn ich beispielsweise nur ein zeichen bei password und email eingebe, was nicht sein sollte. Sondern es sollte erst passieren wenn das inputfield besipielsweise a@a hat. Requiered sagt zwar bitte geben sie eine gültige Email an aber das Event wird trotzdem auagelöst 😅

Sebbo588

Beitragsersteller

15.08.2022, 11:20

@Sebbo588

Hinter Function einloggen natürlich () hatte ich vergessen

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, Programmieren & Softwareentwicklung

15.08.2022, 07:35

Schau dir mal indexOf an

https://www.w3schools.com/jsref/jsref_IndexOf.asp

RouteUS66

15.08.2022, 08:18

Wenn du in einer Form bist, sollte type="email" das Absenden von einer invaliden Mail Adresse (invalide im Sinne des dahinter liegenden regulären Ausdruckes) eigentlich verhindern.

Falls das aus irgendeinem Grund nicht geht, email.indexOf("@") !== -1 , wie FaTech bereits schrieb.

Ähnliche Beiträge

Wie weist man bei Blazor Server App programmatisch generierten Buttons ein onclick Event zu?

Hallo,

Wie weist man bei Blazor Server App programmatisch generierten Buttons ein onclick Event zu? Bei mir funktioniert das nicht.

Vielen Dank im Voraus!

...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

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Android studio/ mit onclick event eine activity löschen?

Ich hab ein kleines Programm, möchte aber eine activity einfügen, die nur beim ersten mal auftritt, und nachdeman den Button drückt gelöscht wird, oder nicht nach neu start angezeigt wird? Weiß jm. Evtl., wie das geht, oder unter welchen Begriffen ich suchen soll?

LG Samir und vielen Dank im voraus!

...zum Beitrag

Wie kann ich einer Javascript Funktion Argumente per Onclick übergeben?

ich möchte flexibler programmieren und habe daher das Onclick-Event nicht im Button zu stehen. Ich rufe dieses Event über eine Id auf.

var element.document.getElementById("element");

Nun habe ich eine Funktion geschrieben, die für einen Parameter ein Argument erwartet, diesen möchte ich per Onclick-Event übergeben.

Wenn ich das Event wie folgend aufrufe, wird die Funktion gleich ausgeführt, ohne das ich den Button klicken muss.

anderesElement.onclick = nameDerFunktion("String-Argument");

Wie kann ich der Funktion nun ein Argument per Buttonklick übergeben?

...zum Beitrag

HTML (JS/PHP) mit Button Zähler in .txt Datei schreiben?

Hallo,

ich habe auf einer HTML Seite einen einfachen Button, der ein onclick-event auslöst.

Nun soll dieser Button zusätzlich noch einen Zähler immer um eins Hochzählen und das ganze in eine Textdatei schreiben.

Geht warscheinlich nicht mit JS sondern nur mit PHP, oder?

Hat hier jemand ein Beispiel für sowas?

Wäre sehr dankbar!

Danke und Gruß

Fabio

...zum Beitrag

PHP submit button funktioniert nicht?

Ich habe für ein Schul Projekt eine Seite gebaut auf der man währungen umrechnen kann. Ich habe dafür Zwei Boxen wo man einmal in euro und einmal von euro umrechnen kann. Für eine Box funktioniert der submit button, aber nur wenn in allen feldern was geschrieben ist. Der in der 2. Box wo man von euro umrechnet funktioniert der submit button garnicht, da bekomme ich diese fehlermeldung:

Fatal error: Uncaught TypeError: Unsupported operand types: string * float in C:\xampp\htdocs\p5.php:8 Stack trace: #0 {main} thrown in C:\xampp\htdocs\p5.php on line 8

So wie auf dem Bild funktioniert es, aber nur wenn ich alle felder fülle. Es soll aber auch gehen wenn ich mal nur von euro umrechnen will.

...zum Beitrag

PHP Formular nach Klicken des Submit Buttons nicht löschen

Hallo

Ich programmiere mit HTML und PHP einen Zeitrechner, wo man die Zahlen in ein Formular schreibt, und möchte gerne, dass nach dem Submit-Button keine Daten aus dem Formular gelöscht werden.

Beim Suchen bin ich darauf gestossen:

<tr>
    <td nowrap>1. Zeit</td>
    <td align="right">
        <input type="text" name="d1" style="text-align:right;" value="<?php echo $_POST['d1']; ?>">
    </td>
    <td align="right">
        <input type="text" name="h1" style="text-align:right;" value="<?php echo $_POST['h1']; ?>">
    </td>
    <td align="right">
        <input type="text" name="m1" style="text-align:right;" value="<?php echo $_POST['m1']; ?>">
    </td>           
    <td align="right">
        <input type="text" name="s1" style="text-align:right;" value="<?php echo $_POST['s1']; ?>">
    </td>
</tr>

Das Problem dabei ist, das dabei immer eine Fehlermeldung kommt (Bild im Anhang). Was mache ich, damit die weggeht?

Vielen Dank für eure Antworten!

Phippe

...zum Beitrag

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zum Beitrag

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zum Beitrag

Wie schicke ich Kontaktformulare als email?

hallo, ich habe ein fertiges kontaktformular und wollte fragen, was ich machen muss, damit nachdem man den submit button gedrückt hat, das ausgefülte als email an mich gesendet wird.

...zum Beitrag

Erfolgreiches Submit mit PopUp verbinden?

Wie verbinde ich bei meinem Formular den erfolgreichen Submit button, also wenn die Email erfolgreich vom Php script per Mail gesendet wurde mit einem PopUp. Kein neue Seite sondern ein PopUp der aufploppt und berichtet dass das Formular abgesendet wurde oder dass es Fehlgeschlagen ist

...zum Beitrag

Wie übergibt man Sonderzeichen (z.B. =) als String im Parameter einer Javascript-Funktion?

Hallo,

ich bastle etwas mit Javascript und bin auf ein Problem gestoßen, was ich bislang nicht lösen konnte.

Ich versuche einen einfachen Taschenrechner zu bauen (und ja, ich weiß, dass es auch anders und leichter machbar wäre). Hier geht es aber eher um eine grundsätzliche Problematik, die sich ergeben hat und die ich gerne lösen würde.

Über einen Button wird mit dem onclick-Event die Funktion angesprochen, die ich definiert habe. Erwartet wird ein Parameter als String: eingabe(eing)

Wenn ich allerdings versuche ein "=" als Parameter zu übergeben, kommt nichts in der Funktion an.

Ich habe auch schon versuche mit \=; "="; %3D und = das Zeichen zu übergeben.

Habt ihr eine Idee?

LG Jonas

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen