驗證並提交表單後，重置表格+更改一些css樣式

我有一個簡單的html聯繫表格與驗證檢查。驗證並提交表單後，重置表格+更改一些css樣式

我想在成功提交表單後執行一些命令。但是，我已經設定了這整個事情的方式......我無法讓它工作。

HTML聯繫表：

<form id="mycontact_form" name="form_name" method="post" onsubmit="return validateForm();" action="https://domain.tld/cgi-bin/sendformmail.pl">

validateForm.js：

function validateForm() { 
    //validating input fields 
    if (!valid){ 
    return false; 
    } else { 
    if(condition1 == true) 
    { 
     document.form_name.submit(); return; 
    } 
    else { 
     // doing stuff to form content 
     document.form_name.submit(); return; 
    } 
    } 
}

當提交按鈕被按下，表單驗證，將sendformmail.pl提交perl腳本返回一個HTML Status 204，這樣用戶就停留在這個頁面上，並且不會重定向（這是我得到這部分工作的唯一方法）。

現在我想一個成功提交後，擁有的是：

清除/復位形式和

一些小的UI的東西：2元+佔位的變化背景/內文2輸入領域爲謝謝您消息。

但是，例如，如果我把document.form_name.reset()document.form_name.submit()後，它太快。它在提交之前重置表單。我還嘗試在onsubmit的validateForm()之後調用另一個（獨立）函數，但這似乎是錯誤的（至少，它不起作用）。

所以我想我需要把這2件事（重置+ CSS更改）放在一個單獨的函數中，並在成功提交表單後調用它。但是，如何，何時何地？

我對學習一個簡單而有效的解決方案非常感興趣。（但jQuery也可用）

謝謝你的幫助。

來源

2015-08-25 user2690888

您的表單是sendformmail.pl文件的一部分嗎？ – Alex

表單位於html網站上。 perl腳本用於評估表單數據並將其作爲電子郵件發送。我找到了腳本[here]（http://www.scriptarchive.com/formmail.html）。 – user2690888

如果您的電子郵件腳本與您的聯繫表單位於同一個域中，請嘗試通過ajax提交。這裏有一個簡單的jQuery例子，這將是您的onsubmit處理：

if (valid) { 
    $.ajax({ 
     url: "/cgi-bin/sendformmail.pl", 
     method: "POST", 
     data: $("#mycontact_form").serialize() 
    }) 
    .done(function() { // this happens after the form submit 
     $("#mycontact_form")[0].reset(); 
    }); 
} 

return false; // don't submit the form again non-ajax!

否則，如果在不同的領域，嘗試表單的目標設置到您的網頁上隱藏的iframe的ID。由於這是跨域的，因此您無法通過same origin policy知道表單提交的結果。你可以簡單地希望最好和後x秒重置表單：

if (valid) { 
    $("#mycontact_form").submit(); 

    // clear form 3 seconds after submit 
    window.setTimeout(function() { 
     $("#mycontact_form")[0].reset(); 
    }, 3000); 
}

這兩種方法都保持在同一頁面上，用戶無需刷新。

來源

2015-08-25 23:57:50

非常感謝您的幫助。我試過了你的第一個想法。它發送電子郵件，然後清除表單。 **但**有一個問題，將迷惑人：該表格有3個字段：名稱，電子郵件和消息（textarea）。如果字段由於爲空而無法驗證，則佔位符將更改爲（「請輸入您的[字段名稱]」，並且它會得到錯誤類別（紅色字體顏色等）。現在，在發送並清除表單代碼，字段_name_＆_email_顯示失敗的佔位符_但沒有錯誤class_。也許是因爲返回false返回了嗎？任何想法如何解決這個問題？ – user2690888

如果return語句導致嘗試從onsubmit處理程序中分解驗證函數的問題。 –

我結束了使用beforeSend與ajax而不是done。而不是重置表單我選擇清除輸入字段/ textarea的值（只有3）。我還在beforeSend中包含了輸入字段/ textarea的首選「提交後」樣式，以避免偶然。無論如何，謝謝你幫助我指點我在ajax方向&。

$.ajax({ 
    url: "/cgi-bin/sendformmail.pl", 
    method: "POST", 
    data: $("#mycontact_form").serialize() 
     beforeSend : function(){ 
        // clear value of input fields/textarea & disable them 
        // use placeholders for "Thank you." etc. 
         } 
    });

來源

2015-08-30 16:46:22 user2690888

驗證並提交表單後，重置表格+更改一些css樣式

回答

相關問題