Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag13.07.2014 um 09:23 (UTC)    
Titel: [erledigt] Shop Code optimieren - Suche Hilfe bei Feinheiten

Hallo,

ich habe mir einen kleinen Test Shop auf die Webseite gebastelt, der an sich auch zu funktionieren scheint. (Das noscript Problem konnte ich bereits selbst lösen!)

Hier befindet sich der Shop:
http://www.musicformer.de/TEST-Shop.htm

Der Code ist etwas chaotisch weil ich kein super Programmierer bin und mir vieles immer hier im Forum zusammen suche.

Es wäre super, wenn mir Jemand helfen könnte, den Code mal sauber zu optimieren, falls nötig. Dann hätte man vielleicht auch eine kleine Shop Lösung für alle hier?

Mein Shop wird nur einen Artikel haben!

Hier mal der gesamte Code, halbwegs sortiert:
Code:
<!-- Enter deaktivieren -->
<script type="text/javascript">
function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = stopRKey;
</script>

<!-- Formmailer Startcode -->
<form action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" method="post" enctype="multipart/form-data" name="shop" style="display:none;">

<!-- Formmailer Ziel Emailadresse und Name -->
<input type="hidden" name="empfaenger_name" value="WEBNAME" /> <input type="hidden" name="empfaenger_mail" value="ZIELEMAIL" />

<!-- Gesamtes in die Mitte rücken -->
 <p style="margin-left:20%; margin-right:10%">

<!-- Überschrift -->
&nbsp;Hiermit bestelle ich: <span style="color: rgb(255, 0, 0);">   (DAS IST NUR EIN TEST SHOP!)</span><br />

<!-- der Text "Bestelleingang von" den man nur in der Mail sehen kann -->
<input type="hidden" name="Bestelleingang von" value="" />

<!-- Ausfüllfelder mit persönlichen Daten des Bestellers -->
<input maxlength="50" name="Vorname" type="text" size="50" required="" />&nbsp;&nbsp;Vorname *<br />
<input maxlength="50" name="Nachname" type="text" size="50" required="" />&nbsp;&nbsp;Nachname *<br />
<input maxlength="50" name="Geburtsdatum" type="text" size="50" required="" />&nbsp;&nbsp;Geburtsdatum *<br />
<input maxlength="50" name="Stra&szlig;e" type="text" size="50" required="" />&nbsp;&nbsp;Stra&szlig;e &amp; Nr *<br />
<input maxlength="6" name="PLZ" type="text" size="50" required="" />&nbsp;&nbsp;PLZ *<br />
<input maxlength="50" name="Ort" type="text" size="50" required="" />&nbsp;&nbsp;Ort *<br />
<input maxlength="50" name="mail" type="text" size="50" required="" />&nbsp;&nbsp;Email *<br />
<span style="font-size: smaller;">&nbsp;Ihre Daten werden nur f&uuml;r die Abwicklung Ihrer Bestellung verwendet!</span><br /><br />

<!-- Felder zum Ankreuzen -->
<input type="checkbox" name="Bestellung" value="Artikel XYZ f&uuml;r 00 EUR (inkl.  19% MwST)" required="" /> ARTIKEL XYZ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f&uuml;r 00,00 EUR (inkl. MwST)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Artikelbeschreibung <br /><br />
<input type="checkbox" name="AGB" value="Ich akzeptiere hierbei die AGB" required="" /> Ich akzeptiere hierbei diese <a href="http://www.musicformer.de/AGB.htm" target="_blank"><span style="color: rgb(255, 0, 0);">AGB</span></a><br /> <br />

<!-- Bestellbutton -->
<input style="height: 30px; width: 195px; background-color: #FFFFFF; color: #4682b4;" type="submit" value="Zahlungspflichtig bestellen" /></p>

<!-- Abschluss Satz -->
<p style="margin-left:20%; margin-right:10%">Sie erhalten unverz&uuml;glich eine Bestellbest&auml;tigung mit den Zahlungsdaten per Email!<br />

</p>
</form>

<!-- Prüfen ob Javascript aktiviert ist wenn nicht Meldung -->
<script type="text/javascript">
document.shop.style.display = 'block';</script><noscript>Ihr Browser unterstützt kein JavaScript! Bitte aktivieren Sie Javascript in den Einstellungen Ihres Browsers und öffnen Sie im Anschluss diese Seite erneut, um den Shop benutzen zu können!</noscript>


Vielen Dank schon einmal für Hilfe!


