Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 20 of 20
  1. #11
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    What have I done incorrectly in this jQuery statement?

    Code:
    $(function(){
        $.post("emailprocessor.php", $("#emailbox").serialize());
    I made the new php file and copied over a lot of code that I need.

  2.  

  3. #12
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    Code:
    $(document).ready(function(){
        //When the submit button is clicked
        $("#submitButton").on("click", function(){
                    //Post the form data serialized for the proper formatting
                    $.post("process.php",$("#myForm").serialize()
                    //Get the response from process.php
                    , function(response){
                            //Prepend the response to div id step2
                            $("#step2").prepend($(response).fadeIn("slow"));
                            //hide the div for the first step (the one with the form that just got posted)
                            $("#step1").hide();
                    });
        });
    });
    This might help. Basically, you want to grab the submit even of the form (give the submit button an id of "submitButton". Then, post the form using jQuery and get the response from the process.php file and add it to the div you want to show for the next step. I used prepend and fadeIn for effect but you could also just use .html()
    Then, hide the form and other content you have in the first step. Actually, you might want to put that before your post function but, if something goes wrong you could end up with a pretty blank page.
    Freelance Web Developer

  4. #13
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    Quote Originally Posted by Tyler Smith, post: 246960
    What have I done incorrectly in this jQuery statement?

    Code:
    $(function(){
        $.post("emailprocessor.php", $("#emailbox").serialize());
    I made the new php file and copied over a lot of code that I need.
    You aren't doing anything with the response. Look at my code sample and see how I used the callback function for .post() to populate the page with the html that you get from the process.php page.

    This assumes, of course, that your process.php page will process the form and create some sort of html output.
    Freelance Web Developer

  5. #14
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    I actually don't want to hide form1 after it is clicked, so I removed that clip. I also put in the right id's for my html file.

    This is a screenshot of the simple form #1. It is the orange-looking flag thing in the bottom-right corner.

    http://i11.photobucket.com/albums/a1...eenshot124.png

    My PHP script will be especially useful and it will retrieve the current page and categorize it for the database writer part that uses PDO to write to the database because it's more secure than mySQL. I will also use it to send an introductory e-mail to the accepted e-mail submission. And it will also e-mail me saying that someone has signed up.

    Somehow I want to disable all the rest of the website contact if the e-mail submission form is active, and I want to have a gray, opacity over everything except that 2nd step.

    Those are my goals for this project.

    Code:
    $(document).ready(function(){
        //When the submit button is clicked
        $("#origemailform").on("click", function(){
                    //Post the form data serialized for the proper formatting
                    $.post("emailprocessor.php",$("#emailbox").serialize()
                    //Get the response from process.php
                    , function(response){
                            //Prepend the response to div id step2
                            $("#form2").prepend($(response).fadeIn("slow"));
                    });
        });
    });
    That's what I want to use

  6. #15
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Wait, what I've done is already had a hidden success/failure div and hid it off the screen with absolute positioning. Maybe this is PHP/jQuery's responsibility.

    HTML Code:
      <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()"/>
          <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
        </form>
      </div>
    <!-- THE NEW DIV THAT PROBABLY NEEDS TO BE PRODUCED BY PHP SOMEHOW -->
      <div id="successorfailure">
          <h4>Submission Failure</h4>
          <p id="postsubmissionmessage">Your submission has failed.</p>
      </div>

  7. #16
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    Quote Originally Posted by Tyler Smith, post: 246966
    Wait, what I've done is already had a hidden success/failure div and hid it off the screen with absolute positioning. Maybe this is PHP/jQuery's responsibility.
    It could be. You can leave it the way it is and change the positioning with jQuery using .css() or you could hide it with jquery .hide() on page load and use jquery to .show() it when you are ready.

    It's good to use jquery to hide anything that you want to make visible with jquery in case any users have javascript disabled. If you hide it with css (display:none anyone who has javascript disabled will NEVER see it.
    Freelance Web Developer

  8. #17
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Okay, I will just place them in their rightful positions in the center and use jQuery show() and hide() predefined functions with the click() function. I was planning on just changing and checking the php results to return true or false and jQuery will show it if it is true (a valid submission) and false for failure. It will show the next step and access another PHP file for checking the next step submission & writing to the database.

  9. #18
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Well, I should also determine how I'm going to change the HTML content inside of #successorfailure div through the client-side. I hope that jQuery can help with this.

  10. #19
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    So, my strategy has been switched up to a jQuery/PHP-combo so the page does not have to redirected/refreshed, and right now I'm trying to return the necessary results from the PHP code into the jQuery/JavaScript side so that I can run code to show/hide the forms as I need to and change an element with a message on the client-side.
    index.php is changed back to index.html
    HTML Code:
     <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 id="successorfailure">
       <h4>Submission Failure</h4>
       <p id="postsubmissionmessage">Your submission has failed.</p>
      </div>
    </div><!-- end container -->
    <script type="text/javascript" src="Scripts/jQuery.js"></script>
    <script type="text/javascript" src="Scripts/emailbox.js"></script>
    emailbox.js
    Code:
    function input_focus(obj){
     if ( obj.value == obj.defaultValue ){
      obj.value = ""
     }
    }
    function input_reset(obj){
     obj.value = obj.defaultValue;
    }
    $(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(){
                    });
        });
    });
    emailtester.php
    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($emailFILTER_VALIDATE_EMAIL))
        return 
    true;
       else
        return 
    false;
      }
     }
    ?>
    confirmform.php
    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;
        }
       }
     }
    ?>
    How do I return results from the PHP to the jQuery saying that it is a valid entry, and, therefore, it should show the next form??

  11. #20
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Here's my progress so far (don't know if anyone is still looking at this thread):

    jQuery/JavaScript
    Code:
    function input_focus(obj){
        if ( obj.value == obj.defaultValue ){
            obj.value = ""
        }
    }
    
    function input_reset(obj){
        obj.value = obj.defaultValue;
    }
    
    $(document).ready(function(){
        $("#emailsubmit").click(function(){
            var ea = $("#go .emailaddressin").val();
    
            $.post(
                "emailtester.php"
                , { email_address : ea }
                , function(data){
                    $('#status').html(data);
                    showResult(data);
                });
        });
    });
     
    function showResult(data){
        //if ($("data:contains("Submission Success")")
    }
    emailtester.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>';
                            
    $status 0;
                        }
                } else {
                    return 
    $errors '<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;
            }
        }
    ?>
    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>';
                            
    $status 0;
                        }
                } else {
                    return 
    $errors '<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;
            }
        }
    ?>
    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>
    Its current behavior when the submit button is clicked is the page "restarts" and goes to the top- like a page refresh with no changes on the screen - url address has a ? appended to it, and all I want to accomplish before moving forward with these scripts is to just obtain the status message printed on a div on-screen.

    I've seen this same technique used without a form action specified and the submit button was just a div, but it worked (It doesn't with mine for some reason).

    HELP


Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com