Probleme mit Include eines Formulares..

onpoint · 03.02.2011

Hallo,

stehe vor einem Problem, was ich mir nicht erklären kann.

Ich hab mit html, php und javascript ein kleines Formular gebastelt. Dieses will ich in meine Seite per include integrieren.

Das Formular sieht so aus:

Die Seite, auf der ich das included hab ist diese hier:

bzw. hab ich sie wegen dem include-befehl ja in php umbenannt...also ist das die letzendliche Datei:

Im Gegensatz zur HTML zerbaut der meine komplette Seite, sobald ich das Formular in die div mit dem kasten include..

und was ich mir nicht erklären kann....den ABSCHICKEN Button zeigt er mir erst garnicht!

Hier ist mal der Code des Formulares:

Code:

<link href="style/buchungsformular.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $("#buchungsformular").validate();
});
//-->
</script>

<?php
if($_GET['good'] == 'yes' ){
    echo('<p>Die Nachricht ist bei mir eingegangen und wird schnellstmöglich bearbeitet</p>');
}
?>

<form action="formmail.php" method="post" name="buchungsformular" id="buchungsformular">
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
 <input type="hidden" name="recipients" value="bookingwHodiHdonpointmusic.de" />
  <input type="hidden" name="required" value="vorname:Vorname,nachname:Nachname,email:deine E-Mail Adresse,event:Event,datum:Datum, uhrzeit:Uhrzeit, nachricht:Deine Nachricht" />
  <input type="hidden" name="subject" value="Buchungsformular" />
  <input type="hidden" name="good_url" value="buchungsformular.php?good=yes" />
    <input type="hidden" name="derive_fields" value="email=email,realname=nachname" />
<fieldset>
     <legend>Persönliche Daten</legend>
     <label for="vorname">Vorname:</label> <input type="text" name="vorname" id="vorname" /><br />
     <label for="nachname">Nachname:</label> <input type="text" name="nachname" id="nachname" /><br />
     <label for="email">E-Mail:</label> <input type="text" name="email" id="email" class="required email" /><br />
     <label for="event">Event:</label> <input type="text" name="event" id="event" class="required" /><br />
     <label for="datum">Datum:</label> <input type="text" name="datum" id="datum" class="required" /><br />
     <label for="uhrzeit">Uhrzeit:</label> <input type="text" name="uhrzeit" id="uhrzeit" /><br />
     
     </fieldset>
     <fieldset>
     <legend>Nachricht</legend>
     <label for="betreff">Betreff:</label> <input type="text" name="betreff" id="betreff" /><br />
     <label for="nachricht">Nachricht:</label><textarea name="nachricht" id="nachricht" cols="20" rows="10" class="required"></textarea><br />
       <input type="submit" value="Abschicken" name="send" id="send" class="button" /> <input type="reset" value="Zurücksetzen" name="reset" id="reset" class="button" />
      </fieldset>

</form>

und hier meine booking.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ONPOINTMUSIC</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<!-- styles needed by jScrollPane -->
<link type="text/css" href="scrollpane/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="scrollpane/script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="scrollpane/script/jquery.jscrollpane.min.js"></script>

<script type="text/javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();

});
    
</script>
</head>
<body>

<div id="header">
<object type="application/x-shockwave-flash" data="skins/emff_silk.swf" width="84" height="32" style="position:absolute;top:5px;left:9px;">
 <param name="movie" value="skins/emff_silk.swf">
 <param name="bgcolor" value="#000000">
 <param name="FlashVars" value="src=example.mp3">
</object>
<marquee scrollamount="2" scrolldelay="5" width="400" style="position:absolute;top:20px;left:110px">
<b>Der nächste Gig ist noch nicht bekannt. Sobald etwas bekannt wird, wird es sofort hier erscheinen</b>
</marquee>
<ul id="navi-top">
<li><a href="shop.html">Shop</a></li>
<li><a href="booking.html">Booking</a></li>
<li><a href="bboying.html">B-Boyng</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li class="noBorder"><a href="contact.html">Contact</a></li>
</ul>


<ul id="navi">
<li>
<a href="http://www.myspace.com/onpoint-music" target="_blank">Myspace</a>
</li>
<li>
<a href="http://www.facebook.com/pages/Onpointmusic/180335105328351" target="_blank">Facebook</a>
</li>
<li>
<a href="http://twitter.com/onpoint_music" target="_blank">Twitter</a>
</li>
<li class="noBorder">
<a href="kommt noch" target="_blank">Youtube</a>
</li>
</ul>
<p style="position:absolute;top:245px;left:71px;color:#000;letter-spacing:2px;font-size:16px;text-transform:uppercase;">
www.onpointmusic.de
</p>


<div class="button"></div>
<div class="button" style="left:171px;"></div>
<div class="button" style="left:331px;"></div>
<div class="button" style="left:491px;"></div>
<div class="button" style="left:651px;"></div>
<div class="button" style="left:811px;"></div>


