成功后清除文本值? [英] clear text value after success?

问题描述

这是在WordPress网站上.我正在使用以下php从输入框中获取用户的电子邮件，并将其添加到我的mailchimp列表中.有一个js和php页面可以完成所有繁重的mailchimp任务，但这对我的问题来说并不重要:

This is on a WordPress site. I am using the following php to take a user's email from an input box and add it to my mailchimp list. There is a js and php page that does all the heavy mailchimp stuff, but that shouldn't be important for my question:

<?php  
// store-address.php

function storeAddress(){

    // Validation
    if(!$_GET['email']){ return "No email address provided"; } 

    if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$/i", $_GET['email'])) {
        return "Email address is invalid"; 
    }

    require_once('MCAPI.class.php');
    // grab an API Key from http://admin.mailchimp.com/account/api/
    $api = new MCAPI('my-api-key');

    // grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
    // Click the "settings" link for the list - the Unique Id is at the bottom of that page. 
    $list_id = "my-list";

    if($api->listSubscribe($list_id, $_GET['email'], '') === true) {
        // It worked!   
        return 'Success! Check your email to confirm sign up.';
    }else{
        // An error ocurred, return error message   
        return 'Error: ' . $api->errorMessage;
    }

}

// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>

然后在用户输入电子邮件的页面上，它将获取响应并显示消息结果.这是那部分:

Then on the page where the user enters the email, it grabs the response and displays the message result. Here is that part:

<div id="emailList">
    <form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get" >
    <label>signup for our email list</label>

    <input type="text" id="email" class="email" name="email" />
    <input type="submit" value="OK" id="emailSubmit" name="submit" />

    </form>
    <script type="text/javascript" src="path/to/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="path/to/js/mailing-list.js"></script>
</div><!-- end emailList -->
<div id="response">
    <? require_once('inc/store-address.php'); 
    if($_GET['submit'])
    {
        echo storeAddress(); 
    } ?>
</div><!-- end response-->
<script type="text/javascript">
    $(document).ready(function() {
        $("#emailSubmit").click(function() {
                    $('#response').fadeIn(1500).delay(3500).fadeOut(1500);
                    });
                });
</script>

我的问题很简单.我该如何实施某些措施，以使其成功完成并返回消息成功！请检查您的电子邮件以确认注册".它只会清除输入框的值，而不是预先填充?输入框ID为电子邮件".

My question is simple. How can I implement something so that if it was successful and it returns the message "Success! Check your email to confirm sign up." it will just clear the value of the input box instead of leaving it prefilled? the input box id is "email".

我认为我需要以某种方式使用.val("")，但是我看不到如何才能成功清除电子邮件.

I think I need to use .val("") somehow, but I don't see how I can have it clear the email only if it was successful.

推荐答案

一个简单的解决方案是:

One simple solution is:

PHP

if($api->listSubscribe($list_id, $_GET['email'], '') === true) {
    // It worked!   
    return '<span class="success">Success! Check your email to confirm sign up.</span>';
}else{
    // An error ocurred, return error message   
    return 'Error: ' . $api->errorMessage;
}

JS

$(document).ready(function() {
    if($('.success').length > 0) {
         $('#email').val('');
    }
});

完整的Ajax解决方案

edit: full ajax solution

$(document).ready(function() {
    var clearOnSuccess = function() {
        if ($('.success').length > 0) {
            $('#email').val('');
        }
    };
    clearOnSuccess();

    $('#signup').submit(function() {
        var data = $(this).serializeArray();
        data.push({'name': 'ajax', 'value': 1});
        var jqXHR = $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: data
        });

        jqXHR.done(function(data) {
            $('#response').html(data).fadeIn(1500).delay(3500).fadeOut(1500);
            clearOnSuccess();
        });
        return false;
    });
});

这篇关于成功后清除文本值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！