Three little pigs and Buttons Conflict

**Webiter** · 07-01-2012, 10:22 PM

Thanks for the pointers. I have now grasped that the javascript does nothing as you say and I have removed it.

I notice that the <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a> is working. This I cannot explain as you say

there's no element by that id on the page

.

However when applied within the div like so at the top of the form:

HTML Code:

<div id="form_title">Contact Us Form<a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></div>

it is responding by hiding the popup.

Whereas when applied within the form like so at the bottom:

HTML Code:

<p><input type="hidden" name="check" value="c"><input type="submit" class="button" value="Send Message"><a href="javascript:hide_popup('my-popup')"><span class="X">Close(X)</span></a></p>

it does not responds but remains inactive!

Why so...?

**jscheuer1** · 07-01-2012, 11:26 PM

Probably just a typo -

The one at the top (with an underscore) has the correct id:

Code:

javascript:hide_popup('my_popup')

The one at the bottom (with a dash) does not:

Code:

javascript:hide_popup('my-popup')

Anyways, give this version (probably still needs tweaking) a try:

Code:

<?php 
// start the session 
session_start();   

ini_set('display_errors', 1); 
ini_set('log_errors', 1); 
ini_set('error_log', dirname(__FILE__) . '/error_log.txt'); 
ERROR_REPORTING(E_ALL); 

//define variables and receiving email 
$name=""; $email=""; $phone=""; $message=""; 

//for now assume the form has yet to be submitted and so of course has not yet been approved
$submitted = false;
$mailApproved = false;

//validate form inputs 
function check_posts() { 
  $found = array(); 
  foreach ($_POST as $x => $y) { 
    if ($x == "check") break; 
    $conditions = array( 
      "name"    => (strlen($y) < 5),  
      "phone"   => (strlen($y) < 6), 
      "email"   => (!filter_var($y, FILTER_VALIDATE_EMAIL)),  
      "message" => (strlen($y) < 10));      
    $errors = array( 
      "name"    => "Valid Name ",  
      "phone"   => "Valid phone only",  
      "email"   => "Valid email only",  
      "message" => "Valid message only" );      
    if ($conditions[$x]) $found[] = $errors[$x]; 
  } 
  echo "<div id='checkPostsMsg'>";
  $i = 1; if (count($found) > 0) { 
    echo "<h2 class='invalidheading'>Please address:</h2>";
    foreach ($found as $z) { echo "<p class='invalidmessage'>$i.  $z</p>"; $i++; } 
    echo "</div>";
    return false;
  } else { 
    echo " Your message has been sent. "; 
    echo "</div>";
    return true;
  } 
}
//end validation 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" /> 
<meta name="robots" content="noindex, nofollow"/> 

<title>| :: New - PopUP - Form :: | </title> 

