Formular per Ajax verschicken - Wird Java-Script nicht ausgeführt?
Eingetragen von BeTZe (105)am 13.08.2010 - 23:11 Uhr in
Hallo Zusammen,
ich möchte bei meiner Drupalinstallation ein Formular per Ajax verschicken. Wenn auf den Button gedrückt wird soll die Seite nicht neu geladen. Ich habe mich bei google bischen umgeschaut und habe da etwas gefunden. Unter anderem wird jQuery genutzt. Ich habe nun eine neue Page erstellt und folgendes eingefügt:
<style type="text/css">
.loading_icon {
float:right;
background:url(ajax-loader.gif) no-repeat 1px;
height:30px;
width:30px;
display:none;
}
.done {
background:url(iconIdea.gif) no-repeat 2px;
padding-left:20px;
font-size:12px;
width:70%;
margin:20px auto;
display: none;
}
.clear {clear:both}
.block {
width:400px;
text-align:left;
}
.input * {
padding:5px;
margin:2px;
font-size:12px;
}
.input label {
float:left;
width:75px;
font-weight:700
}
.input input.text {
float:left;
width:270px;
padding-left:20px;
}
.input textarea {
height:120px;
width:270px;
padding-left:20px;
font-size:12px;
}
.input #submit {
float:right;
margin-right:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//click event f�r submit button
$('#submit').click(function () {
//Daten von den HTML Feldern in JS-Vars �bersetzen
var name = $('input[name=name]');
var email = $('input[name=email]');
var comment = $('textarea[name=comment]');
var check = 'false';
if ($('#check').attr('checked')) {
check = 'true';
}
//die Daten sollen per GET an das PHP Skript weitergeleitet werden. Daf�r bauen wir einen
//String
var data = 'name=' + name.val() + '&email=' + email.val()
+ '&comment=' + encodeURIComponent(comment.val()) + ' &check=' + check;
//Icon w�hrend des Requests einblenden
$('.loading_icon').show();
//Request abschicken
$.ajax({
//Ort des Skriptes in dem die per GET �bertragenen Daten verarbeitet werden sollen
url: "savedata.php",
//Angabe der GET Methode, auch POST w�re m�glich. Allerdings nur sinnvoll
//bei gr��eren Datenmengen
type: "POST",
//Daten die gesendet werden sollen
data: data,
//bei Antwort des Requests (Response)
success: function (reqCode) {
//wenn saveData.php true bzw. den Status 1 zur�ckliefert
if (reqCode==1) {
//verstecken des Formulars
$('.myForm').fadeOut('slow');
//anzeigen der Erfolgsmeldung
$('.loading_icon').hide();
$('.done').fadeIn('slow');
//wenn der Request eine Form von false zur�ckschickt, Fehler ausgeben.
} else{
alert('Fehler beim Abschicken des Formulares.');
$('.loading_icon').hide();
}
}
});
return false;
//der return wird ben�tigt, damit das Formular nicht tats�chlich abgeschickt wird und
//sich nicht wie ein normales Form mit Seiten Refresh verh�lt.
});
});
</script>
<h1>mysrc.de - Ajax form example (Demo)</h1>
<p>Soll eine erfolgreiche Antwort erfolgen? <input type="checkbox" id="check" value="yes"/>ja</p>
<div class="block">
<div class="done" >
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
<div class="myForm">
<form onsubmit="return false;" action="savedata.php" method="post">
<div class="input">
<label>Name</label>
<input type="text" name="name" class="text" />
</div>
<div class="input">
<label>Email</label>
<input type="text" name="email" class="text" />
</div>
<div class="input">
<label>Kommentar</label>
<textarea name="kommentar" class="text textarea" /></textarea>
</div>
<div class="input">
<input type="submit" id="submit"/>
<div class="loading_icon"></div>
</div>
</form>
</div>
</div>
<div class="clear"></div>Leider passiert nichts wenn ich auf den Button klicke. Wenn ich den Code in eine einfache HTML Seite einfüge ohne Drupal, dann funktioniert alles. Wird das Java-Script durch Drupal nicht ausgeführt? Wie kann ich das kontrollieren?
Danke im voraus.
PS: Wie kann ich feststellen, welche Drupal Version ich installiert habe?
- Anmelden oder Registrieren um Kommentare zu schreiben
Benutze mal Firebug. Und
am 14.08.2010 - 01:53 Uhr
Benutze mal Firebug. Und irgendwas mit dein Encoding stimmt nicht.
//click event f�r submit button
2.Review: Nicht Formulare erstellen durch Plain-HTML. Dafür gibt es Module bzw. die wunderbare Form-Api.
Version
am 14.08.2010 - 08:10 Uhr
Hallo.
Wie kann ich feststellen, welche Drupal Version ich installiert habe?
Schau mal unter admin/reports/status. Dort steht die aktuell installierte Drupal-Version.
Und bitte nicht so lange Quelltexte posten; dafür gibt es spezielle Services. Siehe Lange Quelltexte oder Logdateien in den Verhaltensreglen.
Eventuell hilft Dir auch das Modul [do:ajax_load Ajax load] bei Deinem Vorgehen weiter.
Stefan
Sorry für den langen
am 14.08.2010 - 12:33 Uhr
Sorry für den langen Quelltext. Werde ich nächstes mal anders machen.
Das Formular ist nur zum testen. Später will ich die Funktion in ein Fussballtippspiel einbauen. Daher nützt mir da dann kein Modul etwas.
Ajax load gibt es nicht für meine Version. Bin noch bei 5.1.
Firebug sagt mir folgendes beim aufrufen der Seite
#submit".click is not a function[Break on this error] ('#submit').click(function () {
Wenn ich auf den Button klicke zeigt mir Firebug nichts neues an. Es passiert einfach nichts.