如何在提交/成功后清除表单字段


How do you clear form field after submit/success?

我正在使用这个完全相同的MailChimp PHP/AJAX订阅处理表单-成功后明确文本值?-但我绝对难倒了如何真正得到表单字段后清除成功。

显然是Felix在这里推荐的-成功后明确文本值?-只有在文档加载时span元素存在时,代码才能工作,如果使用Ajax,则必须在完成后调用if语句。

有人能帮帮我吗?如何在用户成功完成表单字段后清除该字段?

代码如下:

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

表单代码:

    <form action="<?=$_SERVER['PHP_SELF']; ?>" id="signup" class="subscribe" method="get">
        <fieldset>
            <input type="text" id="email" name="email" placeholder="your email address" />
            <input type="submit" name="submit" value="Send it" />
        </fieldset>
    </form>
    <p id="response"><? require_once('inc/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?></p>
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/mailing-list.js"></script>

邮件列表javascript代码:

    // Load Events Listeners
    Event.observe(window, 'load', init, false);
    function init(){
        Event.observe('signup','submit',storeAddress);
    }
    // AJAX call sending sign up info to store-address.php
    function storeAddress(event) {
        // Update user interface
        $('response').innerHTML = 'Getting email address...';
        // Prepare query string and send AJAX request
        var pars = 'ajax=true&email=' + escape($F('email'));
        var myAjax = new Ajax.Updater('response', 'inc/store-address.php', {method: 'get', parameters: pars});
        Event.stop(event); // Stop form from submitting when JS is enabled
    }

有两种解决方法。

不太优雅的方法是创建一个JS函数,手动重置每个表单字段值。

更好的方法是在表单中存储一个隐藏的重置输入,ID:

<input type="reset" id="blagh" style="display:none"/>

然后使用jQuery 'click'它:

$('#blagh').click();

jquery表单插件有resetForm()。只是说说而已。