SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I hide a form and show other text upon submit?

    I am new to javascript, so be patient with me
    I have a form

    Code:
    <div class="eform"> 
              <form action="process.php" method="post" name="email" class="hidden">
               Enter your email for a little surprise<input name="email" type="text" size="30"  height="15px"><input type="submit" value="Go!" class="text_button">
              </form>
            </div>
    this is on the css
    Code:
    div.eform{
        position: absolute;
        right:10px;
        top:1px;
        font-size: 11px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
    	}
    	
    .text_button {
       border: none;
       background-color: transparent;
       padding: 0;
       color: #fff; 
      font-size: 11px;
        font-weight: bold;
    }
    How can I hide the form when they submit their email and show "Thanks for submitting your email" ?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unless you plan on using Ajax for form submission then it's best to use PHP to acheive what you want.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I achieve what I want with php? here is my process code
    Code:
    <?php
      $field_1 = $_REQUEST['email'] ;
    
     if (empty($field_1)) {
    
        header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
        header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );
        header( "Cache-Control: no-cache, must-revalidate" );
        header( "Pragma: no-cache" );
    
        ?>
    
    
        <html>
        <head><title>Error</title></head>
        <body>
        <h1>Error</h1>
        <p>
        Oops, it appears you forgot to fill out all of the required fields. Please press the BACK
        button in your browser and try again.
        </p>
        </body>
        </html>
    
        <?php
      }
      else {
    mail($_POST['email'], 'Your Surprise','
    
    Your Surprise!
    
    
    
     ' . $_POST['field_1'],
     "From: my email <my email>\n" . 
        "MIME-Version: 1.0\n" .
        "Content-type: text/html; charset=iso-8859-1");
    # Change Subject and message, etc
    mail("myemail","Form submission","Email Form data:
    
    Email: $field_1 
    
    ");
    
        echo "Your surprise has been sent" ;
      }
    ?>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Submitting a form automatically loads a new page and so the form would then not be visible. Only if you override the submit process so that pressing the submit button does not submit the form will you still be on the same page and then you can have JavaScript perform whatever action you require with the page content based on what was entered into the form.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Submitting a form automatically loads a new page and so the form would then not be visible. Only if you override the submit process so that pressing the submit button does not submit the form will you still be on the same page and then you can have JavaScript perform whatever action you require with the page content based on what was entered into the form.
    Can you give me an example?

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either you use Ajax and display the results with JavaScript by injecting elements into the DOM or you use basic PHP to show/hide certain text/elements dependent on whether certain form values have been submitted. If you're not looking for an Ajax solution (JavaScript) then try posting in the PHP forum.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I think I need and ajax solution because I can't change my html page to a php.

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ajax is easiest when you're using a library so I recomend downloading one.

    jQuery is probably the most intuitive out of all of them...

    You need to link to it in the top of your document, and also, create another JS file where you can write your own custom JS which will use the library:

    Code html4strict:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

    In main.js:

    Code JavaScript:
    $(document).ready(function(){  //jQuery's way of testing whether the DOM is ready
        // YOU NEED TO EDIT THIS:
        var formID = 'your_form_id';
        // The Ajax:
        $('#'+formID).submit(function(){
            var $form = $(this);
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: $form.serialize(),
                success: function(responseData){
                    $form.prepend(responseData); // Decide what you want to do with the data.
                }
            });
            return false;
        });
    });

    The above script submits the form using Ajax and prepends the response to the form. You can do anything you want with the response data - just edit the success function. So, you could alert it like this:

    Code JavaScript:
    success: function(responseData){
        alert(responseData);
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •