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

Question

我正在使用带有表单的自定义选择页面，目前表单的工作方式如下用户提交 > 为他刷新页面 > 我收到一封包含已提交数据的电子邮件。

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

我想向其中添加弹出窗口/Javascript 成功消息或点击提交后，用户将被重定向到另一个页面。

这是当前的表单代码

<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

************************更新************************ ******

Answer 1

如果你只想要一个普通的弹出按钮，你可以这样做:

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

如果你想要更有趣的方式来做事，你可以使用AJAX .您可以向您的 HTML 添加一个 hidden div with id success，然后执行以下操作:

<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();

            }
        })

    })
})