Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Three little pigs and Buttons Conflict

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default Three little pigs and Buttons Conflict

    I have three buttons on a Contact Form which is presented in a popup window.

    This button <a href onclick="history.go()" class="link" alt="Refresh Code" /> is used to refresh a captcha code.

    This button <input type="submit" name="submit" class="button" value="Submit Message" /> is form submit.

    and this button <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a> is used to close the popup or hide the form.

    The form works fine when not in a popup. When in the popup all three buttons are hiding the form!

    Why are all buttons doing the same thing?

    The following presents part of the code and this link shows the problem.


    HTML Code:
    <form>
    <fieldset>
    	   <legend>Validate Form  <span class="errors"><?php echo $codeErr ?></span></legend>
    		 <span class="required">Required</span>
    	        <center>
    	            <img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" name="code" class="data"/>
    	            <!--Refresh Validate Code Button Facility-->				
    				<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
                </center>
    	  </fieldset>
    	  
                <p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
          </form>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    There may be some other way(s) of dealing with this but I think you either need a cookie or a different way of handling the CAPTCHA refresh and submit events.

    What's happening is the natural state of the page is popup closed onload. If you submit, since nothing is listed as the action of the form, it submits to the page itself, reloading the page, hiding the popup, if you click to refresh the CAPTCHA, the page reloads, hiding the popup. And of course hitting the close button acts as expected, hiding the popup.

    So, if you were to set a cookie when the Contact Form button is clicked, and use it to determine whether or not to hide the popup onload, you would be in business. Oh, and you would want to also delete said cookie when the popup was closed using the close button.

    A better solution would probably be to use AJAX to fetch the updated CAPTCHA image, thus avoiding a page reload for that, and submitting the form to some other page, like a thank you/acknowledgement page, where you could optionally show what was submitted and/or tell the person how long they can expect to wait for a reply, etc.

    However, using AJAX to update tha CAPTCHA might require updating other things as well in order for the CAPTCHA to continue working properly.

    Here's the cookie method:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head><title>:: Contact Us with Popup ::</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <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) {
        if (document.getElementById){
            cook.set('popupopen', 1); //set session cookie
            obj = document.getElementById(id);
            if (obj.style.display == "none") {
                obj.style.display = "";
            }}}
        function hide_popup(id){
        if (document.getElementById){
            cook.set('popupopen', '', -1); //delete cookie
            obj = document.getElementById(id);
            if (obj.style.display == ""){
                obj.style.display = "none";
            }}}
    </script>
    </head>
    
    <body onload="if(cook.get('popupopen')){show_popup('my_popup');}">
    
        <div id="my_popup" style="display:none; border:0px dotted gray; background-color:transparent; position:absolute; width:100%; height:100%; margin-left:auto; margin-right:auto;">
        <!--Contents start here-->
            
    <!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:#fff; background-color:#fff}#wrapper{ background-color:transparent; border:solid 0px #000; 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}#box_title{ float:left; width:180px;  color:#fff; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12pt; font-weight:bold}h2{ color:#af1010;text-shadow:#000 1px 1px 1px; padding:5px 0 0 3px; background-color:yellow}.message{ font-weight:normal}.errors{ font-family:Arial,Helvetica,sans-serif; font-weight:normal; color:#af1010;font-size:85%; background-color:yellow}label{ font-size:12px; font-weight:bold}.required{ color:red; font-size:9px;float:right}input:hover{ background-color:#900; border:1px solid blue}textarea:hover{ background-color:#900; border:1px solid blue}input:focus{ background-color:#900; border:1px solid blue}textarea:focus{ background-color:#900; border:1px solid blue}.data{ padding:0px 0px 0px 12px; width:60px; height:20px; border:1px solid #e9e9e9; background-color:#303942; color:#fff}legend{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}.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{ 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}.button:hover{ background-color:#f1f1f1; color:#333}fieldset{ width:317px; height:55px;background-color:#777; border:1px solid green}legend{ padding:0.2em 0.5em; border:2px solid green;background-color:#fff; color:green; font-size:90%; text-align:right}#flip{width:35px;height:35px;float:right;margin-right:40px}#flip a{background:url(./refreshSprite.jpg);display:block;width:35px;height:35px}#flip a.link{background-position:0px 0px}#flip a.link:hover{background-position:0 bottom}.X {   float:right;   font-size:16px;   font-weight:bold;   color:#fff}p.clear{    clear:both;    height:0;    padding:0;    margin:0}
    </style>
    </head>
    <body><!----------------------------------PAGE STARTS HERE---------------------------------------->
    <div id="wrapper">
      <div id="contact_form_wrap">
         <div id="box_title">Contact Us Form</div><br /><br />
             <!--<span class="message"></span>
                -->
                          <form id="contact-form" method="post" action="/contact.php"/>
    	
              <p><label>Name:  <span class="errors"></span><span class="required">Required</span>
              <input type="text" name="name" autofocus="autofocus" class="textfield" value="" />
              </label></p>
     
              <p><label>Email:  <span class="errors"></span> <span class="required">Required</span>
              <input type="text" name="email" class="textfield" value="" />
              </label></p> 
    
    		  <p><label>Phone:  <span class="errors"></span> <span class="required">Required</span>
              <input type="text" name="phone" class="textfield" value="" />
              </label></p>
     
              <p><label>Message:  <span class="errors"></span> <span class="required">Required</span>
              <textarea name="message" class="textarea" cols="45" rows="5"></textarea>
              </label></p>
    		  
    	 <fieldset>
    	   <legend>Validate Form  <span class="errors"></span></legend>
    		 <span class="required">Required</span>
    	        <center>
    	            <img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" name="code" class="data"/>
    	            <!--Refresh Validate Code Button Facility-->				
    				<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
                </center>
    	  </fieldset>
    	  
                <p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
          </form>
        </div>
      </div>
    </body>
    </html>	<!--Contents end here-->
        </div>
    	<h2>Click image to present Popup</h2>
    	<br />
    	<a href="javascript:show_popup('my_popup')"><img border='1' height='39'  width='213' src='contact-us-button.png' alt="Contact Us"/></a>
    </body>
    </html>
    Notes: Since the popup by default is hidden (display: none;), I changed the body onload to show it if the cookie is detected. Also, the coding style is a bit sloppy, prone to conflicts, I've made no attempt to clean that up.
    Last edited by jscheuer1; 06-29-2012 at 04:12 PM. Reason: add cookie demo and a detail on AJAX CAPTCHA
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks for your detailed response and the cookie detail.
    I think it makes sense to work without the captcha, so I have removed it.

    The thank you message/page -Your message has been sent- is by way of a note that appears at the top of the form on completion of
    the processing. It is coded into place like so in the html:
    <div id="box_title">Contact Us Form</div><br /><br />
    <?php if(isset($_GET['sent'])): ?><h2>Your message has been sent</h2><?php endif; ?>
    <form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>


    and managed like so by the php processor:
    //use php's mail function to send the email
    mail($email_to, $subject ,$emailMessage ,$header );
    header('Location: '."http://www.validation.xxxxxxxx.net/contactform.php/?sent=yes");


    When the processing presents the thank you page message the Close(X) hide form button is now disabled! It is also probable
    that the page is no longer in the popup.
    Would you have any thoughts on what is causing things to function in this way?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    I didn't mean to say the CAPTCHA was a bad idea. It's just that if we were to refresh it via AJAX to avoid reloading the page for that, then there might be a need to do other things to make sure it still works as intended.


    The close button doesn't work because:

    http://www.validation.webitry.net/contactform.php/?sent=yes

    has no javascript on it. That's controlled/determined by what contactform.php does/includes when it's loaded with a GET value of sent=yes.

    Here:

    It is also probable that the page is no longer in the popup.
    you've kind of lost me. The page was never in the popup. The popup is on the page. The problem is that other things that were on the page before the message was sent are no longer there once it is.

    If I could see the full PHP code of contactform.php, I can probably get the close button working again. But then what? At that point, if you do close it, there's nothing visible left. What else would you like to be there?
    Last edited by jscheuer1; 06-30-2012 at 04:13 AM. Reason: add last paragraph
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks again.

    Huh, contact forms are not easy. Adding a popup to the mix brings a new set of challenges. Yes, I removed the
    captcha for the moment to simplify things a bit. Could go back there later.

    I tried adding the javascript to the /contactform.php/?sent=yes page but to no effect!

    When the popup presents with the form the background-color being transparent allows the webpage to be seen
    in the background. ie when the Contact Us button is clicked on a webpage the Contact Form pops up. The webpage in the background is visible.

    What I am trying to get to is.... when the Close(X) hides the form that the viewer just then sees the
    webpage that the popup was called from.

    The Contactform.php is as follows:


    PHP Code:
    <?php

    session_start
    ();  // we must never forget to start the session
    define("EMAIL""xxxxxxxx@gmail.com");

    $name="";
    $email="";
    $phone="";
    $message="";
    //$code="";
    $nameErr="";
    $emailErr="";
    $phoneErr="";
    $messageErr="";
    //$codeErr="";
    $messageErr="";
    $message_text="";
    $errors="";

    if(isset(
    $_POST['submit'])) {
     
      include(
    'validateClass.php');
     
      
    //assign post data to variables
            
    $name    trim($_POST['name']);
            
    $email   trim($_POST['email']);
            
    $phone   trim($_POST['phone']);
            
    $message trim($_POST['message']);
            
    //$code    = trim($_POST['code']);
     
      //start validating our form
            
    $v = new validate();
            
    $v->validateStr($name"name"375);
            
    $v->validateEmail($email"email");
            
    $v->validatePhone($phone"phone");
            
    $v->validateStr($message"message"10500); 
           
    // $v->validateCode($code, "code");
     
      
    if(!$v->hasErrors()) {
           
            
    $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
               
          
    //use php's mail function to send the email
            
    mail($email_to$subject ,$emailMessage ,$header ); 
            
    header('Location: '."http://www.validation.webitry.net/contactform.php/?sent=yes");
           
           } else {
        
    //set the number of errors message
           
    $message_text $v->errorNumMessage();      
     
        
    //store the errors list in a variable
           
    $errors $v->displayErrors();
     
        
    //get the individual error messages
           
    $nameErr    $v->getError("name");
           
    $emailErr   $v->getError("email");
           
    $phoneErr   $v->getError("phone");
           
    $messageErr $v->getError("message");
          
    // $codeErr    = $v->getError("code");
      
    //end of the error check
    }
    // end isset
    ?>

    <!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%;
    }
    /*#content{
        border:solid 3px #000000;
        margin:20px;
        padding:20px;
        width:360px;
        height:680px;
        float:left;
    }
    #sidebar{
        border:solid 3px #000000;
        margin:20px;
        padding:20px;
        width:360px;
        height:680px;
        float:right;
    }*/
    #contact_form_wrap {
        background-color:#101a25;
        border:2px solid red;
        margin:0 auto;
        margin-top:30px;
        margin-bottom:30px;
        padding:10px;
        width:340px;
    }
    #box_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;
    }
    .message {
      font-weight:normal;
    }
    /*style the error messages*/
    .errors {
        font-family:Arial, Helvetica, sans-serif;
        font-weight:normal;
        color:#af1010;
        font-size:85%;
        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;
    }
    /*style the input field for Validate Code*/
    .data{
        padding:0px 0px 0px 12px;
        width:60px;
        height:20px;
        border: 1px solid #e9e9e9;
        background-color:#303942;
        color:#fff;
    }
    /*Special styles to corners*/
    legend{
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; /* future proofing */
    }
    .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 {
        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;
    }
    .button:hover {
        background-color:#f1f1f1;
        color: #333;
    }
    /*style the captcha panel*/
    fieldset {
        width:317px;
        height:55px;
        background-color: #777777;
        border: 1px solid green;
    }
    legend {
        padding: 0.2em 0.5em;
        border:2px solid green;
        background-color: #ffffff;
        color:green;
        font-size:90%;
        text-align:right;
    }
    /*Refresh Validate Code Rollover*/
    #flip {width: 35px; height: 35px; float:right; margin-right:40px;}
    #flip a {background: url(./refreshSprite.jpg); display: block; width: 35px;height: 35px;}
    #flip a.link {background-position: 0px 0px;}
    #flip a.link:hover {background-position: 0 bottom;}
    /* End of Rollover Control */

    .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>

    </head>
    <body>
    <div id="wrapper">
      <div id="contact_form_wrap">
         <div id="box_title">Contact Us Form</div><br /><br />
          <?php if(isset($_GET['sent'])): ?><h2>Your message has been sent</h2><?php endif; ?>
          
          <form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>
        
              <p><label>Name:  <span class="errors"><?php echo $nameErr?></span><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="errors"><?php echo $emailErr ?></span> <span class="required">Required</span>
              <input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" />
              </label></p> 

              <p><label>Phone:  <span class="errors"><?php echo $phoneErr ?></span> <span class="required">Required</span>
              <input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" />
              </label></p>
     
              <p><label>Message:  <span class="errors"><?php echo $messageErr ?></span> <span class="required">Required</span>
              <textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea>
              </label></p>
              
         <!--<fieldset>
           <legend>Validate Form  <span class="errors"><?//php echo $codeErr ?></span></legend>
             <span class="required">Required</span>
                <center>
                    <img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" name="code" class="data"/>
                    <!--Refresh Validate Code Button Facility-->                
                    <!--<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
                </center>
          </fieldset>-->
          
                <p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
          </form>
        </div>
      </div>
    </body>
    </html>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    Unless it's on validateClass.php, there's still no javascript on that page. So, near the end:

    Code:
    <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a>
    throws an error and otherwise does nothing.

    You say:

    What I am trying to get to is.... when the Close(X) hides the form that the viewer just then sees the
    webpage that the popup was called from.
    But there is no popup called. The popup is hard coded on both the contact.php and Contactform.php pages. In the first case it's display none and reveled when the user hits the 'Contact Us' button or onload if the cookie is set. In the second it's just there right away, not hidden at all.

    If you want the popup's close button on Contactform.php to return to contact.php, then change the above to:

    Code:
    <a href="contact.php"><span class="X">Close(X)</span></a>
    GET data for whatever purpose(s) could be included if desired, and/or a cookie could first be set or deleted to determine whether or not the contact.php would then show the popup onload.

    It should actually be possible though to combine contact.php and Contactform.php so that when contact.php successfully submits to itself, closing (hiding) the popup will leave the rest of the page there.

    Either way (combined or separate contact pages), after a successful submission, the submit button should be disabled or removed from the form until it's closed and reopened, and if and when reopened, at least the message field should be empty.
    Last edited by jscheuer1; 06-30-2012 at 03:34 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Sorry to be running around the place on this. I have changed the contactform.php so that the validation
    is done on the same page.

    I found the concise php validation code in one of the other Dynamic Drive forum rooms. I was
    hoping that it would afford the opportunity to get rid of the sent=yes arrangement on the previous form.
    I think it has so it was worth changing.

    I introduced a bit of the hide-popup javascript to the contactform page and I think that has resolved the Close(X) button issue.

    When click send I get a mail in my inbox but none of the form input info...!

    What I mean is, the following info arrived in the mailbox without any detail...!
    Name:
    Email:
    Phone:
    Date: Saturday, June 30, 2012, 8:36 pm

    Message:


    Is there anything obvious that is causing this?


    so far the new contactform.php is as follows:

    PHP Code:
    <?php
    ini_set
    ('display_errors'1);
    ini_set('log_errors'1);
    ini_set('error_log'dirname(__FILE__) . '/error_log.txt');
    ERROR_REPORTING(E_ALL);
    ?>
    <?php
    // start the session
    session_start();  

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

    //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($yFILTER_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];
      }
      
    $i 1; if (count($found) > 0) {
        foreach (
    $found as $z) { echo "<p>$i.  $z</p>"$i++; }
      } else {
        echo 
    " Your message has been sent. ";
    //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 {
        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;
    }
    .button:hover {
        background-color:#f1f1f1;
        color: #333;
    }
    .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;
    }

    <script type='text/javascript'>    
        function hide_popup(id){
        if (document.getElementById){
            obj = document.getElementById(id);
            if (obj.style.display == ""){
                obj.style.display = "none";
            }}}
    </script>
    </style>

    </head>
    <body>
      <div id="wrapper">
        <div id="contact_form_wrap">
          <div id="form_title">Contact Us Form</div><br />
            <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" class="button" value="Send Message"><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
              
                  <?php
                  
    if (isset($_POST["check"])) { 
                  
    check_posts();
                  
    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>
        </div>
      </div>
    </body>
    </html>
    Last edited by Webiter; 07-01-2012 at 12:21 AM. Reason: Update on earlier submit

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    There's still no javascript on that page.

    There is invalid HTML in at least one place:

    Code:
            <form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>
    The form tag is not a self closing tag, but might be being partially closed by having that slash there. In any case, it can't do anything good, get rid of it.

    As to the form being empty when submitted, that might have something to do with it.

    But this is much more likely - Near the beginning there's:

    Code:
    //define variables and receiving email 
    $name=""; $email=""; $phone=""; $message="";
    After that, no attempt is made to assign any values to those, yet they are used here:

    Code:
                  <?php 
                  if (isset($_POST["check"])) {  
                  check_posts(); 
                  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 );       
                 } 
                 ?>
    to send the message, so of course they're empty.

    Missing is this (from a previous version I think):

    PHP Code:
      //assign post data to variables 
            
    $name    trim($_POST['name']); 
            
    $email   trim($_POST['email']); 
            
    $phone   trim($_POST['phone']); 
            
    $message trim($_POST['message']); 
    It might be good to check if they're set before making those assignments, but I think you did that by checking if the form had been submitted or not, and it looks like you are doing that before validation. So that could go here:

    Code:
                  <?php 
                  if (isset($_POST["check"])) {  
                  check_posts(); 
      //assign post data to variables 
            $name    = trim($_POST['name']); 
            $email   = trim($_POST['email']); 
            $phone   = trim($_POST['phone']); 
            $message = trim($_POST['message']);
                  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 );       
                 } 
                 ?>
    With or without that though, it looks like the mail, such as it is, gets sent regardless of whether or not it passes the check_posts function.

    You could have check_posts return true or false:

    Code:
    //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]; 
      } 
      $i = 1; if (count($found) > 0) { 
        foreach ($found as $z) { echo "<p>$i.  $z</p>"; $i++; } 
        return false;
      } else { 
        echo " Your message has been sent. "; 
        return true;
    //end validation code 
      } 
    }
    Then down here tie continued processing of the mail to that value:

    Code:
    <?php 
    	if (isset($_POST["check"])) {  
    		$mailApproved = check_posts(); 
    		if($mailApproved){
    			//assign post data to variables 
    			$name    = trim($_POST['name']); 
    			$email   = trim($_POST['email']); 
    			$phone   = trim($_POST['phone']); 
    			$message = trim($_POST['message']);
    			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 ); 
    		}     
    	} 
    ?>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks John for the detailed reply. You are good to explain with appropriate detail.

    It all seems to work now. Just a few questions to finish this aspect. (may go back to re-introducing the captcha
    later in the week)

    The following is the only javascript on page contactform.php

    Code:
    <script type='text/javascript'>	
        function hide_popup(id){
        if (document.getElementById){
            obj = document.getElementById(id);
            if (obj.style.display == ""){
                obj.style.display = "none";
            }}}
    </script>
    Q1. I do not think that this needs to be working with the cookies....is this correct?

    Q2. If input fields need correction on validation all input info is currently lost requiring complete fill
    in of form. How is correct information retained in properly completed fields..?

    Q3. How best might I go about styling the error output in this line echo "<p>$i. $z</p>"; $i++; within the php..?

    Q4. When I try introducing a heading to the errors list it gets repeated over each of the errors notifications.!
    Like when introducing something like { echo "<h2>Please address:</h2><p>$i. $z</p>"; $i++; } Is there a workaround.?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    To fully work out both #1 and #2 below would take a bit of time. When I have a good block of time for it I will give it a shot and/or you can play around with the concepts. The other items can be done right away.

    Always backup what you have before making a new page. Like backup what you have, add the items 3 and 4, test it, if it's working, back that up, play with items 1 and/or 2 backing up between significant working changes in that process.

    1. That javascript will do nothing in response to the Close(X) link:


      Code:
      <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a>
      because there's no element by that id on the page. I think you want:

      Code:
      <a href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a>
      But it seems pointless to hide the popup on an otherwise blank page where there's no way to bring it back if the user wants/needs to. This relates to my earlier idea of combining the two pages. And by that I didn't mean include one page in the other, as they are now that would result in invalid HTML and possibly conflicting javascript and/or PHP code. If the pages are combined, the code to open and close the popup would be on the page along with the button to open it and anything else (links, images, information) you want. At that point you might want/need the cookie, or it's functionality could possibly be handled via POST or GET data.

    2. You would need to save valid data and insert it into the form. This was what I was talking about before, because I assumed you were already doing this, when I said that after successful submission, the submit button should be disabled. It would require additional code and/or changes in the PHP sections and a reordering of the second PHP section. It would have to come before the form or be split into two sections, one of which would come before the form, and the form would need to be populated from values (if any) determined valid from the PHP code.

    3. A class name might be easiest:

      Code:
          foreach ($found as $z) { echo "<p class='invalidmessage'>$i.  $z</p>"; $i++; }
      Then you could style them from the stylesheet.

    4. Instead of putting the heading in the foreach loop, place it before, yet still inside the conditional that determines if there are any errors. You should probably give it a class too for styling in the stylesheet:

      Code:
        $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++; } 
          return false;
        } else { 
          echo " Your mess . . .
    Last edited by jscheuer1; 07-01-2012 at 06:41 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •