如何清除表單？

比如我有一個表格是這樣的：如何清除表單？

<form method='post' action='someaction.php' name='myform'> 

<input type='text' name='text1'> 
<input type='text' name='text2'> 

<input type='checkbox' name="check1">Check Me 

<textarea rows="2" cols="20" name='textarea1'></textarea> 

<select name='select1'> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<input type='reset' value='Reset' name='reset'> 
<input type='submit' value='Submit' name='submit'> 

</form>

當我按下Reset它清空所有字段。但是如果我使用URL參數填充一些字段，然後按Reset，它只會清空表單重新加載後輸入的字段。

如何清空所有字段，無論某些字段是否在表單加載時已填充。

來源

2011-05-17 Student

問問自己是否真的需要重置按鈕。他們通常被認爲是無用的。 http://www.useit.com/alertbox/20000416.html http://www.stillnetstudios.com/no-more-reset-buttons-please/ – 2011-05-17 09:12:01

查看公認的答案[here]（http： //stackoverflow.com/questions/680241/blank-out-a-form-with-jquery）使用jQuery解決方案 – 2011-05-17 09:38:23

@Rob Stevenson-Leggett：我讀過這篇文章，並且現在沒有使用重置按鈕是正確的。填寫報名表格可能不適用。但是，當在表單下方顯示錶單更改事件的搜索表單上工作時，我認爲重置/清除按鈕很有用。 – Student 2011-05-17 09:55:09

正如其他人指出的那樣，我認爲你應該重新考慮需要的空白的形式。但是，如果你真的需要這個功能，這是做這件事：

普通的JavaScript：

function resetForm(form) { 
    // clearing inputs 
    var inputs = form.getElementsByTagName('input'); 
    for (var i = 0; i<inputs.length; i++) { 
     switch (inputs[i].type) { 
      // case 'hidden': 
      case 'text': 
       inputs[i].value = ''; 
       break; 
      case 'radio': 
      case 'checkbox': 
       inputs[i].checked = false; 
     } 
    } 

    // clearing selects 
    var selects = form.getElementsByTagName('select'); 
    for (var i = 0; i<selects.length; i++) 
     selects[i].selectedIndex = 0; 

    // clearing textarea 
    var text= form.getElementsByTagName('textarea'); 
    for (var i = 0; i<text.length; i++) 
     text[i].innerHTML= ''; 

    return false; 
}

注意，我註釋掉中，我明確hidden輸入的情況下。大多數時候，這是沒有必要的。爲了達到此目的，您需要從按鈕（或其他方式）的onclick處理程序中調用該函數，例如，像這樣：

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

您可以在jsFiddle這裏測試一切。

如果您在項目中使用jQuery，你可以用更少的代碼（也沒有必要改變HTML）做到這一點：

jQuery(function($) { // onDomReady 

    // reset handler that clears the form 
    $('form[name="myform"] input:reset').click(function() { 
     $('form[name="myform"]') 
      .find(':radio, :checkbox').removeAttr('checked').end() 
      .find('textarea, :text, select').val('') 

     return false; 
    }); 

});

另外請注意，我不清除值隱藏的輸入，複選框和單選按鈕。

玩這個here。

來源

2011-05-17 10:24:15

經過測試，它不清除textareas。我們知道發生了什麼問題嗎？ – Abhishek 2016-02-22 06:46:40

@Abhishek它的工作原理，檢查小提琴：http://jsfiddle.net/fmTDY/爲什麼它不適用於你的具體情況，我不知道。 – 2016-02-25 17:04:57

這確實對我有用，除了我不得不用「document.getElementById（'myForm'）。getElementsById」替換「form.getElementsById」。不是世界上最漂亮的東西，我不知道爲什麼。。。但它的工作非常完美。 – LiquidDrummer 2016-03-11 20:44:03

你將不得不通過JavaScript清除它們（或清除它的服務器端）。

reset按鈕只會將表單元素重置爲初始值 - 如果這是一個特定的值，那麼它將被重置爲。。

來源

2011-05-17 09:08:22 Oded

這意味着我必須逐個清除每個字段。有沒有最簡單的方法來清除所有字段與一個JS函數/聲明，我可以使用每種形式？我有超過50個領域的形式。 – Student 2011-05-17 09:28:16

