HTML Jquery Submit funktion funktioniert nicht

[DreamGamer]

Hallo, ich würde gerne ein Formular in HTML machen zusammen mit Jquery wie ich es schon tausende male gemacht habe ... Aber mein Gehirn hat heute nicht so richtig Lust zu funktionieren weshalb ich einfach nicht drauf komme, wieso es nicht geht. Ich habe diesen HTML Code mit einem Formular wo ein Button und eine textarea enthalten ist. Ich möchte mit Jquery und AJAX zusammen das Formular wie immer bearbeiten und muss deshalb das Formular Ersteinmal canceln was ich mit return false mache was ja auch logisch ist... Nur weiß ich nicht wieso es so ist Es passiert einfach garnichts im Sinne die Seite lädt neu und hat das Formular an dieselbe Seite per post weiter gegeben... Und ja die JS Datei ist im Header verlinkt und funktioniert auch console.log geht ohne jquery... wetten es ist ein Todes dummer einfacher Fehler...? Ich komme nur einfach nicht drauf...
HTML:

<form id="chat-form" method="post">
    <textarea class="chat" placeholder="Type something..." maxlength="75" required autofocus></textarea>
    <button id="submit-button" type="submit" class="btn btn-primary submitBTN">Send</button>
</form>

JS:

$("#chat-form").submit(function() {
	var message = $(".chat").val();
	console.log("Message: '" + message + "'");

	return false;
});

 

[NullPointer]

"return false" reicht evtl. nicht, um das Abschicken des Formulars zu verhindern. Versuch mal:

$("#chat-form").submit(function(event) {
	var message = $(".chat").val();
	console.log("Message: '" + message + "'");
 
	event.preventDefault();
	return false;
});

 

[DreamGamer]

Ich habe schon immer nur return false benutzt hat bis jetzt immer funktioniert. Habe trd. gerade mal preventDefault aufgerufen aber leider geht es immer noch nicht. Kam vllt. irgendetwas beim neuen Jquery dazu bzw. hat sich da etwas geändert? Hatte zuvor immer eine alte Version benutzt.

MFG DreamGamer

 

[benneq]

Lass mal das "method=post" weg. Sollte ja unnötig sein, wenn du das Formular eh über jQuery abwickelst.

 

[DreamGamer]

Hatte ich am anfang bereits :/ Habe es aus verzweiflung hineingeschrieben xD weiß selber das es keinen sinn macht ^^ Und leider ändert es nichts :/

Info:
Komischer weise funktioniert es in CodePen... https://codepen.io/anon/pen/eVBmKr

 

[kling1]

statt einer klasse. der textarea einen namen oder eine id geben.. und die dann abfragen.. eine klasse ist nicht eindeutig..

so würde es ohne jquery aussehen

document.querySelector('#chat-form')
  .addEventListener('submit', event => {
  
  event.preventDefault()
  let message = document.querySelector('#chat').value
  
  console.log(`Message: ${message}`)
 
})

und

<form id="chat-form">
  <textarea id="chat" placeholder="Type something..." maxlength="75" required autofocus></textarea>
  <input id="submit-button" type="submit" class="btn btn-primary submitBTN">
</form>

überleg mal ob du jquery überhaupt brauchst

 

[DreamGamer]

Mit JQuery habe ich halt Erfahrung weshalb ich es benutze ^^ Und ich finde es macht es um einiges übersichtlicher. Das seltsame über CodePen funktioniert der Code nur local nicht also halt über einen localen appache2 Server... Genauso wie bei mir der normale document Code nicht funktioniert... Irgendeine Idee woran es liegen könnte?


Hat jemand eine idee weshalb es auf CodePen usw. funktioniert und bei mir local nicht? Benutzt Xampp für den Apache2 Server habe schon verschiedene Browser probiert... Hat alles nichts gebracht es ist ja anscheind kein Code problem :/ Hat jemand eine Idee?

Ergänzung (7. Februar 2018)

Fehler gefunden... Der Fehler war das ich das Java-Script vor dem Formular eingebunden habe wusste nicht das dies zum Fehler führt... Hätte ich mir aber denken können ^^ Danke für die Hilfe

 

[Soedy]

Pack deinen Code in:

$(document).ready(function () {
// dein Code
});

Dann wird er, unabhängig wo die JS Datei eingebunden wird, erst ausgeführt, wenn die Seite gerendert wurde.

 

[Teisi]

@Soedy gewöhnt euch gleich die "neue" schreibweiße an (deine ist depricated)

Anonymisieren:

(function($) { ...deinCode... })(jQuery);

document.ready:

$(function(){ ...deinCode... });



Wenn du das Script im Footer hast, sollte .ready eigentlich sowieso überflüssig sein.

 

[Andreas_]

Laut API-Beschreibung ist

$( document ).ready(function() {
    console.log( "ready!" );
});

gleichberechtigt mit

$(function() {
    console.log( "ready!" );
});

Letzteres ist lediglich eine verkürzte Form. Die längere Schreibweise macht genau dasselbe und wird empfohlen, wenn man unerfahrenen Usern das ganze nahe bringen will. Da ist nichts mit deprecated ...

Wenn du das Script im Footer hast, sollte .ready eigentlich sowieso überflüssig sein.

Wenn man .ready benutzt, dann muss man sich keine Gedanken machen, wo man welchen Code einfügt. Auch parallelisieren moderne Browser beispielsweise das Laden referenzierter externer Dateien, so dass auch der Aufruf im Footer ohne .ready schief gehen kann.

 

[Sparta8]

Die längere Schreibweise macht genau dasselbe und wird empfohlen, wenn man unerfahrenen Usern das ganze nahe bringen will. Da ist nichts mit deprecated ...

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated...

https://api.jquery.com/ready/

 

[Andreas_]

Mist. Sowas passiert wenn man 1-2 Jahre raus ist und nichts mehr mit jQuery gemacht hat. Danke für die Korrektur. Allerdings sollten die dann learn.jquery.com überarbeiten ... blöd wenn man es falsch lernt.

 

[Soedy]

Danke, hab mich lange nicht mit Neuerungen von jQuery beschäftigt