清除表單中的文本字段並重新提交

Question

我在html中生成一個表單（在php中生成），其中還包含一個文本字段。 要提交表單，我使用提交按鈕，結果顯示在頁面的左側。現在，我想添加另一個按鈕來清理文本字段 中的文本，然後重新提交表單（在文本字段中輸入value=""）。你有什麼想法如何做到這一點？ 簡單<input type="reset">不提交表格。

Answer 1

您的按鈕應該是這樣的：

<input type="button" onclick="DeleteText();" value="Delete text" /> 

和JavaScript代碼：

function DeleteText() { 
    document.getElementById('my_text_input_id').value = ''; 
    document.getElementById('my_form_id').submit(); 
} 

Answer 2

假設文本框獲得id="myText"和新的按鈕有id="clearBtn"，並在窗體有id=myForm。您可以執行以下操作：

$(#clearBtn).on("click",function() { 
    $('#myText').val(""); 
    document.forms["myForm"].submit(); 
}) 

這是未經測試的，但提出了一個想法。此外，這是一個jQuery的解決方案，我推薦在大多數情況下純JavaScript。

Answer 3

HTML5爲我們帶來了「佔位符」屬性，它允許純CSS實現此功能。

<input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> 

我已經成功地使用Shidhin的解決方案，在這裏找到：

http://codepen.io/shidhincr/pen/ICLBD