Zwei Formulare stören sich gegenseitig
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
abschicken
all
code
datei
domain
eintragen
email
entfernen
fehler
filter
form
formular
input
message
post
server
show
tab
trigger
webseite
-
Hallo,
habe folgende Formulare, nun erhalte ich bei Formular "Webseite eintragen" sobald ich etwas ausfülle 2 Mails, und bei Kontakt gar keine...
Formular "Webseite eintragen"
<!-- Website Section --> <section id="eintragen"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Webseite eintragen</h2> <h3 class="section-subheading text-muted">Tragen Sie hier Ihre Webseite ein, und wir werden diese schnellstmöglich hinzufügen.<br/>Wir behalten uns das Recht vor, Webseiten die nicht zu unseren Dienst passen zu entfernen.</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <form name="sentMessage" id="pageForm" novalidate> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Vor- und Nachname *" id="name" required data-validation-required-message="Bitte geben Sie Ihren Vor- und Nachnamen ein."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="E-Mail *" id="email" required data-validation-required-message="Bitte geben Sie Ihre E-Mail - Adresse ein."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="tel" class="form-control" placeholder="Telefonnummer *" id="phone" required data-validation-required-message="Bitte geben Sie Ihre Telefonnummer ein."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Internetadresse (URL) *" id="domain" required data-validation-required-message="Bitte geben Sie Ihre Internetadresse ein."> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea class="form-control" placeholder="Bitte geben Sie eine Kurzbeschreibung Ihrer Webseite ein. *" id="message" required data-validation-required-message="Bitte geben Sie eine Kurzbeschreibung Ihrer Webseite ein."></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="clearfix"></div> <div class="col-lg-12 text-center"> <div id="pagesuccess"></div> <button type="submit" class="btn btn-xl">Abschicken</button> </div> </div> </form> </div> </div> </div> </section>
Javascript Datei zu Webseite eintragen (page_me.js)
$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var domain = $("input#domain").val(); var message = $("textarea#message").val(); var firstName = name; // For Success/Failure Message // Check for white space in name for Success/Fail message if (firstName.indexOf(' ') >= 0) { firstName = name.split(' ').slice(0, -1).join(' '); } $.ajax({ url: "././mail/page_me.php", type: "POST", data: { name: name, phone: phone, email: email, domain: domain, message: message }, cache: false, success: function() { // Success message $('#pagesuccess').html("<div class='alert alert-success'>"); $('#pagesuccess > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#pagesuccess > .alert-success') .append("<strong>Your message has been sent. </strong>"); $('#pagesuccess > .alert-success') .append('</div>'); //clear all fields $('#pageForm').trigger("reset"); }, error: function() { // Fail message $('#pagesuccess').html("<div class='alert alert-danger'>"); $('#pagesuccess > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#pagesuccess > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); $('#pagesuccess > .alert-danger').append('</div>'); //clear all fields $('#pageForm').trigger("reset"); }, }) }, filter: function() { return $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); }); }); /*When clicking on Full hide fail/success boxes */ $('#name').focus(function() { $('#pagesuccess').html(''); });
und hier das Kontaktformular:
<!-- Contact Section --> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Kontakt</h2> <h3 class="section-subheading text-muted">Für Fragen und Anregungen stehen wir Ihnen jederzeit gerne zur Verfügung.</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <form name="sentMessage" id="contactForm" novalidate> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Vor- und Nachname *" id="name" required data-validation-required-message="Bitte geben Sie Ihren Vor- und Nachnamen ein."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="E-Mail *" id="email" required data-validation-required-message="Bitte geben Sie Ihre E-Mail - Adresse ein."> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="tel" class="form-control" placeholder="Telefonnummer *" id="phone" required data-validation-required-message="Bitte geben Sie Ihre Telefonnummer ein."> <p class="help-block text-danger"></p> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea class="form-control" placeholder="Ihre Nachricht *" id="message" required data-validation-required-message="Bitte geben Sie eine Nachricht ein."></textarea> <p class="help-block text-danger"></p> </div> </div> <div class="clearfix"></div> <div class="col-lg-12 text-center"> <div id="success"></div> <button type="submit" class="btn btn-xl">Abschicken</button> </div> </div> </form> </div> </div> </div> </section>
dazu die contact_me.js:
$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var message = $("textarea#message").val(); var firstName = name; // For Success/Failure Message // Check for white space in name for Success/Fail message if (firstName.indexOf(' ') >= 0) { firstName = name.split(' ').slice(0, -1).join(' '); } $.ajax({ url: "././mail/contact_me.php", type: "POST", data: { name: name, phone: phone, email: email, message: message }, cache: false, success: function() { // Success message $('#success').html("<div class='alert alert-success'>"); $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-success') .append("<strong>Your message has been sent. </strong>"); $('#success > .alert-success') .append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, error: function() { // Fail message $('#success').html("<div class='alert alert-danger'>"); $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); $('#success > .alert-danger').append('</div>'); //clear all fields $('#contactForm').trigger("reset"); }, }) }, filter: function() { return $(this).is(":visible"); }, }); $("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); }); }); /*When clicking on Full hide fail/success boxes */ $('#name').focus(function() { $('#success').html(''); }); -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Bei Ajax wäre es noch wichtig, auch die Serverseite zu kennen. Kannst du vielleicht mal deine PHP-Skripte reinstellen?
Sind beide Ausschnitte von der gleichen Seite? Wenn ja, dann benutzt du bspw. die ID "email" zweimal, weshalb jQuery dann nicht weiß, welches Input-Feld gesendet werden soll. Das würde dann ein bisschen durcheinander ergeben...
Zum Debuggen würde ich dir empfehlen, die Fehlermeldungen auf der Serverseite zurückzuschicken (auch per Ajax) und dann per alert() anzuzeigen. Wenn alles funktioniert, solltest du das natürlich wieder entfernen. Aber so kannst du nachvollziehen, woran es liegt.
Erklären, warum eine E-Mail zweimal abgeschickt wird, kann ich nicht. Das beim Kontaktformular allerdings nichts gesendet wird kann viele Gründe haben. Hast du schon nachverfolgt, ab welchem Punkt es nicht mehr weitergeht? Wird Ajax nicht gesendet oder gibt es einen Fehler beim Empfangen, beim Auslesen der Daten durch das Skript, bei der Validierung oder beim Verschicken der Mail...?
mfg
Jonas -
Vollkommen logisch.
Beide js sind bis auf die Validierung und Ajax Variablen ja identisch. Schickst du also das Kontaktformular ab wird ja gleich das erste js ausgeführt. Es müsste dir dann ja auch normalerweise ein paar Fehler anzeigen.
Schickst du das andere Formular ab, dann wird die erste js Datei ausgeführt und weil es keinen Fehler gibt, wo das Script stoppt, gleich danach das zweite.
Du müsstest also dem Submit schon gleich sagen, welche js Datei ausgeführt werden soll, oder den js Dateien explizit sagen welches Formular abgearbeitet werden soll. -
Mein Tipp:
Benutze die Funktion include() und hole einfach externe Dateien in deine meinetwegen index.php
Das geht auch mit dem <iframe>-Tag -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