Zuletzt bearbeitet von musicformer am 15.07.2014, 20:29, insgesamt 8-mal bearbeitet
Beitrag13.07.2014 um 12:05 (UTC)    
Titel:

ich habe nun noch eine andere Variante gebastelt, in welcher die Eingabefelder vor dem Absenden noch einmal genauer auf passende Inhalte überprüft werden. Allerdings gelingt mir folgendes nicht:

- das Feld Geburtsdatum überprüfen ob ein gültiges Datum eingegeben wurde?
- das Feld PLZ überprüfen, ob 5 Zahlen drin stehen?
- die Kontrollkästchen beim Fokusieren, falls nicht angeklickt wurde, auch sichtbar zu markieren?
- Prüfen ob nach dem @ im Emailfeld auch noch Text steht?

Die Selfhtml Lösung zum Datum überprüfen mit Javascript begreife ich leider überhaupt nicht, wie ich die in meinen Code um- / einbauen muss? Sad

Hier der bisherige Code mit der Javasript Felder Überprüfung:

Code:
<!-- Enter deaktivieren -->
<script type="text/javascript">
function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = stopRKey;
</script>

<!-- Formulareingaben überprüfen -->
<script type="text/javascript">
function chkFormular () {
  if (document.shop.Vorname.value == "") {
    alert("Bitte Ihren Vornamen eingeben!");
    document.shop.Vorname.focus();
    return false;
  }
  if (document.shop.Nachname.value == "") {
    alert("Bitte Ihren Nachnamen eingeben!");
    document.shop.Nachname.focus();
    return false;
  }
  if (document.shop.Geburtsdatum.value == "") {
    alert("Bitte Ihr Geburtsdatum eingeben!");
    document.shop.Geburtsdatum.focus();
    return false;
  }
  if (document.shop.Strasse.value == "") {
    alert("Bitte Ihre Straße und Hausnummer eingeben!");
    document.shop.Strasse.focus();
    return false;
  }
  if (document.shop.PLZ.value == "") {
    alert("Bitte Ihr Postleitzahl eingeben!");
    document.shop.PLZ.focus();
    return false;
  }
  if (document.shop.Ort.value == "") {
    alert("Bitte Ihren Wohnort eingeben!");
    document.shop.Ort.focus();
    return false;
  }
  if (document.shop.mail.value == "") {
    alert("Bitte Ihre E-Mail-Adresse eingeben!");
    document.shop.mail.focus();
    return false;
  }
  if (document.shop.mail.value.indexOf("@") == -1) {
    alert("Das ist keine gültige Emailadresse!");
    document.shop.mail.focus();
    return false;
  }
  if (document.shop.Bestellung.checked == false) {
    alert("Bitte wählen Sie Ihr Produkt aus!");
    document.shop.Bestellung.focus();
    return false;
  }
  if (document.shop.AGB.checked == false) {
    alert("Bitte akzeptieren Sie AGB um fortfahren zu können!");
    document.shop.Bestellung.focus();
    return false;
  }

}
</script>


<!-- Formmailer Startcode -->
<form name = "shop" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" method="post" enctype="multipart/form-data" name="shop" style="display:none;" onsubmit="return chkFormular()">

<!-- Formmailer Ziel Emailadresse und Name -->
<input type="hidden" name="empfaenger_name" value="WEBNAME" /> <input type="hidden" name="empfaenger_mail" value="ZIELEMAIL" />

<!-- Gesamtes in die Mitte rücken -->
 <p style="margin-left:20%; margin-right:10%">

<!-- Überschrift -->
&nbsp;Hiermit bestelle ich: <span style="color: rgb(255, 0, 0);">   (DAS IST NUR EIN TEST SHOP!)</span><br />

<!-- der Text "Bestelleingang von" den man nur in der Mail sehen kann -->
<input type="hidden" name="Bestelleingang von" value="" />

<!-- Ausfüllfelder mit persönlichen Daten des Bestellers -->
<input maxlength="50" name="Vorname" type="text" size="50"/>&nbsp;&nbsp;Vorname *<br />
<input maxlength="50" name="Nachname" type="text" size="50"/>&nbsp;&nbsp;Nachname *<br />
<input maxlength="50" name="Geburtsdatum" type="text" size="50"/>&nbsp;&nbsp;Geburtsdatum *<br />
<input maxlength="50" name="Strasse" type="text" size="50"/>&nbsp;&nbsp;Stra&szlig;e &amp; Nr *<br />
<input maxlength="6" name="PLZ" type="text" size="50"/>&nbsp;&nbsp;PLZ *<br />
<input maxlength="50" name="Ort" type="text" size="50"/>&nbsp;&nbsp;Ort *<br />
<input maxlength="50" name="mail" type="text" size="50"/>&nbsp;&nbsp;Email *<br />
<span style="font-size: smaller;">&nbsp;Ihre Daten werden nur f&uuml;r die Abwicklung Ihrer Bestellung verwendet!</span><br /><br />

