Results 1 to 3 of 3

Thread: [RESOLVED] Trying to display message in <form> without refreshing page?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,001

    Resolved [RESOLVED] Trying to display message in <form> without refreshing page?

    Hi,

    I have a contact form on my page that sends an email. I have a <label> tag that will contain a message, be it successful or an error in the form. The problem I'm having is that my script is a PHP script to send the mail. I want to be able to click "submit" and then have the message immediately appear in the form without refreshing the page. Not sure how to do that. Below is my HTML and PHP code:

    Code:
        <div id="p2" class="boxes">
            <div id="contactMe" class="mainDiv">
                <h1>Contact Form</h1>
                <br>
                <form id="contact-form" action="scripts/mail3.php" method="POST">
                    <label id="user-message"></label>
                    <br>
                    <label for="fullname">Full Name</label>
                    <br>
                    <input id="txtName" type="text" name="txtName">
                    <br>
                    <br>
                    <br>
    
                    <label for="email">E-Mail</label>
                    <br>
                    <input id="txtEmail" type="text" name="txtEmail">
                    <br>
                    <br>
                    <br>
    
                    <label for="message">Message</label>
                    <br>
                    <textarea id="txtMessage" rows="3" cols="50" name="txtMessage"></textarea>
    
                    <button id="mail-submit" type="submit" name="submit">Send E-Mail</button>
    
                    <p class="form-message"></p>
                </form>
            </div>
    
            <div class="backToTop"><a href="#theTop">Back to Top</a></div>
        </div>
    Here is the PHP code:

    Code:
    <?php
        session_start();
    
        $message = $to = $from_email = "";
        $to = "info@something.com";
    
        if (empty($_POST["txtEmail"])) {
            $emailErr = "Email is required";
        } 
        else {
            $from_email = $_POST["txtEmail"];
    
            // check if e-mail address is well-formed
            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                $emailErr = "Invalid email format";
            }
        }
    
    
        if (empty($_POST["txtMessage"])) {
            $emailErr = "Message is required";
        } 
        else {
            $message = $_POST["txtMessage"];
        }
    
        $subject = "* * * Email Inquiry * * *";
    
        // compose headers
        $headers = "From: info@something.com\r\n";
        $headers .= "Reply-To: info@something.com\r\n";
        $headers .= "X-Mailer: PHP/".phpversion();
    
        $message = wordwrap($message, 70);
    
        // send email
        if (mail($to, $subject, $message, $headers)) {
            header('Location: http://www.something.com/#p2');    
            echo("<script>window.scrollTo({'behavior': 'auto','left': left,'top': top});;document.getElementById('user-message').innerHTML = 'Message Successfully Sent!';");
        }
        else {
            echo("Message failure!");
        }
    ?>
    Blake

  2. #2

    Re: Trying to display message in <form> without refreshing page?

    Hii,

    You can do it through AJAX.

    Code:
    <script>
    $(document).ready(function(){
    $("#contact-form").on("submit", function(e){
            e.preventDefault();
        dataString = jQuery('form#contact-form').serialize();
        jQuery.ajax({
            type: "POST",
            url: "full_path/wyslij.php",
            data: dataString,
            success:  function(data)
            { 
                alert('Form successfully submitted.')
            },
            error:  function(data)
            { 
                alert('Form not submitted.')
            }
        }); 
    });
    });
    </script>
    Also form action should be removed:

    Code:
    <form id="contact-form" method="POST">
    I Hope it helpfull to you...

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,001

    Re: Trying to display message in <form> without refreshing page?

    Thanks brother....that's what I've been looking for!!!
    Blake

Posting Permissions

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



Click Here to Expand Forum to Full Width