如何在提交optin表单后显示javascript或php SUCCESS消息

时间:2015-03-25 06:34:11

标签: javascript php jquery html forms

我正在使用带有表单的自定义optin页面,目前表单的工作方式如下 USER SUBMITS>他/她的页面刷新>我收到了提交数据的电子邮件。

但是用户没有收到确认消息,所以大多数时候,用户重新提交表单,认为它第一次没有工作。

我想向其添加一个Popup / Javascript成功消息 OR 点击提交后,用户会被重定向到另一个页面。

这是当前的表单代码

<div class="form fix ">
                    <p class="form-text">Fill This Out and See Your <br>Timeshare Report</p>
                    <form name="contactform" action="mail-script.php" method="POST">
                        <label for="fname">First Name:
                            <input type="text" name="fname" id="fname" />
                        </label><br>
                        <label for="lname">Last Name:
                            <input type="text" name="lname" id="lname" />
                        </label><br>
                        <label for="email">Email Address:
                            <input type="text" name="email" id="email" />
                        </label><br>
                        <label for="phone">Phone Number:
                            <input type="text" name="phone" id="phone" />
                        </label><br>
                        <label for="phone">Alternate Phone:
                            <input type="text" name="phone" id="aphone" />
                        </label><br>
                        <label for="resort">Resort Name:
                            <input type="text" name="resort" id="resort" />
                        </label><br>
                        <label for="amount">Amount Owed? $:
                            <input type="number" name="amount" id="amount" />
                            <p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">
                            If Paid Off Leave Zero, Else Put Amount</p>
                        </label><br>
                        <div class="checkbox">
                            <div class="check-text fix">
                                <p>I'm Considering To</p>
                            </div>
                            <div class="check-one fix">
                                <input type="checkbox" name="call" id="" value="sell"/> Sell It <br>
                                <input type="checkbox" name="call" id="" value="buy"/> Buy It <br>
                                <input type="checkbox" name="call" id="" value="rent "/> Rent  It 
                            </div>
                            <div class="check-two fix">
                                <input type="checkbox" name="call" id="" value="cancel"/> Cancel Mortgage <br>
                                <input type="checkbox" name="call" id="" value="ownership"/> End Ownership <br>
                                <input type="checkbox" name="call" id="" value="give"/> Give It Back
                            </div>
                        </div>

                                                 <p class="captcha">
                            <img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
                            <label for='message'>Enter the code above here :</label><br>
                            <input id="6_letters_code" name="6_letters_code" type="text"><br>
                            <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
                        </p>
                        <input id="submit" type="submit" value="" />
                        <p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
                    </form>
                </div>
            </div>

这是表单的在线网址 http://timesharesgroup.com/sell/index.html

********************** UPDATE ************************ ****** enter image description here

3 个答案:

答案 0 :(得分:2)

如果您只想要一个普通的弹出按钮,则可以执行以下操作:

$('form').on('submit',function(){
           alert('submitted');
});

如果您想要更好的方式来做事,可以使用AJAX。 您可以在HTML中添加隐藏 div并取得id次成功,并执行以下操作:

<span class="success">Thank's for submitting the form</span>

和AJAX是:

$(document).ready(function() {
    $("form[name='contactform']").submit(function() {

        // do the extra stuff here
        $.ajax({
            type: "POST",
            url: "mail-script.php",
            data: $(this).serialize(),
            success: function() {
                $('.success').fadeIn(100).show();

            }
        })

    })
})

答案 1 :(得分:0)

您可以通过以下功能在表单提交事件上给出相应的消息。如果您提到内部功能,您甚至可以通过event.preventDefault();停止表单提交。

$( "form" ).submit(function( event ) {
alert( "Handler for submit() called." );
window.location.href="another html page";
});

答案 2 :(得分:0)

当用户点击您的网址如www.site.com/index.php时,表单即将出现。当用户填写数据并点击提交显示如下www.site.com/mail-script.php的网址时,我问你的mail-script.php代码在哪里

在此文件底部,您可以添加此行代码。

标题('位置:thankyou.php');

并像这样创建你自己的thankyou.php文件

<html>

<body>
       <h1>Mail delivery success. Touch you soon...</h1>
</body>
</html>