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

时间:2013-06-14 08:02:17

标签: php ajax

我正在使用这个完全相同的MailChimp PHP / AJAX订阅处理表单 - clear text value after success? - 但我绝对难以理解如何在成功后实际获取表单字段。

显然Felix在这里推荐的内容 - clear text value after success? - 代码仅在文档加载时存在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
    }

2 个答案:

答案 0 :(得分:1)

有两种解决方案。

创建JS函数的不那么优雅,手动重置每个表单字段值。

更好的方法是使用ID:

在表单中存储隐藏的重置输入
<input type="reset" id="blagh" style="display:none"/>

只需使用jQuery“点击”它:

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

答案 1 :(得分:1)

jquery form pluginresetForm()。只是说'。