onfocus funktion

strong97

Tag,

wieso sagt er mir das meine Funktion nicht definiert ist?

Spoiler anzeigen

HTML

<input type="text" onfocus="myFunction(this);">

Spoiler anzeigen

JavaScript

<script>
function myFunction(x) {
alert(x);
}
</script>

Arne Drews

Schwer zu sagen, ohne den Code im Zusammenhang zu sehen.

Kannst Du den komplett posten oder einen Link, wo wir das ansehen können?

basti1012

Ich Rate mal. Hast du erst das Script und dann das Textfeld im html stehen ,oder andersrum ?

Aber wie schon gesagt wurde ,richtig helfen kann man dir nur mit Kompletten Code oder Link zur Seite

strong97

Zitat von Arne Drews

Schwer zu sagen, ohne den Code im Zusammenhang zu sehen.

Kannst Du den komplett posten oder einen Link, wo wir das ansehen können?

alles in der index.php

Spoiler anzeigen

HTML

<form method="POST" action="">
            
                <section class="input-form-break">
                
                    <label for="email" class="label-email label">E-Mail Adresse</label>
                    
                    <input type="email" id="input-remove-read" class="input-email" autocorrect="off" onfocus="myFunction(x);" readonly>
                
                </section>
                
                <section class="input-form-break">
                
                    <label for="vorname" class="vorname-label label">Vorname</label>
                    
                    <input type="text" id="vorname" class="vorname-input" autocorrect="off" onfocus="removeRead();" readonly>
                
                </section>
                
                <section class="input-form-break">
                    
                    <label for="nachname" class="nachname-label label">Nachname</label>
                    
                    <input type="text" id="nachname" class="nachname-input" autocorrect="off" onfocus="removeRead();" readonly>
                
                </section>
                
                <section class="input-form-break">
                    
                    <label for="password" class="password-label label">Passwort</label>
                    
                    <input type="password" id="password" class="password-input" autocorrect="off" autocomplete="off" onfocus="removeRead();" readonly>
                
                </section>
                
                <section class="input-form-break">
                    
                    <label for="password-repeat" class="password-label-repeat label">Passwort wiederholen</label>
                    
                    <input type="password" id="password-repeat" class="password-input-repeat" autocorrect="off" onfocus="removeRead();" readonly>
                
                </section>
                
                <section class="input-form-button">
                
                    <button type="submit" class="send-support-button-rec-076 support-button" value="submit">Senden</button>
                
                </section>
            
            </form>

Alles anzeigen

Spoiler anzeigen

JavaScript

<script>
        
            $(document).ready(function() {
            
                $('.send-support-button-rec-076').on('click', function(event) {
                
                    event.preventDefault();
                
                    var email = $('.input-email').val();
                    email = email.trim();
                    
                    var vorname = $('.vorname-input').val();
                    vorname = vorname.trim();
                    
                    var nachname = $('.nachname-input').val();
                    nachname = nachname.trim();
                    
                    var password = $('.password-input').val();
                    password = password.trim();
                    
                    var password_repeat = $('.password-input-repeat').val();
                    password_repeat = password_repeat.trim();
                    
                    var submit = $(this).val();
                    
                    $.ajax({
                        type: 'POST',
                        url: 'create_account/create_account.php',
                        data: {email:email, vorname:vorname, nachname:nachname, password:password, password_repeat:password_repeat, submit:submit},
                        success: function(data) {
                            $('#output-register-data').html(data);
                        }
                    });
                });
                
            // FIX AUTOFILL COMPLETE 
            
            function myFunction(x) {
                alert(x);
            }
                
        });
        
        </script>

Alles anzeigen

Arne Drews

Zieh mal die function aus dem .ready() raus.

basti1012

Wenn ich hier aus den "X" ein "this" mache geht es bei mir

Code

onfocus="myFunction(x);"

Nur im ersten post hast du es anders stehen

Arne Drews

Dann steckt bei Dir aber die function nicht im .ready().

basti1012

Stimmt hatte ich raus genommen.

Aber sollte

Code

$(document).ready(function() {

eigentlich nicht genau für sowas da sein ? Damit sowas nicht passiert?

Arne Drews

Grundsätzlich ja, aber Event-Attribute werden beim rendern des Layout bereits aufgelöst. Und das erzeugt in diesem Fall genau das Gegenteil des Erwarteten, denn die Funktion ist zu dem Zeitpunkt, wo das <input>-Tag gerendert wird nicht existent, sondern wird erst danach definiert.

Deshalb empfehle ich auch immer, die Attribute für Ereignisse nicht zu nutzen, sondern per Listener zu setzen.

strong97

Zitat von Arne Drews

Grundsätzlich ja, aber Event-Attribute werden beim rendern des Layout bereits aufgelöst. Und das erzeugt in diesem Fall genau das Gegenteil des Erwarteten, denn die Funktion ist zu dem Zeitpunkt, wo das <input>-Tag gerendert wird nicht existent, sondern wird erst danach definiert.

Deshalb empfehle ich auch immer, die Attribute für Ereignisse nicht zu nutzen, sondern per Listener zu setzen.

Danke für denn Tipp erstmal, aber wie setzt du die Ereignisse mit nem Listener? haste ein kleines Beispiel?

Arne Drews

Bspw. so:

JavaScript

document.querySelector( '.input-email' ).addEventListener('focus', function(e) { /* ... */ });
document.querySelector( '.input-email' ).onfocus = function(e) { /* ... */ };

oder wenn es jQuery sein muß halt so:

JavaScript

$( '.input-email' ).on( 'focus', function() { /* ... */ } );

Das sollte man dann aber wieder innerhalb von .ready() machen...

basti1012

Zitat von Arne Drews

Grundsätzlich ja, aber Event-Attribute werden beim rendern des Layout bereits aufgelöst. Und das erzeugt in diesem Fall genau das Gegenteil des Erwarteten, denn die Funktion ist zu dem Zeitpunkt, wo das <input>-Tag gerendert wird nicht existent, sondern wird erst danach definiert.

Deshalb empfehle ich auch immer, die Attribute für Ereignisse nicht zu nutzen, sondern per Listener zu setzen.

Ok das ergibt ein sinn. Habe ich mir auch noch nie gedanken rüber gemacht weil so sachen wie onfocus="" und onclick="" und so nie oder sehr selten mit in den html Code schreibe und den Fehler so noch nicht hatte . Ist interesant das man doch immer wieder was dazu lernt ,obwohl man denkt das wußte ich doch eigentlich schon .

Jetzt mitmachen!