<!-- Felder zum Ankreuzen -->
<input type="checkbox" name="Bestellung" value="Artikel XYZ f&uuml;r 00 EUR (inkl.  19% MwST)"/> ARTIKEL XYZ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f&uuml;r 00,00 EUR (inkl. MwST)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Artikelbeschreibung <br /><br />
<input type="checkbox" name="AGB" value="Ich akzeptiere hierbei die AGB"/> Ich akzeptiere hierbei diese <a href="http://www.musicformer.de/AGB.htm" target="_blank"><span style="color: rgb(255, 0, 0);">AGB</span></a><br /> <br />

<!-- Bestellbutton -->
<input style="height: 30px; width: 195px; background-color: #FFFFFF; color: #4682b4;" type="submit" value="Zahlungspflichtig bestellen" /></p>

<!-- Abschluss Satz -->
<p style="margin-left:20%; margin-right:10%">Sie erhalten unverz&uuml;glich eine Bestellbest&auml;tigung mit den Zahlungsdaten per Email!<br />

</p>
</form>

<!-- Prüfen ob Javascript aktiviert ist wenn nicht Meldung -->
<script type="text/javascript">
document.shop.style.display = 'block';</script><noscript>Ihr Browser unterstützt kein JavaScript! Bitte aktivieren Sie Javascript in den Einstellungen Ihres Browsers und öffnen Sie im Anschluss diese Seite erneut, um den Shop benutzen zu können!</noscript>


Zuletzt bearbeitet von musicformer am 13.07.2014, 13:21, insgesamt 2-mal bearbeitet
Beitrag13.07.2014 um 13:24 (UTC)    
Titel:

Ich habe es nun auch mit den neuen HTML5 Feldtypen versucht und die prüfen das auch sehr schön automatisch aber leider reagieren die auf manche Sachen nicht mehr z. B. auf size etc. und die passen sich auch vom Design nicht an. Textfelder sehen ganz anders aus wie diese neuen Typen etc. ...


Hier mal der Code mit ein paar HTML5 Feldern:

Code:
<!-- Enter deaktivieren -->  <script type="text/javascript">
function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = stopRKey;
</script>

<!-- Formulareingaben überprüfen --> <script type="text/javascript">
function chkFormular () {
  if (document.shop.Vorname.value == "") {
    alert("Bitte Ihren Vornamen eingeben!");
    document.shop.Vorname.focus();
    return false;
  }
  if (document.shop.Nachname.value == "") {
    alert("Bitte Ihren Nachnamen eingeben!");
    document.shop.Nachname.focus();
    return false;
  }
  if (document.shop.Geburtsdatum.value == "") {
    alert("Bitte Ihr Geburtsdatum eingeben!");
    document.shop.Geburtsdatum.focus();
    return false;
  }
  if (document.shop.Strasse.value == "") {
    alert("Bitte Ihre Straße und Hausnummer eingeben!");
    document.shop.Strasse.focus();
    return false;
  }
  if (document.shop.PLZ.value == "") {
    alert("Bitte Ihr Postleitzahl eingeben!");
    document.shop.PLZ.focus();
    return false;
  }
  if (document.shop.Ort.value == "") {
    alert("Bitte Ihren Wohnort eingeben!");
    document.shop.Ort.focus();
    return false;
  }
  if (document.shop.mail.value == "") {
    alert("Bitte Ihre E-Mail-Adresse eingeben!");
    document.shop.mail.focus();
    return false;
  }
  if (document.shop.mail.value.indexOf("@") == -1) {
    alert("Das ist keine gültige Emailadresse!");
    document.shop.mail.focus();
    return false;
  }
  if (document.shop.Bestellung.checked == false) {
    alert("Bitte wählen Sie Ihr Produkt aus!");
    document.shop.Bestellung.focus();
    return false;
  }
  if (document.shop.AGB.checked == false) {
    alert("Bitte akzeptieren Sie AGB um fortfahren zu können!");
    document.shop.Bestellung.focus();
    return false;
  }

}
</script>

<!-- Formmailer Startcode -->
<form name="shop" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" method="post" enctype="multipart/form-data" style="display:none;" onsubmit="return chkFormular()">

