在同一頁面上提交具有發送狀態的聯系表單

Question

我正在建立一個投資組合網站，並且在聯系表格中，我希望提交后成功/失敗。 在此過程中，我希望停留在同一頁面上。

我嘗試了與該主題相關的其他頁面中的其他解決方案，但我不明白為什么它們不適合我。 由於我是新手，因此我將不勝感激。 非常感謝！

我嘗試了以下主題下的解決方案： 在同一頁面上提交帶有成功/失敗警報的聯系表

我當前的HTML代碼是；

<form id="contact-form" method="post" action="contact.php" role="form" enctype="text/plain">
                        <div class="messages"></div>
                        <div class="controls">
                            <div class="form-group">
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Name *" required="required" data-error="name is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="E-mail *" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                            <input type="submit" name="submit" class="btn btn-send float-" value="Send message">
                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                        <div class="clearfix"></div>
                    </form>

提交表格后，我希望在同一頁面上看到確認或失敗報告。 它可以在頁面上的任何位置。 我只希望訪客知道我是否收到了他們的消息。

Answer 1

簡單示例jQuery版本：

$("#contact-form").submit(function() {
    var name = $("#form_name").val();
    var email = $("#form_email").val();
    // ...other fields
    // and validation if empty or e-mail is valid etc.
    // if validation fails just return false;

    if( !name ) {
        // here You can send message or activate help-block
        return false;
    }

    // if everything correct use for example ajax from jquery
    $.ajax({
        url: '/url/to/receiver',
        type: 'post',
        data: { name: name, .... },
        dataType: 'jsonp',
        success: function( r ) {
            if( r.success ) {
                // message and pass form validation 
                // clear fields, or hide contact form
            }

            if( r.error ) {
                // show error
            }
        }
    });

    return false;
});

請記住要從服務器JSON返回，例如{success：true}或{error：true，msg：“消息為什么失敗”}。

但是，當您將input type = submit更改為button，然后進行以下操作時，它將更好：

$("#contact-form .class-of-input-button").off().on('click', function() { /* rest of the code */ });