SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Executing PHP on Client Side Using jQuery and Returning Results/Data into jQuery

    Hello all,

    I have a question about what needs to be written in my PHP script to return a message/or HTML content that will be accessed through the jQuery .post() method. This is a way I learned to run client-side code without a page refresh or redirection.

    PHP
    emailtester.php
    Code:
    <?php
    	class ProcessFirstEmail
    	{
    		function processor()
    		{
    			$email = $_POST['go'];
    			if ($email != "your e-mail"){
    				if (isset($email))
    				{
    					if (isItAValidEmail($email))
    					{
    						return true;
    					} else {
    						echo $email . 'is not a valid e-mail address.';
    						return false;
    					}
    				} else {
    					echo 'There\'s nothing in the e-mail box!';
    					return false;
    				}
    			} else {
    				return false;
    				die();
    			}
    		}
    		
    		public function isItAValidEmail($email)
    		{
    			if (filter_var($email, FILTER_VALIDATE_EMAIL))
    				return true;
    			else
    				return false;
    		}
    	}
    ?>
    confirmform.php
    Code:
    <?php
    	class CheckForm
    	{
    		public function checkSubmission()
    			{
    				if ($_POST['country'] != "Select Country")
    				{
    					if (isset($_POST['confirmemail']) && isset($_POST['name']))
    					{
    						$origEmail = $_POST['go'];
    						$confirmEmail = $_POST['confirmemail'];
    						if ($origEmail == $confirmEmail)
    						{
    							$name = htmlspecialchars($_POST['name']);
    							$ageRange = $_POST['age'];
    							$country = $_POST['country'];
    							
    							include 'Scripts/databasewriter.php';
    							$dbWriter = new DatabaseWriter;
    							$dbWriter -> writeUserToDatabase($confirmEmail, $name, $ageRange, $country, $category);
    						} else {
    							die();
    						}
    					} else {
    						return false;
    					}
    				} else {
    					return false;
    				}
    			}
    	}
    ?>
    jQuery:
    Code:
    $(document).ready(function(){
        //When the submit button is clicked
        $("#origemailform").on("click", function(){
                    //Post the form data serialized for the proper formatting
                    $.post("emailtester.php",$("#emailbox").serialize()
                    //Get the response from process.php
                    , function(response){
                            //Prepend the response to div id step2
                            $("#confirmform").prepend($(response).fadeIn("slow"));
    				});
    	$("#2ndstep").on("click", function(){
                    });
        });
    });
    HTML form markup:
    Code:
    <form id="emailbox" name="form1" method="post" action="?">
            <div>
              <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" value="Join" onclick="processor()" />
            </div>
          </form>
        </div>
        <div id="rightsideend">&nbsp;</div>
      </div>
      <!-- end side windows -->
      <div id="confirmform">
        <form name="form2" id="submissionform" method="post" action="?">
        <div>
          <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
          <input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
          <input type="text" name="name" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="age" class="fixedwidth">Select your age range:</label>
          <select name="age" class="inputwidth">
             <option selected="selected">18&ndash;35</option>
             <option>36&ndash;55</option>
             <option>55+</option>
             <option>17 or younger</option>
          </select>
        </div>
        <div>
          <label for="country" class="fixedwidth">Select your country:<span>*</span></label>
          <select name="country" class="inputwidth">
              <option selected="selected">Select Country</option>
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Canada</option>
              <option>Australia</option>
              <option>Russia</option>
              <option>Brazil</option>
              <option>Somewhere else</option>
          </select>
         </div>
         <p id="errormessage">You didn&apos;t enter the same e-mail address!</p>
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>
          <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
        </form>
      </div>
      <div id="successfulsubmit">
      	<h4>Submission Successful</h4>
      	<p id="postsubmissionmessage">Your submission was successful. Thank you for signing up!</p>
      </div>
    </div><!-- end container -->
    <script type="text/javascript" src="Scripts/jQuery.js"></script>
    <script type="text/javascript" src="Scripts/emailbox.js"></script>
    </body>
    </html>
    Here's a screenshot with an emphasis on the red text, which would contain the error message for an unsuccessful submission that my PHP code needs to communicate to jQuery:
    Screenshot

    I'm also trying to learn how to tell jQuery that the info submitted is valid and show the next step, if I haven't already coded that part. Haven't found a good reading resource on this subject.

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    72 Post(s)
    Tagged
    0 Thread(s)
    okay, lets just get one misnaming/misconception corrected first off;

    the PHP will not be executed client side. PHP is only ever executed server-side. JQuery (or AJAX, or whatever), is still sending a second page request to simply 'go get the result'. Otherwise you'd have a rather large security breach in PHP

    Now; as to why your script will do nothing.

    Your jquery requests emailtester.php; which is fine.
    emailtester.php contains only a class definition. Which is fine, but does absolutely nothing. Defining a class does not invoke an instance of the class. If you want that page to actually DO something, you'll need to invoke an instance and make it do something.
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, here, I added at the top:

    Code:
    <?php
    	$instance = new ProcessFirstEmail;
    	$instance -> processor();
    
    	class ProcessFirstEmail
    	{
    		function processor()
    		{
    			$email = $_POST['go'];
    			if ($email != "your e-mail"){
    				if (isset($email))
    				{
    					if (isItAValidEmail($email))
    					{
    						return true;
    					} else {
    						echo $email . 'is not a valid e-mail address.';
    						return false;
    					}
    				} else {
    					echo 'There\'s nothing in the e-mail box!';
    					return false;
    				}
    			} else {
    				return false;
    				die();
    			}
    		}
    		
    		public function isItAValidEmail($email)
    		{
    			if (filter_var($email, FILTER_VALIDATE_EMAIL))
    				return true;
    			else
    				return false;
    		}
    	}
    ?>
    Do I need to return or echo HTML markup for the red error message text?

  4. #4
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    72 Post(s)
    Tagged
    0 Thread(s)
    I assume prepend takes in HTML; so yeah, if you want it red, you'll need to echo out the HTML. (or return it, and echo out the return value)
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, I added these HTML tags with the style attribute filled in with stuff, since I apparently can't use a class or id.

    Code:
    } else {
    						echo '<p style="color:red; font-weight:bold; font-size:12px;">Sorry, ' . $email . ' is not a valid e-mail address.</p>';
    						return false;
    					}
    				} else {
    					echo '<div style="background:url("successorfailure.gif"); width="360px"; height="100px"; <p style="color:red; font-weight:bold; font-size:12px;">There\'s nothing in the e-mail box!</p>';
    					return false;
    				}
    			} else {
    				return false;
    				die();
    			}
    		}
    		
    		public function isItAValidEmail($email)
    		{
    			if (filter_var($email, FILTER_VALIDATE_EMAIL))
    				return true;
    			else {
    				echo '<p style="color:red; font-weight:bold; font-size:12px;">That\'s not a valid e-mail!</p>';
    				return false;
    			}
    Now, this leaves the questions:

    1. Where will it actually place this HTML? It seems as though these error messages are going to end up somewhere completely random.
    2. Is the jQuery going to show/hide this at the correct time?

  6. #6
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    72 Post(s)
    Tagged
    0 Thread(s)
    Those... are jQuery questions. I therefore forward this thread to the appropriate forum for response, as I am not a jQuery person. Moderators. AWAY!
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, this should make a nice box. I'm getting confused that this is weighing and handling the first email submission.

    Code:
    <?php
    	$instance = new ProcessFirstEmail;
    	$instance -> processor();
    
    	class ProcessFirstEmail
    	{
    		function processor()
    		{
    			$email = $_POST['go'];
    			if ($email != "your e-mail"){
    				if (isset($email))
    				{
    					$firstMarkup = '<div style="background:url("successorfailure.gif"); width="360px"; height:100px; position:absolute; bottom:350px; left:508px;"><h4 style="text-shadow:1px 1px 1px #900; margin:0; padding:8px 10px 1px 12px;">Submission Failure</h4><p style="color:red; font-weight:bold; font-size:12px;">';
    					if (isItAValidEmail($email))
    					{
    						return true;
    					} else {
    						echo $firstMarkup + 'Sorry, ' . $email . ' is not a valid e-mail address.</p></div>';
    						return false;
    					}
    				} else {
    					echo $firstMarkup + 'There\'s nothing in the e-mail box!</p></div>';
    					return false;
    				}
    			} else {
    				return false;
    				die();
    			}
    		}
    		
    		public function isItAValidEmail($email)
    		{
    			if (filter_var($email, FILTER_VALIDATE_EMAIL))
    				return true;
    			else 
    				return false;
    		}
    	}
    ?>
    Okay, I'll take my jQuery questions to the appropriate forum.

  8. #8
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You may consider doing something like:
    Code:
    /* A input form field with an id of email_form and the specific field is the class */
    var ea = $("#email_form .email_address_in").val(); 
    /* A text form field */
    var bd = $("#email_form .body_in").val()
    $.post(
        "./libs/email/ajax_email.php"
        , { email_address : ea
            , email_body: bd
           }
         , function(data){
             //alert(data);
             some_function_to_run_after_the_data_is_returned_from_the_php_script();
    });
    Then in the ajax_email.php you need something like:
    PHP Code:
    $email_address htmlentities($_POST['email_address'];
    $email_body htmlentities($_POST['email_body'];

    // Do your email stuff

    /* echo data to return to the ajax calling page in the JavaScript data variable shown in the $.post callback variable called 'data' */
    echo $result
    ictus==""

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, this is an interesting change-up on the jQuery side, and I hope it fits a way to fit my goals as demonstrated below in screenshots. I want to avoid page refresh and no page redirection. This is what I have currently in there:

    The JavaScript:
    Code:
    //changes the input's value when it is selected
    function input_focus(obj){
    	if ( obj.value == obj.defaultValue ){
    		obj.value = ""
    	}
    }
    
    function input_reset(obj){
    	obj.value = obj.defaultValue;
    }
    
    $(document).ready(function(){
    	$("#submissionform").hide()
    	
        //When the submit button is clicked
        $("#origemailform").on("click", function(){
                    //Post the form data serialized for the proper formatting
                    $.post("emailtester.php",$("#emailbox").serialize()
                    //Get the response from process.php
                    , function(response){
                            //Prepend the response to div id step2
                            $("#submissionform").prepend($(response).fadeIn("slow"));
    				});
    	$("#2ndstep").on("click", function(){
    					$.post("confirmform.php", $("#confirmform").serialize()
    					, function(response){
    						$("#errormessage").prepend($(response).show())
    					});
                    });
        });
    });
    the form markup:
    Code:
      <!-- begin rightside div -->
      <div id="rightside">
        <div id="rightsidestart">&nbsp;</div>
        <div id="rightsidebody">
          <h2 class="sideWindowHeaderText">Not Recommended</h2>
          <ul class="sideWindowLinks">
            <li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
            <li><a href="#">Mobile Mass Media</a></li>
            <li><a href="#">Prorexin</a></li>
          </ul>
          <form id="emailbox" name="form1" method="post" action="?">
            <div>
              <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" value="Join" onclick="processor()" />
            </div>
          </form>
        </div>
        <div id="rightsideend">&nbsp;</div>
      </div>
      <!-- end side windows -->
      <div id="confirmform">
        <form name="form2" id="submissionform" method="post" action="?">
        <div>
          <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
          <input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
          <input type="text" name="name" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="age" class="fixedwidth">Select your age range:</label>
          <select name="age" class="inputwidth">
             <option selected="selected">18&ndash;35</option>
             <option>36&ndash;55</option>
             <option>55+</option>
             <option>17 or younger</option>
          </select>
        </div>
        <div>
          <label for="country" class="fixedwidth">Select your country:<span>*</span></label>
          <select name="country" class="inputwidth">
              <option selected="selected">Select Country</option>
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Canada</option>
              <option>Australia</option>
              <option>Russia</option>
              <option>Brazil</option>
              <option>Somewhere else</option>
          </select>
         </div>
         <p id="errormessage">You didn&apos;t enter the same e-mail address!</p>
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>
          <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
        </form>
      </div>
    </div><!-- end container -->
    <script type="text/javascript" src="Scripts/jQuery.js"></script>
    <script type="text/javascript" src="Scripts/emailbox.js"></script>
    </body>
    </html>
    emailtester.php
    Code:
    <?php
    	$instance = new ProcessFirstEmail;
    	$instance -> processor();
    
    	class ProcessFirstEmail
    	{
    		function processor()
    		{
    			$email = $_POST['go'];
    			if ($email != "your e-mail"){
    				$firstMarkup = '<div style="background:url("successorfailure.gif"); width:360px; height:100px; position:absolute; bottom:350px; left:508px;"><h4 style="text-shadow:1px 1px 1px #900; margin:0; padding:8px 10px 1px 12px;">Submission Failure</h4><p style="color:red; font-weight:bold; font-size:12px; margin:0; padding:2px 0 2px 17px;">';
    				if (isset($email))
    				{
    					if (isItAValidEmail($email))
    					{
    						return true;
    					} else {
    						echo $firstMarkup . 'Sorry, ' . $email . ' is not a valid e-mail address.</p></div>';
    						return false;
    					}
    				} else {
    					echo $firstMarkup . 'There\'s nothing in the e-mail box!</p></div>';
    					return false;
    				}
    			} else {
    				return false;
    				die();
    			}
    		}
    		
    		public function isItAValidEmail($email)
    		{
    			if (filter_var($email, FILTER_VALIDATE_EMAIL))
    				return true;
    			else 
    				return false;
    		}
    	}
    ?>
    confirmform.php
    Code:
    <?php
    	$instance = new CheckForm;
    	$instance -> checkSubmission();
    	
    	class CheckForm
    	{
    		public function checkSubmission()
    		{
    			$htmlTag = '<p style="color:red; font-weight:bold; font-size:12px">';
    				
    			if ($_POST['country'] != "Select Country")
    			{
    				if (isset($_POST['confirmemail']) && isset($_POST['name']))
    				{
    					$origEmail = $_POST['go'];
    					$confirmEmail = $_POST['confirmemail'];
    					if ($origEmail == $confirmEmail)
    					{
    						$name = htmlspecialchars($_POST['name']);
    						$ageRange = $_POST['age'];
    						$country = $_POST['country'];
    						
    						include 'Scripts/databasewriter.php';
    						$dbWriter = new DatabaseWriter;
    						$dbWriter -> writeUserToDatabase($confirmEmail, $name, $ageRange, $country, $category);
    					} else {
    						echo $htmlTag . 'The first e-mail is not the same as the confirmed e-mail address.</p>';
    						die();
    					}
    				} else {
    					if (!isset($_POST['confirmemail'])){
    						echo $htmlTag . 'You forgot to confirm your e-mail address.</p>';
    						return false;
    					} elseif (!isset($_POST['name'])) {	
    						echo $htmlTag . 'There is no name specified.</p>';
    						return false;
    					}
    				}
    			} else {
    				echo $htmlTag . 'There is no country selected</p>';
    				return false;
    			}
    		}
    	}
    ?>
    Here's a screenshot preview of what my goals look like.

    This is what the First Step Looks Like Before it All Takes Place
    Assuming the original e-mail is good & acceptable, this is what would happen for the next step
    If there are errors on the next form, confirmform.php will return the text that is red and appears below the input fields
    This is the successful submission screen that will disappear along with the other form and go back to normal in just a few moments

  10. #10
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi etidd,

    in Post 1 you asked
    I have a question about what needs to be written in my PHP script to return a message/or HTML content that will be accessed through the jQuery .post() method.
    The mechanics are what I showed you in Post 8. The general method is:

    1. Use your JavaScript and JQuery scripts collect values you need to pass to your .php file.
    2. Store any data collected from forms, set them to JavaScript variables
    3. Issue an ajax $.post using JQuery, pass the JavaScript variables into the post names and values (the variables) as post name and data pairs.
    4. When the PHP file is called then parse the posted data by post name and set to a php variable
    5. Do what you need in the PHP file. In your case you have filters to validate so you can instantiate your classes and run through the validation classes. You can pass whatever data you need between these PHP classes the JQuery callback has not been serviced until you echo a response, so you can ensure that each PHP class that does something only communicates with the PHP classes or code that invoked the class. If everything validates then you echo a message that will trigger the JQUERY callback that will exist in the data variable. You can return arrays, JSON or serialized data back to JQUERY but the echoing method keeps it simple to start with so I recommend you only echo a success or failure message on your pop-up window.
    6. The callback has been issues and the JQuery data variable has a response from the PHP page. You then can use JQuery or JavaScript to target an ID on the pop-up window where the data variable contains, which should be either a success or failure message.
    7. You can use an even timer to fade the message after a period of time or fade it out after a person types again in the sign-up pop-up form after they've got a failure message.



    Rather than do multiple $.post calls to run different PHP scripts that have different responsibilities I like to call a PHP a routing script that initializes the PHP classes that are needed. I then process what is needed (which can include inserting or editing database data) and when I get the result of the processing I return a result code. I have JavaScript match the code and put the message that is relative to the code.

    Regards,
    Steve
    ictus==""

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now, I'm trying to pass only the email address to the PHP script for the first .post() call still.

    I don't have a class for the first e-mail field- it just has an id of #go. The other fields have classes of .inputwidth. So I guess I need to fill these in accordingly.

    How do I get the results of the echo from the first PHP script and weigh their outcomes and show next step or display an error? Is that an idea of what is to go inside of that function?

    Code:
    var emailaddress = $("#go .email_address_in").val(); 
    /* A text form field */
    var confirmemail = $("#confirmemail .body_in").val()
    var name = $("#name .body_in").val()
    var agerange = $("#age .body_in")
    
    $.post(
        "emailtester.php"
        , { email_address : emailaddress
           }
         , function(data){
             alert(data);
             doStuffButIDontKnowWhatIWillDoYet();
    });
    
    function doStuffButIDontKnowWhatIWillDoYet() {
      alert('hi');
    }
    PHP Code:
    <?php
        $instance 
    = new ProcessFirstEmail;
        
    $instance -> processor();

        class 
    ProcessFirstEmail
        
    {
            function 
    processor()
            {
                
    $email $_POST['go'];
                if (
    $email != "your e-mail"){
                    if (isset(
    $email))
                    {
                        if (
    isItAValidEmail($email))
                        {
                            echo 
    'Submission Successful';
                        } else {
                            echo 
    'Submission Failure- Invalid E-mail';
                        }
                    } else {
                        die();
                        echo 
    'Submission Failure- Nothing in Box';
                    }
                } else {
                    die();
                }
            }
            
            public function 
    isItAValidEmail($email)
            {
                if (
    filter_var($emailFILTER_VALIDATE_EMAIL))
                    return 
    true;
                else 
                    return 
    false;
            }
        }
    ?>

  12. #12
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok I've stripped it back al little to keep this simpler for you. I've also changed the setup a little using an intermiderary php file to accept the ajax request and invoke any classes or functions that need to occur prior to echoing back to the JQUERY $.post function.

    So here is the basic form:
    HTML Code:
    <form>
      <input id='go' name='email_address' class='email_address_in'/>
      <input id='confirm_email' name='confirm_email' class='confirm_email_addresss_in' />
    </form>
    Here is the JQuery script again (simplified)
    Code:
    var ea = $("#go .email_address_in").val(); 
    var bd = $("#email_form .body_in").val()
    $.post(
        "./libs/email/ajax_email.php"
        , { email_address : ea}
         , function(data){
             show_email_success(data);
    })
    
    
    show_email_success(data){
     /*update using JQuery the id of the status message in your popup*/
    }
    The ajax_email.php file:
    Code:
    <?php
    /* ajax_email.php */
    
    
    require_once('ProcessEmail.php');
    
    
    
    
    
    
    if($_POST['go']){
      $email = htmlentities($_POST['go']);
    } else {
      echo 'Failure - missing email'
    }
    
    
    $obj_PE = new ProcessEmail();
    $email_status = $obj_PE->processor($email);
    
    
    echo $email_status;
    
    
    ?>
    And a modified ProcessEmail class as ProcessEmail.php
    Code:
    /* CLASS ProccessEmail */
        class ProcessEmail
        {
    	protected $email_address;
            public function processor($email)
            {
    	    $this->email_address = $email;
    
    
                if ($email != "your e-mail"){
                  
                        if (isItAValidEmail($email))
                        {
                            return 'Submission Successful';
                        } else {
                            return 'Submission Failure- Invalid E-mail';
                        }
    	    } else {
    		die();
    		echo 'Submission Failure- Nothing in Box';
    	    }
            }
            
            protected function isItAValidEmail()
            {
                if (filter_var($this->email, FILTER_VALIDATE_EMAIL))
                    return true;
                else 
                    return false;
            }
        }
    You can see that initially the JQuery $.post function is called. It calls the ajax_email.php file. The ajax_email.php file requires the ProcessEmail.php file. It then tests if the $_POST['go'] variable exists. Normally you would do a lot more checking of this posted value, but I've kept it simple for this illustration. If the email exists, then we instantiate the ProcessEmail instance and then call the processor() method passing it the email. You can see that the ProcessEmail class does not echo values it return them; it is the ajax_email.php job to echo the result of the validation class. The ajax_email.php file then echos the $email_status that has been returned by the processor() method. This echo then gets passed back to the callback function of the $.post. You can see that this excerpt is shown here:
    Code:
    , function(data){
             show_email_success(data);
    You can see that I created a fictitious method in JavaScript call show_email_succes(data). This method could for example have JQuery code that writes the data variable that will contain the message returned by the php class file to an empty container; say an <em id='email_status'></em> were you write the data variables content into this <em>. The <em> would likely be in your pop-up window.

    I hope this is clearer for you. You are getting closer

    Steve
    ictus==""

  13. #13
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sigh, I have spent the last few hours looking all around trying to find out how to obtain those return statements in the status message/alert log/etc from the PHP script. but I still am trying to learn how to do that in order to build the function's conditional statements structure.

  14. #14
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    Sigh, I have spent the last few hours looking all around trying to find out how to obtain those return statements in the status message/alert log/etc from the PHP script. but I still am trying to learn how to do that in order to build the function's conditional statements structure.
    Hi etidd,


    Sorry you're having trouble


    The callback function in the JQuery $.post (highlighted in red) have the callback variable 'data'.
    Code:
    <script='text/javascrit'>
    $.post(
        "./libs/email/ajax_email.php"
        , { email_address : ea}
         , function(data){
             show_email_success(data);
    })
    </script>
    <?php
    echo $data;
    ?>
    When the php script you post to (in this example ajax_email.php) echos out a string. The echoed value is then returned to the callback function in the 'data' variable.

    So you can structure switch logic or if/else to echo a result based on conditions that you define.

    It is also possible to echo a serialized string that could be an array or an instance of an object that has state. Although at this point just get the echoing a string working.

    Does this help?
    Steve
    ictus==""

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Well, I have to struggle at this if I'm going to learn anything.

    I'm trying to do something like the following:

    Code:
    var ea = $("#go .emailaddressin").val(); 
    var bd = $("#email_form .body_in").val()
    $.post(
        "emailtester.php"
        , { email_address : ea}
         , function(data){
             showResult(data);
    })
    
    
    function showResult(data){
    	if ($("data:contains("Submission Success")")  //doesn't like this line
    }
    ...but I'm getting a syntax error on the last line. I need to go read about jQuery syntax.

  16. #16
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Please try
    Code:
    alert(data);
    Please put that inside the function(data){ alert(data); } in the $.post method. If you get what you echoed in the called php script. If you get the correct string alerted then you've done a full ajax trip and then you can slowly add your other JavaScript and debug if an error occurs

    Quote Originally Posted by etidd View Post
    Well, I have to struggle at this if I'm going to learn anything.

    I'm trying to do something like the following:

    Code:
    var ea = $("#go .emailaddressin").val(); 
    var bd = $("#email_form .body_in").val()
    $.post(
        "emailtester.php"
        , { email_address : ea}
         , function(data){
             showResult(data);
    })
    
    
    function showResult(data){
    	if ($("data:contains("Submission Success")")  //doesn't like this line
    }
    ...but I'm getting a syntax error on the last line. I need to go read about jQuery syntax.
    ictus==""

  17. #17
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm not receiving any pop-up that echoes any string using this jQuery:

    Code:
    function input_reset(obj){
    	obj.value = obj.defaultValue;
    }
    
    $(document).ready(function(){
    	$("#confirmform").hide()
    	});
    var ea = $("#go .emailaddressin").val(); 
    var bd = $("#email_form .body_in").val()
    $.post(
        "emailtester.php"
        , { email_address : ea }
         , function(data){
    		 alert(data);
             showResult(data);
    })
    
    
    function showResult(data){
    	//if ($("data:contains("Submission Success")")
    }

  18. #18
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Ok,

    So you're having problems, so I create a quick and very dirty but working example.

    The scripts:

    test.js

    HTML Code:
    $(document).ready(function() {
        $('#submit').click(function() {
            var fn = $(".first_name_in").val();
            var ln = $(".last_name_in").val();
            var em = $(".email_address_in").val();
            
            $.post("process_data.php"
              , {first_name : fn
                 , last_name : ln
                 , email : em
                }
              , function(data){
                 $('#status').html(data);
              }); 
         });
    });

    test_email_form.php
    HTML Code:
    <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, maximum-scale=1.0">
            <title>Email Ajax Test</title>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="test.js"></script> 
            <style>
                div#submit {
                    display: block;
                    width: 150px;
                    height:20px;
                    margin-top: 10px;
                    background-color: #ddd;
                }
            </style>
        </head>
        <body>
            <form name='email_form' method='post'>
                First name: <input type="text" class='first_name_in' name="first_name"><br>
                Last name: <input type="text" class='last_name_in'name="last_name"><br>
                Email: <input type="text" class='email_address_in' name="email"><br>
                
            </form>
            <div id='submit'>Send Email</div><br />
            <div id='status'></div>
        </body>
        
    </html>
    process_data.php
    PHP Code:
    <?php
    $first_name 
    $_POST['first_name'];
    $last_name $_POST['last_name'];
    $email $_POST['email'];
    $status 1;
    $errors '<ul>';
    if(empty(
    $first_name)){
        
    $status 0;
        
    $errors .= '<li>Sorry you did not enter your first name, try again</li>';
    }
    if(empty(
    $last_name)){
        
    $status 0;
        
    $errors .= '<li>Sorry you did not enter your last name, try again</li>';
    }
    if(empty(
    $email)){
        
    $status 0;
        
    $errors .= '<li>Sorry you did not enter your email address, try again</li>';
    }
    $errors .= '</ul>';


    if(
    $status == 1){
        echo 
    'Your email was sent successfully';
    } else {
        echo 
    $errors;
    }
    ?>
    I've attached these files so you can just download them, rather than copy and pasting.
    ajax_email_test.zip

    Put all these files into the same folder on your php server. Then open test_email_form.php. You should see a really ugly looking form with first name, last name, and email, plus a butt ugly submit button.

    First try clicking 'Send Email' without anything in the form inputs. You should get an unordered list back with 3 error messages.

    Second add your first name. Now it will return an unordered list with 2 error messages.

    Continue to fill in the fields, when they are all filled and you hit 'Send Email' you should see a success message.

    This test shows the basics of using a html form, using jQuery ajax to post the inputs to a php file that processes the data. The .php file is set up to return different messages depending on what fields are filled. You can see that we collect the $_POST values and then can evaluate them in php variables. When complete, the php script either echos errors or a success message that gets returned to the AJAX callback function. Then inside the callback function we are setting the HTML of a div to contain the data returned from the php script. You can also see that the page does not reload it uses the AJAX.

    I hope this works for you, otherwise you got problems with your php server. I tested this exact same setup and it works as intended.

    Please also not that none of this code is elegant in any way and it lacks all security with incoming data. I hammered it together in a few minutes so it is not production acceptable code, but it should illustrate the full cycle that you can build out from.

    Regards,
    Steve
    ictus==""

  19. #19
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to test out this script. Do I need to set up a new testing server somehow on XAMPP?

    I also changed the submit to this:
    HTML Code:
    <input type='submit'/>

  20. #20
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    I'm trying to test out this script. Do I need to set up a new testing server somehow on XAMPP?

    I also changed the submit to this:
    HTML Code:
    <input type='submit'/>
    If you have a server already you can likely just add these scripts and then reference them off the domain, or download xamp, lamp (Linux), or wamp . I provided the scripts so you could try them to ensure they work. Normally you don't change anything in a test set of scripts so you can ensure it works, but if you feel you understand it he the more power to you.

    If you think you need to download xamp, what server if any server where you using for the scripts in your earlier posts?
    ictus==""

  21. #21
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yep, that sure works, even though it only checks if it the field is empty!

    Now, do I need to redo my form to have a div submit instead of a
    Code:
    <input type='submit'/>
    and also leave the action attribute of the form unspecified (I know this is a no-no in validation)?

  22. #22
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I've tried to replicate this same code for my current problem, except that I still have a traditional submit input and not a div. When I click the submit button, the page repositions the scroll bar at the top as if the page has been refreshed (not what I want), and I also don't see any posted results in a div I have called status, which is at the bottom of my html file.

    JQuery:
    Code:
    $(document).ready(function(){
    	$("#emailsubmit").click(function(){
    		var ea = $("#go .emailaddressin").val();
    		
    		$.post(
        		"emailtester.php"
        		, { email_address : ea }
         		, function(data){
    		 		alert(data);
             		showResult(data);
    				$('#status').html(data);
    			});
    	});
    });
    emailtester.php
    PHP Code:
    <?php
        
    require_once('checkfirstsub.php');
        
    $status 1;
        
    $errors "<ul>";

        if(
    $_POST['go']){
              
    $email htmlentities($_POST['go']);
            echo 
    $errors '<li>Submission Success</li></ul>';
        } else {
            
    $status 0
            echo 
    $errors '<li>Submission Failure - Empty Box</li></ul>';
        }

        
    $obj_PE = new ProcessEmail();
        
    $email_status $obj_PE -> processor($email);

        echo 
    $email_status;
    ?>
    checkfirstsub.php
    PHP Code:
    <?php
        
    class ProcessEmail
        
    {
            protected 
    $email_address;
            
            public function 
    processor($email)
            {
            
    $this->email_address $email;
            
    $errors '<ul>';
            
    $status 1;

                if (
    $email != "your e-mail"){
                  
                        if (
    isItAValidEmail($email))
                        {
                            return 
    $errors '<li>Submission Successful</li></ul>';
                        } else {
                            return 
    $errors '<li>Submission Failure- Invalid E-mail</li></ul>';
                        }
                } else {
                    return 
    $errors '<li>Submission Failure- Nothing in Box</li></ul>';
                }
            }
            
            protected function 
    isItAValidEmail()
            {
                if (
    filter_var($this->emailFILTER_VALIDATE_EMAIL))
                    return 
    true;
                else 
                    return 
    false;
            }
        }
    ?>
    form markup:
    HTML Code:
    <form id="emailbox" name="form1" method="post">
            <div>
              <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" id="emailsubmit" value="Join" />
            </div>
          </form>
    
           <!--
            2nd form markup here
           -->
         
          <div id="status">
      </div> 

  23. #23
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Ok, so I modified the test stuff I sent you earlier. Again this was a real quick refinement so it sorely lacks in security protection and good object design or assessibility design.

    What I wanted to illustrate to you is:
    • the use of an Object in the data processing file
    • the jQuery function for submit
    • the ability for this to have an action and work if JavaScript is disabled.


    I didn't have time to pack it in a ZIP file, so this time you'll have to copy it.

    test.js

    Code:
    $(document).ready(function() {
        $("form").submit(function(event) {
            event.preventDefault();
            var fn = $(".first_name_in").val();
            var ln = $(".last_name_in").val();
            var em = $(".email_address_in").val();
            
            $.post("process_data.php"
              , {first_name : fn
                 , last_name : ln
                 , email : em
                 , ajax : '1'
                }
              , function(data){
                 $('#status').html(data);
              }); 
         });
    });

    test_email_form.html

    Code:
    <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, maximum-scale=1.0">
            <title>Email Ajax Test</title>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="test.js"></script> 
            <style>
                div#submit {
                    display: block;
                    width: 150px;
                    height:20px;
                    margin-top: 10px;
                    background-color: #ddd;
                }
            </style>
        </head>
        <body>
            <form name='email_form' method='post' action='process_data.php'>
                First name: <input type="text" class='first_name_in' name="first_name"><br>
                Last name: <input type="text" class='last_name_in'name="last_name"><br>
                Email: <input type="text" class='email_address_in' name="email"><br>
                <input type="submit" name="send" value="Submit" />
            </form>
            
            <div id='status'></div>
        </body>
        
    </html>
    and

    process_data.php

    Code:
    <?php
    $ajax = $_POST['ajax'];
    $first_name = htmlentities($_POST['first_name']);
    $last_name = htmlentities($_POST['last_name']);
    $email = htmlentities($_POST['email']);
    
    
    $o_Validate = new Validate($first_name, $last_name, $email);
    if($ajax == 1){
        echo $o_Validate->testForErrors();
    } else {
        $errors = $o_Validate->testForErrors();
    ?>
    <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, maximum-scale=1.0">
            <title>Email Ajax Test</title>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="test.js"></script> 
            <style>
                div#submit {
                    display: block;
                    width: 150px;
                    height:20px;
                    margin-top: 10px;
                    background-color: #ddd;
                }
            </style>
        </head>
        <body>
            <form name='email_form' method='post' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
                First name: <input type="text" class='first_name_in' name="first_name"><br>
                Last name: <input type="text" class='last_name_in'name="last_name"><br>
                Email: <input type="text" class='email_address_in' name="email"><br>
                <input type="submit" name="send" value="Submit" />
            </form>
            
            <h2>Message(s)</h2>
            <?php echo $errors; ?>
        </body>
        
    </html>
    <?php
    }
    ?>
    <?php 
    
    
    class Validate {
        protected $first_name;
        protected $last_name;
        protected $email;
        
        function __construct($first_name, $last_name, $email){
            $this->first_name = $first_name;
            $this->last_name = $last_name;
            $this->email = $email;
            
        }
        public function testForErrors(){
            $status = 1;
            $errors = '<ul>';
            if(empty($this->first_name)){
                $status = 0;
                $errors .= '<li>Sorry you did not enter your first name, try again</li>';
            }
            if(empty($this->last_name)){
                $status = 0;
                $errors .= '<li>Sorry you did not enter your last name, try again</li>';
            }
            if(empty($this->email)){
                $status = 0;
                $errors .= '<li>Sorry you did not enter your email address, try again</li>';
            }
            $errors .= '</ul>';
        
            if($status == 1){
                return 'Your email was sent successfully';
            } else {
                return $errors;
            }
        }
    }
    ?>
    You can see the most extensive changes in the process_data.php file. Please note the extra ajax JavaScript variable that is passed to this .php page. This is used to decide if the request was initiated by the AJAX object or if it didn't (JavaScript turned off or device incapable of loading JavaScript).

    Again, you can call as many objects and manipulate whatever data you want in the process_data.php page. Even if you need to echo an Array you can

    myarray = array(one, two, three);

    echo implode(",", myarray); /*This will echo a string one, two, three that you can interpret in a JavaScript array*/

    Sorry for the quickness.

    Steve
    Last edited by ServerStorm; Feb 3, 2013 at 14:42.
    ictus==""

  24. #24
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here, I tried something similar to that. When I click the submit button, nothing happens on the page.

    emailbox.js
    Code:
    $(document).ready(function(){
    	$("#emailbox").submit(function(event){
    		event.preventDefault();
    		var ea = $("#go .emailaddressin").val();
    		
    		$.post(
        		"emailtester.php"
        		, { email_address : ea 
    			   , ajax : 1 }
         		, function(data){
    				$('#status').html(data);
    				showResult(data);
    			});
    	});
    });
    emailtester.php
    PHP Code:
    <?php
        
    require_once('checkfirstsub.php');
        
    $status 1;
        
    $ajax $_POST['ajax'];
        
    $messages " ";

        if(
    $_POST['go']){
              
    $email htmlentities($_POST['go']);
            
    $messages '<ul><li>Submission Success</li></ul>';
        } else {
            
    $status 0
            
    $messages '<ul><li>Submission Failure - Empty Box</li></ul>';
        }

        
    $obj_PE = new ProcessEmail();
        if (
    $ajax == 1)
            
    $messages $obj_PE -> processor($email);
        else {
            
    $messages $obj_PE -> processor($email);
        }
    ?>
    <!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="viewport" content="width=device-width, maximum-scale=1.0" />
        <title>Sign Up for the Mailing List at World Review Group</title>
        <script type="text/javascript" src="emailbox.js"></script>
        <script type="text/javascript" src="Scripts/jQuery.js"></script>
    </head>
    <body>
          <form id="emailbox" name="form1" method="post" action=<?php $_SERVER['PHP_SELF']; ?>>
            <div>
              <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" id="emailsubmit" value="Join" />
            </div>
          </form>
          <h2>Message(s)</h2>
          <?php echo $messages?>
    </body>
    </html>
    checkfirstsub.php
    PHP Code:
    <?php
        
    class ProcessEmail
        
    {
            protected 
    $email_address;
            
            public function 
    processor($email)
            {
            
    $this -> email_address $email;
            
    $status 1;

                if (
    $email != "your e-mail"){
                        if (
    isItAValidEmail($email))
                        {
                            return 
    '<ul><li>Submission Successful</li></ul>';
                        } else {
                            return 
    '<ul><li>Submission Failure- Invalid E-mail</li></ul>';
                            
    $status 0;
                        }
                } else {
                    return 
    '<ul><li>Submission Failure- Default Value in Box</li></ul>';
                    
    $status 0;
                }
            }
            
            protected function 
    isItAValidEmail()
            {
                if (
    filter_var($this->emailFILTER_VALIDATE_EMAIL))
                    return 
    true;
                else 
                    return 
    false;
            }
        }
    ?>
    index.html (main form on the home page)
    HTML Code:
    <form id="emailbox" name="form1" method="post" action="Scripts/emailtester.php">
            <div>
              <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" id="emailsubmit" value="Join" />
            </div>
          </form>

  25. #25
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Off the bat I can see that your emailtester.php seems wrong to me. Here is what I think it needs to be:

    emailtester.php
    Code:
    <?php
        require_once('checkfirstsub.php');
        $status = 1;
        $ajax = $_POST['ajax'];
        $messages = " ";
    
        if($_POST['go']){
              $email = htmlentities($_POST['go']);
            $messages = '<ul><li>Submission Success</li></ul>';
        } else {
            $status = 0; 
            $messages = '<ul><li>Submission Failure - Empty Box</li></ul>';
        }
    
        $obj_PE = new ProcessEmail();
        if ($ajax == 1)
            /* this is the code that echo the message that triggers the JavaScript post callback, This php code is called in a separate email form (not the one listed below in the else statement. For exampel this ajax code is running in a test_email_form.html page */
            echo $obj_PE -> processor($email);
        else {
            /* This is the code that is run if JavaScript is turned off or is not supported */
            $messages = $obj_PE -> processor($email);
    // removed else bracket
    ?>
    <!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="viewport" content="width=device-width, maximum-scale=1.0" />
        <title>Sign Up for the Mailing List at World Review Group</title>
        <script type="text/javascript" src="emailbox.js"></script>
        <script type="text/javascript" src="Scripts/jQuery.js"></script>
    </head>
    <body>
          <form id="emailbox" name="form1" method="post" action=<?php $_SERVER['PHP_SELF']; ?>>
            <div>
              <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" id="emailsubmit" value="Join" />
            </div>
          </form>
          <h2>Message(s)</h2>
          <?php echo $messages; ?>
    </body>
    </html>
    <?php
    }  // Added the Else end bracket for the non-AJAX 'traditional post else statement
    ?>
    Also don't forget to put a target for the AJAX callback data to be displayed like:

    home.html
    Code:
    <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, maximum-scale=1.0">
            <title>Email Ajax Test</title>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="emailbox.js"></script>
             <style>
                div#submit {
                    display: block;
                    width: 150px;
                    height:20px;
                    margin-top: 10px;
                    background-color: #ddd;
                }
            </style>
        </head>
        <body>
           <form id="emailbox" name="form1" method="post" action="Scripts/emailtester.php">
                <div>
                    <input type="text" name="emailaddress" id="go" class="emailaddressin" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
                    <input type="submit" id="emailsubmit" value="Join" />
               </div>
           </form>
           <div id='status'></div> <!-- gets the AJAX callback data -->
        </body>
      </html>
    ictus==""


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
  •