<!-- Formmailer Ziel Emailadresse und Name -->
<input type="hidden" name="empfaenger_name" value="WEBNAME" /> <input type="hidden" name="empfaenger_mail" value="ZIELEMAIL" />

<!-- Gesamtes in die Mitte rücken -->
    <p style="margin-left:20%; margin-right:10%"><!-- Überschrift -->  &nbsp;Hiermit bestelle ich: <span style="color: rgb(255, 0, 0);">   (DAS IST NUR EIN TEST SHOP!)</span><br />

<!-- der Text "Bestelleingang von" den man nur in der Mail sehen kann -->
<input type="hidden" name="Bestelleingang von" value="" />

<!-- Ausfüllfelder mit persönlichen Daten des Bestellers -->
<input maxlength="50" name="Vorname" type="text" size="50" />&nbsp;&nbsp;Vorname *<br />
<input maxlength="50" name="Nachname" type="text" size="50" />&nbsp;&nbsp;Nachname *<br />
<input maxlength="50" name="Geburtsdatum" type="date" size="50" />&nbsp;&nbsp;Geburtsdatum *<br />
<input maxlength="50" name="Strasse" type="text" size="50" />&nbsp;&nbsp;Stra&szlig;e &amp; Nr *<br />
<input pattern="[0-9]{5}" name="PLZ" title="5stellige Zahl!" />&nbsp;&nbsp;PLZ *<br />
<input maxlength="50" name="Ort" type="text" size="50" />&nbsp;&nbsp;Ort *<br />
<input maxlength="50" name="mail" type="email" size="50" />&nbsp;&nbsp;Email *<br />
<span style="font-size: smaller;">&nbsp;Ihre Daten werden nur f&uuml;r die Abwicklung Ihrer Bestellung verwendet!</span><br />
    <br />

<!-- Felder zum Ankreuzen -->
<input type="checkbox" name="Bestellung" value="Artikel XYZ f&uuml;r 00 EUR (inkl.  19% MwST)" /> ARTIKEL XYZ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f&uuml;r 00,00 EUR (inkl. MwST)<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Artikelbeschreibung <br />
    <br />
<input type="checkbox" name="AGB" value="Ich akzeptiere hierbei die AGB" /> Ich akzeptiere hierbei diese <a href="http://www.musicformer.de/AGB.htm" target="_blank"><span style="color: rgb(255, 0, 0);">AGB</span></a><br />
    <br />

<!-- Bestellbutton -->
<input style="height: 30px; width: 195px; background-color: #FFFFFF; color: #4682b4;" type="submit" value="Zahlungspflichtig bestellen" /></p>

<!-- Abschluss Satz -->
<p style="margin-left:20%; margin-right:10%">Sie erhalten unverz&uuml;glich eine Bestellbest&auml;tigung mit den Zahlungsdaten per Email!</p>
</form>

<!-- Prüfen ob Javascript aktiviert ist wenn nicht Meldung -->
<script type="text/javascript">
document.shop.style.display = 'block';</script><noscript>Ihr Browser unterstützt kein JavaScript! Bitte aktivieren Sie Javascript in den Einstellungen Ihres Browsers und öffnen Sie im Anschluss diese Seite erneut, um den Shop benutzen zu können!</noscript>


Also es darf mir gerne einer helfen, ich probier gerne aus! Wink


Zuletzt bearbeitet von musicformer am 13.07.2014, 14:39, insgesamt 4-mal bearbeitet
Beitrag14.07.2014 um 20:47 (UTC)    
Titel:

So, also ich bin schon mal ein Stück selbst weiter gekommen und zwar hab ich das PLZ Feld nun erledigt gekriegt.

Mir fehlt jetzt noch:

mit Javascript Befehlen a là ... if (document.shop. wie im Beispiel zuvor ...

- Emailfeld prüfen ob nach dem Punkt noch ein Text steht (@ und . hab ich schon)
- Feld Geburtsdatum prüfen, ob ein Datum drin steht (mit Vorgabe TT.MM.JJJJ o.ä. ..)

Ich poste den aktuellen Code aber erst, wenn mir hier auch einer hilft ... Mr. Green
Beitrag15.07.2014 um 18:21 (UTC)    
Titel:

So, also den Rest hab ich nun durch andere Foren erklärt bekommen.

Somit kann man den Thread nun als erledigt markieren! Herzlichen Dank für die großartige umfassende Unterstützung und so, ist schon noch Jemand hier oder hab ich irgendwas falsch gemacht wieder? Laughing


Zuletzt bearbeitet von musicformer am 15.07.2014, 19:22, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de