<style type="text/css"> 
body { 
    margin:auto; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color:#ffffff; 
    background-color:#ffffff; 
} 
#wrapper{ 
    background-color:transparent; 
    border:solid 0px #000000; 
    margin:auto; 
    padding:1px; 
    width:100%; 
    height:100%; 
} 
#contact_form_wrap { 
    background-color:#101a25; 
    border:2px solid red; 
    margin:0 auto; 
    margin-top:30px; 
    margin-bottom:30px; 
    padding:10px; 
    width:340px; 
} 
#form_title 
{ 
   float:left; 
   width:180px;   
   color:#fff; 
   font-family:Verdana, Arial, Helvetica, sans-serif; 
   font-size:12pt; 
   font-weight:bold;    
} 
/*style the sent response*/ 
h2{ 
    color:#af1010; 
    text-shadow:#000000 1px 1px 1px;  
    padding:5px 0 0 3px; 
    background-color:yellow; 
} 
label { 
    font-size: 12px; 
    font-weight:bold;     
} 
/*style the fields required*/ 
.required { 
    color: red; 
    font-size: 9px; 
    float:right;     
} 
/*style the input fields on hover*/ 
input:hover{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
textarea:hover{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
/*style the input fields on focus*/ 
input:focus { 
    background-color: #900; 
    border: 1px solid blue; 
} 
textarea:focus{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
.textfield { 
    padding:5px 0 0 3px; 
    width:330px; 
    height:20px; 
    border: 1px solid #e9e9e9; 
    background-color:#303942; 
    color:#fff; 
} 
.textarea { 
    padding:3px; 
    width:330px; 
    height:144px; 
    border: 1px solid #e9e9e9; 
    background-color:#303942; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#fff; 
} 
.button, .dbutton { 
    padding:3px 0 5px 0; 
    width:175px; 
    height:25px; 
    border: none; 
    background-color:#303942; 
    font-weight:bold; 
    cursor:pointer; 
    color: #f1f1f1; 
    font-family:Arial, Helvetica, sans-serif; 
} 
.dbutton { 
	cursor: text;
	cursor: not-allowed;
}
.button:hover { 
    background-color:#f1f1f1; 
    color: #333; 
} 
.dbutton:hover { 
    background-color:#303942; 
    border: none; 
    color: #f1f1f1; 
} 
.X /*Close(X) to hide form popup*/ 
{ 
   float:right; 
   font-size:16px; 
   font-weight:bold; 
   color:#fff; 
} 
p.clear 
{ 
    clear:both; 
    height:0; 
    padding:0; 
    margin:0; 
} 
</style> 

<script type='text/javascript'>
	var cook = {
		set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
			if(d){var dt = new Date(); 
				dt.setDate(dt.getDate() + d);
			d = '; expires=' + dt.toGMTString();}
			document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
		},
		get: function(n){ // cook.get takes (name)
			var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
			return c? unescape(c[2]) : null;
		}
	};
    function show_popup(id) {
        cook.set('popupopen', 1); //set session cookie
        var obj = document.getElementById(id);
        if (obj.style.display == "none") {
            obj.style.display = "";
        }
    }
    function hide_popup(id){
        cook.set('popupopen', '', -1); //delete cookie
        var obj = document.getElementById(id), imsg,
        sub = obj.getElementsByTagName('input');
        if(sub.length){
            sub = sub[sub.length - 1];
        } else {sub = false;}
        if (obj.style.display == ""){
            obj.style.display = "none";
            (imsg = document.getElementById('checkPostsMsg')) && imsg.parentNode.removeChild(imsg);
            if(sub && sub.disabled){
                sub.disabled = false;
                sub.className = 'button';
                document.getElementsByName('message')[0].value = '';
            }
	}
     }
</script>

</head> 
<body onload="if(cook.get('popupopen')){show_popup('contact_form_wrap');}">
	<h2>Click image to present Popup</h2>
	<br />
	<a href="javascript:show_popup('contact_form_wrap')"><img border='1' height='39'  width='213' src='http://www.validation.webitry.net/contact-us-button.png' alt="Contact Us"/></a>
  <div id="wrapper"> 
    <div id="contact_form_wrap" style="display: none;"> 
      <div id="form_title">Contact Us Form
      </div><br /> 
<?php
	if (isset($_POST["check"])) { 
		$submitted = true;
		$mailApproved = check_posts(); 
		//assign post data to variables 
		$name    = trim($_POST['name']); 
		$email   = trim($_POST['email']); 
		$phone   = trim($_POST['phone']); 
		$message = trim($_POST['message']);
		if($mailApproved){
			define("EMAIL", "mmmmmmm@gmail.com"); 
			$header   = "From: $email\n" . "Reply-To: $email\n"; 
			$subject  = "A message from the Contact Form"; 
			$email_to = EMAIL; 
			$todayis  = date("l, F j, Y, g:i a") ; 
			$emailMessage  = "Name:    " . $name  . "\n"; 
			$emailMessage .= "Email:   " . $email . "\n"; 
			$emailMessage .= "Phone:   " . $phone . "\n"; 
			$emailMessage .= "Date:    " . $todayis  . "\n\n"; 
			$emailMessage .= "Message: " . $message; 
			mail($email_to, $subject, $emailMessage, $header ); 
		}     
	} 
?>
        <form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
          <p><label>Name: <span class="required">Required</span> 
          <input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" /> 
          </label></p>           
          <p><label>Email: <span class="required">Required</span> 
          <input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" /> 
          </label></p>  
          <p><label>Phone: <span class="required">Required</span> 
          <input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" /> 
          </label></p> 
          <p><label>Message: <span class="required">Required</span> 
          <textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea> 
          </label></p> 
          <p><input type="hidden" name="check" value="c"><input type="submit" value="Send Message"<?php echo $mailApproved? ' class="dbutton" disabled' : ' class="button"'; ?>><a href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a></p> 
           
       </form> 
    </div> 
  </div> 
</body> 
</html>

**jscheuer1** · 07-02-2012, 04:19 PM

Just in case you missed it, I added some new code to my last post showing one way of combining things with persistence of data when the form doesn't validate.

**Webiter** · 07-02-2012, 05:09 PM

Hi John, the form version that you present works perfectly. No need for tweaking that. The calling page with
the Contact Us button (image) installed is now coded into the contactform.php page.

With the Contact Us (image) installed on the separate page situation facilitates the visitor calling the contact form.
That is... with the Contact Us image button installed on a webpage/s would facilitate the visitor in calling the popup
with the contactform.php form.

I can not see how this works with the Contact Us button coded into the contactform.php page!

I have tried working backwards to get your perfectly working form version to work when called by the Contact Us
button when installed on the separate contact.php page. In other words, as if calling the perfectly working form
version using the Contact Us button installed as if on a web page.

What ever I try currently breaks down! Can you get me back on track.

**jscheuer1** · 07-02-2012, 05:48 PM

If you're asking how to put a contact us button on some other page and have it call this page with the form showing and ready to fill out. That should be fairly easy. Say the combined page is called contactform.php. From another page have a button that's linked:

HTML Code:

<a href="contactform.php?contact=yes">contact image goes here</a>

And then add to the code in my previous post, where it has:

Code:

<body onload="if(cook.get('popupopen')){show_popup('contact_form_wrap');}">

Make that (addition highlighted):

Code:

<body onload="if(cook.get('popupopen') || <?php echo (isset($_GET['contact']) and $_GET['contact'] == 'yes')? 'true' : 'false'; ?>){show_popup('contact_form_wrap');}">

I'm also playing around with an idea of setting/getting session vars so that if the name or other data (email, phone, perhaps even message) are already known, they can be already be filled in.

BTW, the way it is currently it only remembers that stuff if the form is submitted. And will forget it if the page is navigated to afresh. Adding the use of session would make it remember even after that.

And it currently disables the submit button after a successful submission, re-enabling it if the popup is dismissed and called back, with all but the message data preserved. Whether or not to preserve the session message data would have to be coordinated with that logic or simply skipped.

**Webiter** · 07-02-2012, 08:33 PM

Forgive me for prolonging this thing and also if I am loosing the plot!

I attach an image to help explain the result that I am seeking to achieve with the popup form. The image shows a
sample webpage in the background with the Contact Form popped up on top of it.

I am thinking much to simplified if I thought that a transparent wrapper on the popup page would allow view of the
background webpage.

Have I got the wrong end of the stick here?

**ApacheTech** · 07-02-2012, 09:13 PM

For these types of popup forms, I tend to use the Javascript extension, Prototype Window Class, available from: http://prototype-window.xilinus.com/samples.html

It's an amazing addon that's fairly simple to use once you know the basics and highly extensible.

**jscheuer1** · 07-03-2012, 04:57 AM

I was thinking, among other things, along those lines. But if I were to use a modal script for this I would want one more cross browser than that one apparently is.

But I don't fully understand the question yet. The code as is will do that for a single page. If you wanted to do that for several pages, a modal script is one way to go. But what we have is already a modal script, and from testing it's already fairly cross browser. To make it convenient to use on multiple pages, the css and javascript parts would be converted to external files. Much of the PHP and HTML (those parts that aren't already on a typical page) would become one or two includes. The javascript would, as I've mentioned, best be cleaned up a bit. I believe the css could use a little going over as well. And as I indicated, the PHP could possibly benefit from the use of session variables in addition to the post variables it already employs. Opening a session was already a part of the PHP code, but wasn't being used as far as I could tell.

The question is - Is this for one page or for use on multiple pages?

**Webiter** · 07-03-2012, 08:53 AM

What I had in mind on commencement was a popup form that would be controlled or accessed from the Contact Us button on a websites navigation bar. That is, the form would be available and accessible from the navigation on each page of the website.

So I suppose that makes it a multiple page application. I just used the button image on one page as a aid to linking for the exercise.

**ApacheTech** · 07-03-2012, 02:40 PM

How do you structure your navigation menu?

I mean, is it part of an included header or menu file that is prepended to each page, or is each page a full HTML file in it's own right?

The former option is the most preferable, as it means you can more easily add the intended script dynamically into each page as it's rendered.