HTML Jquery Submit funktion funktioniert nicht

DreamGamer · 7. Februar 2018

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:

Code:

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

Code:

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

	return false;
});

NullPointer · 7. Februar 2018

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

Code:

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

DreamGamer · 7. Februar 2018

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 · 7. Februar 2018

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

DreamGamer · 7. Februar 2018

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 · 7. Februar 2018

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

Code:

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

und

HTML:

<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 · 7. Februar 2018

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 · 7. Februar 2018

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 · 7. Februar 2018

@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_ · 7. Februar 2018

Laut API-Beschreibung ist

Code:

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

gleichberechtigt mit

Code:

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

Teisi schrieb:
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 · 8. Februar 2018

Andreas_ schrieb:
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_ · 8. Februar 2018

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 · 8. Februar 2018

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

Suche

HTML Jquery Submit funktion funktioniert nicht

DreamGamer

Lieutenant

NullPointer

Lt. Commander

DreamGamer

Lieutenant

benneq

Fleet Admiral

DreamGamer

Lieutenant

kling1

Gast

DreamGamer

Lieutenant

Soedy

Gast

Teisi

Lt. Junior Grade

Andreas_

Commander

Sparta8

Lieutenant

Andreas_

Commander

Soedy

Gast

Ähnliche Themen