表单消息提醒

时间:2015-08-13 18:08:09

标签: javascript php jquery html ajax

我有以下表格:

<form method="post" action="contactus.php" name="myForm" autocomplete="off">
            <label for="Name">Name:</label>
            <input type="text" name="Name" id="Name" maxlength="60" required/>

            <label for="email">Email:</label>
            <input type="text" name="email" id="email" maxlength="120" required/>

            <label for="message">Message:</label><br />
            <textarea name="message" rows="20" cols="20" id="message" required></textarea>

            <input type="submit" name="submit" value="Submit" class="submit-button" />

        </form>

和一些发送电子邮件的PHP,PHP与表单(contactus.php)位于同一页面上,我希望在页面的某个地方出现一条消息(请不要弹出)告诉用户已经发送了电子邮件(电子邮件不需要验证,仅在按下按钮时)。这可以在PHP,AJAX或JS中完成我不介意

3 个答案:

答案 0 :(得分:0)

HTML代码 -

<p style="display:none">Mail Send Successfully </p>
<form method="post" action="contactus.php" name="myForm" autocomplete="off">
            <label for="Name">Name:</label>
            <input type="text" name="Name" id="Name" maxlength="60" required/>

            <label for="email">Email:</label>
            <input type="text" name="email" id="email" maxlength="120" required/>

            <label for="message">Message:</label><br />
            <textarea name="message" rows="20" cols="20" id="message" required></textarea>

            <input id="submit-btn" type="submit" name="submit" value="Submit" class="submit-button" />

        </form>

AJAX代码 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#submit-btn').click(function(){
                var name = $('#name').val();
                var email = $('#email').val();
                var message = $('#message').val();

                $.ajax({
                type: "POST",
                url: "form-submit.php", // in this file we will put the code of send email and also we will return a response
                data:"name="+name+"&email="+email+"&message="+message,
                success: function(response) // we will get response
                    {
                        $('p').show(); // here message will show after send email
                    }
              }); 
        });
        });
        </script>

答案 1 :(得分:0)

<form method="post" action="contactus.php?message=ok" name="myForm" autocomplete="off">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name" maxlength="60" required/>

    <label for="email">Email:</label>
    <input type="text" name="email" id="email" maxlength="120" required/>

    <label for="message">Message:</label><br />
    <textarea name="message" rows="20" cols="20" id="message" required</textarea>

    <input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div id="displayMessage"></div>*****************new div to display message put wherever you want******************

使用Javascript:

<script>
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }
        if(getParameterByName("message") == "ok")
        {
            document.getElementById("displayMessage").innerHTML = "Message Sent.";
            window.alert("Message Sent.");//If you want an alert box
        }
<script>

只需将<script></script>放在身体末端......

答案 2 :(得分:0)

如果发送邮件的PHP在同一页面上,我假设这样的结构:

<?php
if (isset($_POST['email']) && strlen($_POST['email') {
    mail("name@example.com", "subject", "text");
}
?>

我建议你在那里添加一个变量,如下所示:

<?php
if (isset($_POST['email']) && strlen($_POST['email') {
    mail("name@example.com", "subject", "text");
    $sent_mail = true; // so we know later
}
?>

然后在页面的某个地方,执行以下操作:

<?php
if (isset($sent_mail)) {
    echo 'Success!';
}
?>

不需要javascript:)