@Student - 您可以獲取所有輸入元素並清除循環中的值。我建議投入一些時間學習[jQuery]（http://jquery.com）。 – Oded 2011-05-17 09:30:34

循環遍歷'theForm.elements'，檢查它是否是字段集，選擇，無線電組，複選框或其他內容，然後相應地採取行動。 – Quentin 2011-05-17 09:30:36

-2

使用JavaScript給 '的形式myForm的' 的ID：

的document.getElementById（ 'myForm的'）復位（）;

來源

2011-05-17 09:11:58 Raoul

這不會解決問題。如果表單加載了預先填充的值，則「重置」將簡單地將表單重置爲這些值。 – Oded 2011-05-17 09:29:34

不，那仍然會重置它，不清楚它。 – Quentin 2011-05-17 09:29:38

如果你使用jQuery，代碼簡單得多：

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

您還可以刪除：從。不是選擇隱藏，如果你想清除隱藏字段爲好。

來源

2011-07-22 06:19:37

在jQuery的簡單，你可以使用，

$("#yourFormId").trigger('reset');

來源

2014-10-20 06:27:26 tutesFree

清除表單最簡單的方法是使用HTML標籤

<input type="reset" value="Reset">

例子：

<form> 
    <table> 
    <tr> 
     <td>Name</td> 
     <td><input type="text" name="name"></td> 
    </tr> 
    <tr> 
     <td>Reset</td> 
     <td><input type="reset" value="Reset"></td> 
    </tr> 
    </table> 
</form>

來源

2015-07-31 06:52:14 ociugi

重置行爲的唯一問題是，如果表單已預填充，則會將該值重置爲已設置的初始值。所以如果你在錯誤或類似的東西上自動填寫某些字段，那麼這不會像你希望的那樣行爲不當。 – EdgeCaseBerg 2017-05-18 17:47:29

我已經總結了一些使用jQuery的建議，給出了更完整的問題解決方案：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Demo Forms</title> 
     <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    </head> 
    <body> 

     <form method='post' action='someaction.php' name='myform'> 

      <input type='text' name='text1'> 
      <input type='text' name='text2' value='preset value'> 

      <input type='checkbox' name="check1">Check Me 

      <textarea rows="2" cols="20" name='textarea1'></textarea> 

      <select name='select1'> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
      </select> 

      <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);"> 
      <input type='submit' value='Submit' name='submit'> 

      <script> 
       function clearForm(form) { 
        var $f = $(form); 
        var $f = $f.find(':input').not(':button, :submit, :reset, :hidden'); 
        $f.val('').attr('value','').removeAttr('checked').removeAttr('selected'); 
       } 
      </script> 
     </form> 
    </body> 
</html>

請注意，我在頭部添加了jquery lib，並在Reset按鈕中添加了一個onclick處理函數。最後，我在這裏添加了基於來自其他答案的反饋的JavaScript代碼。

我還在一個文本字段中添加了一個預設值。 val('')函數不會清除這樣的字段，這就是爲什麼我還將attr('value','')添加到最後一個腳本行到清除此類默認值以及。

來源

2016-02-03 20:09:19

-1

我剛剛遇到了這個問題，並且使用了<a>來幫助通過重新加載頁面來清除表單。將一個<a>元素設置爲一個按鈕很容易。

例如

<a href="?" class="btn btn-default">Clear</a>

通過使用？對於href屬性，<a>將從服務器重新加載頁面而不提交它。

我更喜歡不依賴於JavaScript的解決方案，因此希望這對某些人有用。

來源

2016-11-26 23:55:45

你可以做類似這樣的東西在JS和你的按鈕內onclick調用它：

function submit() { 
    $('#fieldIdOne').val(''); 
    $('#fieldIdTwo').val(''); 
}

然後在你的HTML文件：

<button id="submit" onclick="submit(); return false">SIGN UP</button>

如果你碰巧使用此解決方案使用Firebase時，除非您在通話後立即添加return false，否則它實際上不會向數據庫發送任何內容。

來源

2017-01-28 17:12:28 mur7ay

如何清除表單？

回答

相關問題