FFForm jquery在提交时不清除表单

时间:2014-04-08 13:04:15

标签: javascript jquery html forms

把头发拉出来。

我在我的网站上使用jquery.ffform.js并使用以下代码创建了一个表单:

<div id="contactus" style="display:none">

 <section id="getintouch" class="fadeIn animated">
    <div class="container" style="border-bottom: 0;">
        <h1>
            <span>SEND US YOUR QUERY NOW</span>
        </h1>
    </div>
    <div class="container">
        <form class="contact" action="#" method="post" id="form" onload="">
        <div class="row clearfix">
            <div class="lbl">
                <label for="name">
                    Name</label>
            </div>
            <div class="ctrl">
                <input type="text" id="name" name="name" data-required="true" data-validation="text"
                    data-msg="Invalid Name" placeholder="Ex: John Donga" 
                    onfocus="if(this.value === 'value') { this.value = ''; }" value=""/>
            </div>
        </div>
        <div class="row clearfix">
            <div class="lbl">
                <label for="email">
                    E-Mail</label>
            </div>
            <div class="ctrl">
                <input type="text" id="email" name="email" data-required="true" data-validation="email"
                    data-msg="Invalid E-Mail" placeholder="Ex: youremail@domain.com">
            </div>
        </div>
        <div class="row clearfix">
            <div class="lbl">
                <label for="email">
                    Phone</label>
            </div>
            <div class="ctrl">
                <input type="text" id="phone" name="phone" data-required="true" data-validation="custom"
                    data-msg="Invalid Phone #" placeholder="Ex: 111-258-444">
            </div>
        </div>
        <div class="row clearfix">
            <div class="lbl">
                <label for="subject">
                    Subject</label>
            </div>
            <div class="ctrl">
                <input type="text" name="subject" id="subject" placeholder="Ex: Quote for Project">
            </div>
        </div>
        <div class="row clearfix">
            <div class="lbl">
                <label for="message">
                    Message</label>
            </div>
            <div class="ctrl">
                <textarea id="message" name="message" rows="6" cols="10"></textarea>
            </div>
        </div>
        <div class="row  clearfix">
            <div class="span10 offset2">
                <input type="submit" name="submit" id="submit" class="submit" value="Send Message">
            </div>
        </div>
        </form>
        <div id="success">
            Your E-Mail has been sent successfully!</div>
        <div id="error">
            Unable to send e-mail at the moment, please try later.</div>
        <div id="validation">
        </div>


    </div>

</section>

我想要它做的是允许用户输入他或她的联系方式并提交查询。这就像一个魅力,它调用email.php脚本并发送电子邮件到正确的邮件地址。最后,当它显示“邮件已成功发送”时,我单击“确定”按钮,它会返回到表单而不会将其清除。我已经检查了ffform代码,并没有提到在进入后清除表单。官方网站egrappler提供了可下载的演示,但即使这样也无法清除表格。

有人有任何想法吗?

顺便说一下,页面开头的javascript如下:

<script type="text/javascript">
    $(document).ready(function () {
        $.getScript('js/jquery.ffform.js', function(){
        $('#form').ffform({ animation: 'fade', 
                            submitButton: '#submit', 
                            validationIndicator: '#validation', 
                            errorIndicator: '#error', 
                            successIndicator: '#success', 

                            'fields': [{ 'id': 'name', required: true, requiredMsg: 'Name is required', type: 'alpha', validate: true, msg: 'Invalid Name' },
                                       { 'id': 'email', required: true, requiredMsg: 'E-Mail is required', type: 'email', validate: true, msg: 'Invalid E-Mail Address' }, 
                                       { 'id': 'phone', required: false, type: 'custom', validate: false, msg: 'Invalid Phone #' }, 
                                       { 'id': 'message', required: true, requiredMsg: 'Cat got your tongue?', type: 'text', validate: false, msg: ''}] });
    });
});

</script>

希望有人可以提供帮助。

非常感谢!

戴夫

0 个答案:

没有答案