[SOLVED] Controlling Javascript with php???

craigtolputt · August 17, 2009

Hi guys,

Im trying to create a cool booking form with php which is inside a div tag which uses javascript to scroll up and down. I have managed to get the form to look and work exactly how i need it to which is fine but the problem is when i submit the form it closes the div.

This is not what i need because if there is an error on the form like no email or tel then the user dont get to see the error message created by the form.

Also if the form submits with no errors it closes the div and the user dont get to see the success message.

Does anyone know how i can add validation to my form so if theres an error to display the error message and to tell the div not to close?????

THE PAGE CAN BE SEEN HERE AND YOU MUST CLICK ON BOOK A TOUR http://tiny.cc/sQ3k6

my code is below...

PAGE THAT THE SLIDING DIV IS IN

<!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>Branston Golf Club</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/stylecontact.css" rel="stylesheet" type="text/css" />
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo-1.4.0-min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/menudrop.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  $("#slideBody").each(function(){
    $(this).css("height", $(this).height() + "px");
    });

  $("#slidePanel").children(
    "#slideHeader").mouseup(function(){
  
    var body = $(this).parent().children("#slideBody");

    if(body.is(":hidden"))
      body.slideDown();
    else
      body.slideUp();
  });
});
</script> 
<script type="text/javascript">
$(document).ready(function(){

  $("#slideBody2").each(function(){
    $(this).css("height", $(this).height() + "px");
    });

  $("#slidePanel2").children(
    "#slideHeader2").mouseup(function(){
  
    var body = $(this).parent().children("#slideBody2");

    if(body.is(":hidden"))
      body.slideDown();
    else
      body.slideUp();
  });
});
</script> 
<script type="text/javascript">
$(document).ready(function(){

  $("#slideBody3").each(function(){
    $(this).css("height", $(this).height() + "px");
    });

  $("#slidePanel3").children(
    "#slideHeader3").mouseup(function(){
  
    var body = $(this).parent().children("#slideBody3");

    if(body.is(":hidden"))
      body.slideDown();
    else
      body.slideUp();
  });
});
</script> 
<script type="text/javascript"> 
  <!--
    jQuery(function( $ ){
	$('#featured') 
	.cycle({ 
		fx:     'scrollHorz', 
		speed:  'slow', 
		timeout: 7500, 
		prev:    '#prev',
		next:    '#next',
		before: onBefore
	});

	function onBefore() { 
		$('#featured-caption').html("<p class='fca'>" + this.alt + "</p>");
		$('.fca').hide().fadeIn("slow");
	}

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

<body>
<!--******* Wrapper *******-->
<div id="wrap">

<!--******* Left Column *******-->
<div id="left_col">

<!--******* Logo *******-->
        	<div id="logo">
                <a href="http://www.tktest.co.uk/branston/index.php" target="_self" title="The Branston Golf & Country Club">The Branston Golf & Country Club</a>
            </div>            
<!--******* END - Logo - END *******-->

<!--******* Left Container *******-->
        	<div id="leftcontainer">

<!--******* Promotions *******-->
        	<div id="promotions">
                <a href="http://www.tktest.co.uk/branston/promotions.html" target="_self" title="PROMOTIONS">PROMOTIONS</a>
            </div>
            <div id="slidePanel">
              <div id="slideHeader">SIGN UP TO PROMO UPDATES</div>
              <div id="slideBody"></div>
            </div>
<!--******* END - Promotions - END *******-->

<!--******* Book a Tour *******-->
		<div id="slidePanel2">
            <div id="slideHeader2">BOOK <strong>A TOUR</strong></div>
              <div id="slideBody2"><? include('booking.php'); ?></div>
            </div>          
<!--******* END - Book a Tour - END *******-->
<div id="bgcol">
		<div id="contactbg"></div>
<!--******* Contact Us *******-->
        	<div id="slidePanel3">
            <div id="slideHeader3"><strong>CONTACT</strong>US</div>
              <div id="slideBody3"></div>
            </div> 
            <div id="maplink"><a href="directions_and_location.html" title="FIND US ON THE MAP">FIND US ON THE MAP</a></div>  
            <div id="contact">
<p><strong>The Branston Golf<br />
				& Country Club</strong><br />
				Branston<br />
				Burton on Trent<br />
				Staffordshire<br />
				DE14 3DP<br />
						<br />
				<strong>Tel: 01283 512211</strong></p>
            </div>     
            </div>     
<!--******* END - Contact Us - END *******-->

</div>
<!--******* END - Left Container - END *******-->

</div>
<!--******* END - Left Column - END *******-->

<!--******* Right Column *******-->
<div id="right_col">

<!--******* Navigation *******-->
<div id="navwrap">
<div id="nav">
    			<ul id="menu1">
      			<li style="text-align:center"><a href="#" title="THE CLUB" class="mainbutt">THE CLUB</a>
                	<ul>
                    	<li><a href="http://www.tktest.co.uk/branston/membership.html" title="MEMBERSHIP" class="subbutt">MEMBERSHIP</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/the_club/clubhouse.html" title="CLUBHOUSE" class="subbutt">CLUBHOUSE</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/the_club/restaurant_and_menus.html" title="RESTAURANT & MENUS" class="subbutt">RESTAURANT & MENUS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/families_and_children.html" title="FAMILIES & CHILDREN" class="subbutt">FAMILIES & CHILDREN</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/the_club/news.html" title="NEWS" class="subbutt">NEWS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/whats_on.html" title="WHAT'S ON" class="subbutt">WHAT'S ON</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/the_club/contact_us.html" title="CONTACT US" class="subbutt">CONTACT US</a></li>
                        <hr />
                    </ul>
                </li>
                <li style="text-align:center"><a href="#" title="HEALTH & FITNESS" class="mainbutt">HEALTH & FITNESS</a>
                	<ul>
                    	<li><a href="http://www.tktest.co.uk/branston/membership.html" title="MEMBERSHIP" class="subbutt">MEMBERSHIP</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/health_and_fitness/gym.html" title="GYM" class="subbutt">GYM</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/health_and_fitness/classes.html" title="CLASSES" class="subbutt">CLASSES</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/health_and_fitness/pool_and_spa.html" title="POOL & SPA" class="subbutt">POOL & SPA</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/families_and_children.html" title="FAMILIES & CHILDREN" class="subbutt">FAMILIES & CHILDREN</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/health_and_fitness/personal_training.html" title="PERSONAL TRAINING" class="subbutt">PERSONAL TRAINING</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/health_and_fitness/hair_and_beauty.html" title="HAIR & BEAUTY" class="subbutt">HAIR & BEAUTY</a></li>
                        <hr />
                    </ul>
                </li>
                <li style="text-align:center"><a href="#" title="GOLF" class="mainbutt">GOLF</a>
                	<ul>
                    	<li><a href="http://www.tktest.co.uk/branston/membership.html" title="MEMBERSHIP" class="subbutt">MEMBERSHIP</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/golf/18_hole_course.html" title="18-HOLE COURSE" class="subbutt">18-HOLE COURSE</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/golf/9_hole_pay_and_play_course.html" title="9-HOLE PAY & PLAY COURSE" class="subbutt">9-HOLE PAY & PLAY COURSE</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/golf/driving_range.html" title="DRIVING RANGE" class="subbutt">DRIVING RANGE</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/visitors_and_golf_days.html" title="VISITORS & GOLF DAYS" class="subbutt">VISITORS & GOLF DAYS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/golf/golf_shop_and_coaching.html" title="GOLF SHOP & COACHING" class="subbutt">GOLF SHOP & COACHING</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/golf/member_competitions.html" title="MEMBER COMPETITIONS" class="subbutt">MEMBER COMPETITIONS</a></li>
                        <hr />
                    </ul>
                </li>
			<li style="text-align:center"><a href="#" title="EVENTS" class="mainbutt">EVENTS</a>
                	<ul>
                    	<li><a href="http://www.tktest.co.uk/branston/whats_on.html" title="WHAT'S ON" class="subbutt">WHAT'S ON</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/events/moulin_rouge_parties.html" title="MOULIN ROUGE PARTIES" class="subbutt">MOULIN ROUGE PARTIES</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/events/tribute_nights.html" title="TRIBUTE NIGHTS" class="subbutt">TRIBUTE NIGHTS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/events/christmas.html" title="CHRISTMAS" class="subbutt">CHRISTMAS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/events/sunday_brunch.html" title="SUNDAY BRUNCH" class="subbutt">SUNDAY BRUNCH</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/events/parties.html" title="PARTIES" class="subbutt">PARTIES</a></li>
                        <hr />
                    </ul>
                </li>
                <li style="text-align:center"><a href="#" title="BUSINESS" class="mainbutt">BUSINESS</a>
                	<ul>
                    	<li><a href="http://www.tktest.co.uk/branston/business/meetings.html" title="MEETINGS" class="subbutt">MEETINGS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/business/exhibitions.html" title="EXHIBITIONS" class="subbutt">EXHIBITIONS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/visitors_and_golf_days.html" title="GOLF DAYS" class="subbutt">GOLF DAYS</a></li>
                        <hr />
                        <li><a href="http://www.tktest.co.uk/branston/business/corporate_membership.html" title="CORPORATE MEMBERSHIP" class="subbutt">CORPORATE MEMBERSHIP</a></li>
                        <hr />
                    </ul>
                </li>
                <li style="text-align:center"><a href="http://www.tktest.co.uk/branston/weddings.html" title="WEDDINGS" class="mainbutt">WEDDINGS</a></li>
       			</ul>
</div>
</div>

<!--******* END - Navigation - END *******-->

<!--******* Feature Image *******-->	
<div id="main"> 
  <div id="featured"> 
		<img src="images/feature_img/home_1.jpg" width="725" height="349" alt="TEE IN THE AFTERNOON<br />
            <span>A QUICK 18 HOLES AFTER LUNCH<br />
        	FROM JUST £30</span>" /> 
		<img src="images/feature_img/home_2.jpg" width="725" height="349" alt="A FITTER, HEALTHIER YOU<br />
            <span>GYM MEMBERSHIP<br />
        	FROM JUST £35 PER MONTH</span>" /> 
     		<img src="images/feature_img/home_3.jpg" width="725" height="349" alt="ESCAPE AND RELAX<br />
            <span>WITH ONE OF OUR PAMPER DAYS<br />
        	FROM JUST £75</span>" /> 
            <img src="images/feature_img/home_4.jpg" width="725" height="349" alt="AT THE END OF A LONG DAY<br />
            <span>IT’S TIME TO UNWIND</span>" />  
	</div> 
	<div id="featured-caption"></div> 
        
  <div id="content">
  			<div id="leftcon">
            		
                    <div id="play">
                    <div id="text">
                    <h1>Play</h1>
                    <p>The Macintoshes bought<br />
				umpteen bureaux, because<br />
                    Jupiter telephoned one<br />
                    irascible Jabberwocky,<br />
                    fights the purple bureaux,</p>
                    </div>
                    <a href="#" title="CLICK TO FIND OUT MORE">CLICK TO FIND OUT MORE</a>                    </div>
                    
                    <div id="meet">
                    <div id="text">
                    <h1>Meet</h1>
                    <p>The Macintoshes bought<br />
				umpteen bureaux, because<br />
                    Jupiter telephoned one<br />
                    irascible Jabberwocky,<br />
                    fights the purple bureaux,</p>
                    </div>
                    <a href="#" title="CLICK TO FIND OUT MORE">CLICK TO FIND OUT MORE</a>                    </div>
                    
                    <div id="workout">
                    <div id="text">
                    <h1>Work Out & Relax</h1>
                    <p>The Macintoshes bought<br />
				umpteen bureaux, because<br />
                    Jupiter telephoned one<br />
                    irascible Jabberwocky,<br />
                    fights the purple bureaux,</p>
                    </div>
                    <a href="#" title="CLICK TO FIND OUT MORE">CLICK TO FIND OUT MORE</a>                    </div>
                    
                    <div id="celebrate">
                    <div id="text">
                    <h1>Celebrate</h1>
                    <p>The Macintoshes bought<br />
				umpteen bureaux, because<br />
                    Jupiter telephoned one<br />
                    irascible Jabberwocky,<br />
                    fights the purple bureaux,</p>
                    </div>
                    <a href="#" title="CLICK TO FIND OUT MORE">CLICK TO FIND OUT MORE</a>                    </div>
                    
            </div>
  </div>
</div>
<!--******* END - Feature Image - END *******-->

<!--******* Footer *******-->
<div id="footer">
	<div id="linkage">
        		<p><a href="http://www.tktest.co.uk/branston/privacy_policy.html" target="_self" title="PRIVACY POLICY">PRIVACY POLICY</a> | <a href="http://www.tktest.co.uk/branston/terms_and_conditions.html" target="_self" title="TERMS & CONDITIONS">TERMS & CONDITIONS</a> | <a href="http://www.tktest.co.uk/branston/careers.html" target="_self" title="CAREERS">CAREERS</a></p>
        </div>
        <div id="author">
        		<p><a href="http://www.tolputtkeeton.co.uk" target="_blank" title="SITE DESIGNED BY TOLPUTT KEETON LIMITED">SITE DESIGNED BY TOLPUTT KEETON LIMITED</a></p>
         </div>
</div>
<!--******* END - Footer - END *******-->

</div>
<!--******* END - Right Column - END *******-->

</div>
<!--******* END - Wrapper - END *******-->
</body>
</html>

PHP PAGE WITH MY FORM IN

<div id="contact1">

<?
	// Attention! Please read the following.
	// It is important you do not edit pieces of code that aren't tagged as a configurable options identified by the following:

        // Configuration option.

	// Each option that is easily editable has a modified example given.


	$error    = '';
        $email    = ''; 
        $phone    = '';
        $interest  = ''; 
        $month = ''; 
        $day   = '';
	$time   = '';
	$people = '';

        if(isset($_POST['contactus'])) {
        
        $email    = $_POST['email'];
        $phone   = $_POST['phone'];
        $interest  = $_POST['interest'];
        $month = $_POST['month'];
        $day   = $_POST['day'];
	$time   = $_POST['time'];
	$people   = $_POST['people'];


        if(trim($email) == 'Email address') {
        	$error = '<div class="error_message">Attention! Please enter a valid email address.</div>';
       
       } else if(!is_numeric($phone)) {
          $error = '<div class="error_message">Attention! Phone number can only contain digits.</div>';
       
        } else if(!isEmail($email)) {
        	$error = '<div class="error_message">Attention! You have enter an invalid e-mail address, try again.</div>';
        }

        if(trim($interest) == '') {
        	$error = '<div class="error_message">Attention! Please select area of interest.</div>';
        } else if(trim($month) == '') {
        	$error = '<div class="error_message">Attention! Please select a month.</div>';
        } else if(trim($day) == '') {
    	$error = '<div class="error_message">Attention! Please select a day.</div>';
    } else if(trim($time) == '') {
    	$error = '<div class="error_message">Attention! Please select a time.</div>';
    }

        if($error == '') {
        
		if(get_magic_quotes_gpc()) {
            	$comments = stripslashes($comments);
            }


         // Configuration option.
	 // Enter the email address that you want to emails to be sent to.
	 // Example $address = "joe.doe@yourdomain.com";

         $address = "craig@tolputtkeeton.co.uk";


         // Configuration option.
         // i.e. The standard subject will appear as, "You've been contacted by John Doe."

         // Example, $e_subject = '$name . ' has contacted you via Your Website.';

         $e_subject = 'You have a Tour booking for ' . $interest . '.';


         // Configuration option.
	 // You can change this if you feel that you need to.
	 // Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

	 $e_body = "You have a Tour booking for $interest, and they wish to come on a $day in $month at $time.\r\n\n";
	 $e_content = "Number of people in their party is $people.\r\n\n";

	 // Configuration option.
       	 // RIf you active phone number, swap the tags of $e-reply below to include phone number.
	 //$e_reply = "You can contact $name via email, $email or via phone $phone";
	 $e_reply = "You can contact them via email, $email";

         $msg = $e_body . $e_content . $e_reply;

         mail($address, $e_subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n");


	 // Email has sent successfully, echo a success page.

	 echo "<div id='succsess_page'>";
	 echo "<h1>Email Sent Successfully.</h1>";
	 echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
	 echo "</div>";
                      
	}
}

         if(!isset($_POST['contactus']) || $error != '') // Do not edit.
         {
?>

            <? echo $error; ?>
            
            <form  method="post" action="">

            <select name="month" type="text" id="month" class="month">
              <option value="January 2010">January 2010</option>
              <option value="February 2010">February 2010</option>
              <option value="March 2010">March 2010</option>
              <option value="April 2010">April 2010</option>
              <option value="May 2010">May 2010</option>
              <option value="June 2010">June 2010</option>
              <option value="July 2010">July 2010</option>
              <option value="August 2010">August 2010</option>
              <option value="October 2010">September 2010</option>
              <option value="Support">October 2010</option>
              <option value="November 2010">November 2010</option>
              <option value="December 2010">December 2010</option>
            </select>

		<br />
            <select name="day" type="text" id="day" class="day">
              <option value="Monday">Monday</option>
              <option value="Tuesday">Tuesday</option>
              <option value="Wednesday">Wednesday</option>
              <option value="Thursday">Thursday</option>
              <option value="Friday">Friday</option>
              <option value="Saturday">Saturday</option>
              <option value="Sunday">Sunday</option>
            </select>
            <select name="time" type="text" id="time" class="time">
              <option value="9.00am">9.00am</option>
              <option value="10.00am">10.00am</option>
              <option value="11.00am">11.00am</option>
              <option value="12.00am">12.00am</option>
              <option value="1.00pm">1.00pm</option>
              <option value="2.00pm">2.00pm</option>
              <option value="3.00pm">3.00pm</option>
              <option value="4.00pm">4.00pm</option>
              <option value="5.00pm">5.00pm</option>
              <option value="6.00pm">6.00pm</option>
              <option value="7.00pm">7.00pm</option>
              <option value="8.00pm">8.00pm</option>
              <option value="9.00pm">9.00pm</option>
            </select>

		<br />
            <select name="people" type="text" id="people" class="people">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select><label>Number of people</label>

		<br /><br />
            <label>Please select area of interest</label>
            <select name="interest" type="text" id="interest" class="interest">
              <option value="The Club">The Club</option>
              <option value="Health & Fitness">Health & Fitness</option>
              <option value="Golf">Golf</option>
              <option value="Events">Events</option>
              <option value="Business">Business</option>
              <option value="Weddings">Weddings</option>
            </select>

		<br />
            <input name="email" type="text" id="email" value="Email address" onfocus="if (this.value == this.defaultValue) {this.value='';}" onblur="if (this.value == '') {this.value = this.defaultValue;}" class="email">

		<br />
            <input name="phone" type="text" id="phone" value="Tel number" onfocus="if (this.value == this.defaultValue) {this.value='';}" onblur="if (this.value == '') {this.value = this.defaultValue;}" class="tel">

		<br />
            <input name="contactus" type="submit" class="submit" id="contactus" value="send" />

            </form>
            
<? } 

function isEmail($email) { // Email address verification, do not edit.
return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}

?>

     
     </div>

AND CSS FOR THE FORM

#contact1 { display: block; width: 202px;}

/* Form style */

label {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color:#000000; padding-top:3px;}
input, select { margin: 5px; border:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px;}   
.submit { cursor: pointer; width:41px; height:14px; background:url('../images/submit_bg.png') no-repeat; color:#003300; }
.submit:hover { color:#444; }
span.required{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #ff0000; } /* Select the colour of the * if the field is required. */

/* Style for the error message */

.error_message { display: block; background: #FBE3E4 url('../assets/error.gif') no-repeat 10px center; padding: 2px 2px 2px 35px; margin: 1px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px;}

#succsess_page h1 { background: url('../assets/success.gif') left no-repeat; padding-left:22px; }

.month{
float:left;
width:192px;
background: url('../images/select_bg.png') top left no-repeat;
}

.day{
float:left;
width:90px;
background:url('../images/select_bg.png') top left no-repeat;
}

.time{
float:right;
background:url('../images/select_bg.png') top left no-repeat;
}

.peopletext { float: right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color:#000000;}

.people{
float:left;
background:url('../images/select_bg.png') top left no-repeat;
}

.interest{
float:left;
width:192px;
background:url('../images/select_bg.png') top left no-repeat;
}

.email{
width:192px;
padding-left:4px;
float:left;
background:url('../images/input_bg.png') top left no-repeat;
}

.tel{
width:192px;
padding-left:4px;
float:left;
background:url('../images/input_bg.png') top left no-repeat;
}

CHEERS IN ADVANCE AND ANY HELP WILL BE A MASSIVE HELP.

THANKS

ignace · August 17, 2009

add an extra parameter to the form action="" for example ?expand=true read the query using js and split it and if expand == true then don't subtract it.

craigtolputt · August 18, 2009

Sorry im not that advanced with scripting and not sure what you mean??

So if i add <form method="post" action="?expand=true"> to the form, do i need to add something to the Javascript that controls the slide motion??

RichardRotterdam · August 18, 2009

Use php to check if the form was send after you submit the form you can set the css to show the hidden div.

something like this

<?php 
/** 
* check if the form was send 
* if it was then display block will be set
* if not then display none will be set
*/
$displayStatus = (isset($_POST['contactus']))?"block":"none"; 
?>
<div id="slideBody2" style="height: 230px; display: <?php echo $displayStatus;?>;">
Your form html here
</div>

craigtolputt · August 18, 2009

So in my index.php where the sliding div is i need to have...

<div id="slideBody2" style="height: 230px; display: <?php echo $displayStatus;?>;"><? include('booking.php'); ?></div>

and in my booking.php page where the form is i should have...

$displayStatus = (isset($_POST['contactus'])) 

        if(isset($_POST['contactus'])) {

craigtolputt · August 18, 2009

or should i put this in the head of the index.php??

<?php 
/** 
* check if the form was send 
* if it was then display block will be set
* if not then display none will be set
*/
$displayStatus = (isset($_POST['contactus']))?"block":"none"; 
?>

RichardRotterdam · August 18, 2009

Hmmm i think you don't really understand what the code does.

the following code

<?php
$displayStatus = (isset($_POST['contactus']))?"block":"none";

equals:

<?php
$displayStatus = "";
if (isset($_POST['contactus'])){
$displayStatus = "block";
} else {
$displayStatus = "none";
}

The displayStatus variable gets a value in that script. The value needs to be assigned before you can echo it so it just needs to be placed before you do:

 echo $displayStatus;

As for the booking.php page, you dont need to change that.

craigtolputt · August 18, 2009

no sorry i dont really understand the code or what it does i just really understand bits so i can use code and know a little of how to make things work but thats it.

I added the

<?php 
/** 
* check if the form was send 
* if it was then display block will be set
* if not then display none will be set
*/
$displayStatus = (isset($_POST['contactus']))?"block":"none"; 
?>

to the top of my index.php page and wala it works great thanks alot for all your help.

cheers

Craig

Sign In

[SOLVED] Controlling Javascript with php???

Recommended Posts

craigtolputt

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

craigtolputt

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

craigtolputt

Link to comment

Share on other sites

craigtolputt

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

craigtolputt

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information