javascript - 弹出表单成功消息

Question

我们在一个非常基本的弹出窗口中内置了一个销售人员表单，我们希望在提交时显示一条成功消息。现在它关闭弹出窗口并刷新页面。请耐心等待，任何帮助都会非常有用。

编辑:我不想只使用警报。我希望成功消息出现在表单所在的原始弹出窗口中。

这就是我所拥有的:

<?php
$firstname_status = '';
$lastname_status = '';
$email_status = '';
$phone_status = '';

// If form submits then check form post values.
// Based on proper field validation do curl post to specific location or display proper message



echo $_POST['post_url'];
if($_POST && isset($_POST['post_url']{0}))
{
    if (
        isset($_POST['email']{0}) &&
        filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) &&
        isset($_POST['first_name']{0}) &&
        trim($_POST['first_name']) != '' &&
        isset($_POST['last_name']{0}) &&
        trim($_POST['last_name']) != '' &&
        (trim($_POST['phone']) == '' || (is_numeric($_POST['phone']) && in_array(strlen($_POST['phone']), array(9,10,12,14))) || preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true || preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true)
       )
    {
        // Remove all characters from phone field to make it an integer value
        $_POST['phone'] = preg_replace('/[^0-9]/', '', $_POST['phone']);

        // Call function post_to_url to post form values through curl
        $return = post_to_url($_POST['post_url'], $_POST);


    }
    else
    {
        // Check if first name is not blank or set proper error message
        if(!isset($_POST['first_name']{0}) || trim($_POST['first_name']) == '')
        {
            $_POST['first_name'] = '';
            $firstname_status = '<label id="first_name-error" class="error" for="first_name">Please enter your first name</label>';
        }

        // Check if last name is not blank or set proper error message
        if(!isset($_POST['last_name']{0})  || trim($_POST['last_name']) == '')
        {
            $_POST['last_name'] = '';
            $lastname_status = '<label id="last_name-error" class="error" for="last_name" style="display: inline;">Please enter your last name</label>';
        }

        // Check if email is not blank and proper email format or set proper error message
        if(!isset($_POST['email']{0}) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
        {
           $email_status =  '<label id="email-error" class="error" for="email" style="display: inline;">Please enter a valid email address</label>';
        }

        // Check if phone is not blank then check phone numver format (integer / xxx-xxx-xxx / (xxx) xxx-xxxx) validation
        if(isset($_POST['phone']{0}) && (!is_numeric($_POST['phone']) || !in_array(strlen($_POST['phone']), array(9,10,12,14))) && preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false && preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false)
        {
            $phone_status = '<label style="display: inline;" for="phone" class="error" id="phone-error">Please enter valid phone number</label>';
        }


    }

}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.js"></script>
<script src="../jquery.validate.js"></script>

<script>
// Custom method to check phone number format
$.validator.addMethod('customphone', function (value, element) {
    if(value != '')
    {
        return this.optional(element) || (/^[0-9]+$/.test(value)  && value.length == 10)|| /^\d{3}-\d{3}-\d{4}$/.test(value) || /^\(\d{3}\) \d{3}-\d{4}$/.test(value);
    }
    else
        return true;
}, "Please enter a valid phone number");

$().ready(function() {

    $("#pop_up").validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                customphone : 'customphone',
                required: false
            }

        },
        messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            }
        }
    });

});
</script>

<form action="" method="POST" id="pop_up">

    <input type=hidden name="oid" value="###############">
    <div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div>


    <div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div>
    <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID">
    <input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer -->
    <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source">
    <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url">

</form>

弹出窗口

<script src="jquery-cookie.js"></script>
  <script>
  $(document).ready(function(){
    // check to see if the cookie exists
    var cookieExists = Cookies.get('showPopup');

    // if the cookie does not exist, then step into here
    if(!cookieExists) {
      // set the cookie
      Cookies.set('showPopup', 'true', { expires: 1 });

      // fade in the popup
      $("#overlay").delay(6000).fadeIn(600);
    }

    // this is an extra action that can be called any time
    $(".close").click(function(){
        $("#overlay").hide();
    });
  });

  </script>



    <article id="overlay" style="display: none;">


                <section id="form">
                    <h3 class="gold">We’re here to help</h3>


                    <?php echo do_shortcode("[salesforce]"); ?>


                    <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a>



                </section>

            </article>

$(document).ready(function(){
    

      // fade in the popup
      $("#overlay").delay(6000).fadeIn(600);
    })

    // this is an extra action that can be called any time
    $(".close").click(function(){
        $("#overlay").hide();

    });


 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://stacksnippets.net/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="overlay" style="display: none;">


            <section id="form">
                <h3 class="gold">We’re here to help</h3>


               <form action="" method="POST" id="pop_up">

    <input type=hidden name="oid" value="###############">
    <div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div>

    <div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div>


    <div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div>
    <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID">
    <input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer -->
    <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source">
    <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url">

</form>


                <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a>



            </section>

        </article>

Answer 1

不幸的是，jsfiddle 虽然总体上很棒，但似乎不喜欢表单提交，所以这是一个临时的 codepen demo 。原则上，此解决方案涉及在验证器之前插入 jquery 提交函数，以拦截提交操作并在使用以下代码恢复操作之前应用成功消息:

JS:

// fade in the popup
$("#overlay").fadeIn(1500);

// this is an extra action that can be called any time
$(".close").click(function() {
    $("#overlay").hide();
});

$(window).load(function() {

    var popup = $("form#pop_up");

    popup.submit(function(event) {
        var $this = $(this);
        if (!$this.hasClass('paused')) { // check if it isn't in a pause state
            event.preventDefault(); // prevent the submission
            $this.addClass('paused'); // use this class as a flag
            $("#overlay").append('SUCCESS!'); // add the success message
            setTimeout(function() {
                $("#overlay").append('  ...');
                $(".form-button").trigger('click');  // mechanically trigger a second click
            }, 2000); // define a delay
        }
    })

    popup.validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                customphone: 'customphone',
                required: false
            }
        },
        messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            }
        },
        success: function(event) {
            //   alert('success message');
            // do other things for a valid form

        },
        submitHandler: function(form, event) {
            // do other things for a valid form

        }
    });

});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://validatejs.org/validate.min.js"></script>


<article id="overlay" style="display: none;">


    <section id="form">
        <h3 class="gold">We’re here to help</h3>


        <form action="" method="POST" id="pop_up">

            <input type=hidden name="oid" value="###############">
            <div class="field-wrap text-wrap label-above">
                <label for="first_name">First Name</label>
                <?=$firstname_status;?>
                    <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" />
            </div>

            <div class="field-wrap text-wrap label-above">
                <label for="last_name">Last Name</label>
                <?=$lastname_status;?>
                    <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" />
            </div>

            <div class="field-wrap text-wrap label-above">
                <label for="email">Email Address</label>
                <?=$email_status;?>
                    <input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" />
            </div>

            <div class="field-wrap text-wrap label-above">
                <label for="phone">Phone Number</label>
                <?=$phone_status;?>
                    <input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" />
            </div>


            <div class="field-wrap submit-wrap label-above">
                <input type="submit" name="submit" value="See the Offer" class="form-button">
            </div>
            <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID">
            <input type="hidden" value="Pop-up" id="################" name="######################" />
            <!-- this is email offer -->
            <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source">
            <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url">

        </form>


        <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a>


    </section>

</article>