<ul id="navi-haupt">
<li style="padding-left:53px;"><a href="index.html">Home</a></li>
<li style="padding-left:113px;"><a href="about.html">About</a></li>
<li style="padding-left:108px;"><a href="music.html">Music</a></li>
<li style="padding-left:108px;"><a href="videos.html">Videos</a></li>
<li style="padding-left:106px;"><a href="dates.html">Dates</a></li>
<li style="padding-left:90px;"><a href="guestbook.html">Guestbook</a></li>
</ul>

</div>

<div id="content">
<img src="Bilder/textbooking.jpg" alt="About" style="margin-left:5px;"  />
<div class="column">
<div class="highlightabout scroll-pane" style="height:430px;position:relative;">
<p style="text-transform:uppercase;margin:10px 10px 10px 10px;font-weight:bold;">
Ihr könnt mich gegen Fahrtkosten und einer geringen aufmerksamkeits-<br />gage auch gerne für eure eigenen veranstaltungen buchen! dafür bitte einfach das entsprechende formular ausfüllen oder mir direkt eine e-mail an <font color="#035c02">booking@onpointmusic.de</font> zusenden.
</p>

<?php
include("buchungsformular.php");
?>


</div>

</div>

<div class="column noMargin">
<div class="highlightabout" style="height:200px!important;margin-bottom:20px;position:relative;">
<p style="text-transform:uppercase; margin:20px 10px 0 17px;"> 
<font style="font-size:11px;">Booking per E-Mail</font><br />
an: <font color="#035c02">booking@onpointmusic.de</font><br /><br />
<font style="font-size:11px;">Booking per Messenger</font><br />
MSN: <font color="#035c02">info@onpointmusic.de</font><br />
ICQ: <font color="#035c02">617 - 854 - 307</font><br />
SKYPE: <font color="#035c02">onpointmusic</font>
<br /><br /><br />
<font style="font-size:8px;">Oder direkt im Kontaktformular!</font>
</p>
<img src="Bilder/telefon.jpg" style="position:absolute;top:25px;left:210px;" />
</div>


<div>
<img src="Bilder/tape.jpg" alt="Booking" style="padding-left:40px;" />
</div>

</div>

</div>
<div class="clear"></div>
<div id="footercontainer">
<div id="footer">
<p style="position:absolute;left:765px;top:71px;">Copyright 2011: Daniele De Rosa</p>
</div>
</div>


</body>
</html>

Seltsam ist auch, dass der "Zurücksetzen" Button im "Includierten" andere Maße hat als im Originalen..

Wäre dankbar für Hilfe..

Lg

SineTempore · 03.02.2011

AW: Probleme mit Include eines Formulares..

der unterschied zwischen den beiden ist, dass der body beim php ein padding von 40px hat. schau mal ob du dazu im stylesheet mehr findest. Ansonsten sehen die 2 Seiten bei mir gleich aus.

EDIT: und die schriftfarbe des body wird auf schwarz gestellt. würde ich evtl auch ändern.

onpoint · 03.02.2011

AW: Probleme mit Include eines Formulares..

haha du hast mich auf den fehler gebracht!

in der css des formulares hab ich im body in der tat noch 40px padding gegeben, was bei mir zur inkorrekten wiedergabe der seite führte. jetzt sieht sie wieder gut aus!

Jedoch gibt es Probleme mit den Buttons des Formulares!

Wenn ich die Klasse (class) entferne werden sie richtig dargestellt und auch BEIDE.

+ stylesheet wird nur EINS angezeigt, und das nicht korrekt!

meine klasse in der css:

form .button {
margin-left:80px;
width:230px;
background:#666;
font-weight:bold;
cursorointer;

}

form .button:hover {
background:#035c02;
}

SineTempore · 03.02.2011

AW: Probleme mit Include eines Formulares..

Das Problem ist, dass deine Klasse .button aus der style.css (Zeile 205) auch noch wirkt.
Lad dir mal Firebug für Firefox. Damit kannst du dann alles ganz genau nachprüfen.

onpoint · 03.02.2011

AW: Probleme mit Include eines Formulares..

hmm okay. ich werds gleich mal testen!

aber müsste der "form" befehl in der klasse nicht dafür sorgen, dass nur die angaben im form tag betroffen sind?

SineTempore · 03.02.2011

AW: Probleme mit Include eines Formulares..

das form gibt den angaben nur eine höhere priorität. die anderen sachen bleiben trotzdem erhalten. Deswegen funktionieren ja auch css resets usw.

onpoint · 03.02.2011

AW: Probleme mit Include eines Formulares..

Und wieder was gelernt!

Danke! Funktioniert jetzt alles!

onpoint · 04.02.2011

AW: Probleme mit Include eines Formulares..

Es geht weiter mit den Problemen!

Sobald jemand auf "Abschicken" geht öffnet die Bestätigung "Email erhalten blabla" mit dem kompletten Formular in nem neuen Fenster...allerdings möchte ich dass ers direkt dort anzeigt, wo ichs included hab...wo liegt der fehler?

ich finde leider nichts...

lg