如何在 javascript 或 jquery 中清除表单字段（输入、文本区域、选择和单选）答案

【问题标题】：How to clear form fields (input, textarea, select and radio) in javascript or jquery如何在 javascript 或 jquery 中清除表单字段（输入、文本区域、选择和单选）
【发布时间】：2014-05-01 05:19:24
【问题描述】：

我有简单的html表单

 <form id="formreg" name="formreg" method="post"  enctype="multipart/form-data" style="margin:0; padding:0; float:left;" onsubmit="return CommonFunction(this);">   



  <table border="1" cellpadding="2" cellspacing="1" style="border-collapse:collapse; font:12px Verdana, Arial, Helvetica, sans-serif;">

  <tr>
  <td align="left"> First Name : </td>
  <td> <input type="text" name="firstname" value=""/></td>
  </tr>



  <tr>
  <td align="left"> Last Name : </td>
  <td> <input type="text" name="lname" value=""/></td>
  </tr>

  <tr>
  <td align="left"> Email : </td>
  <td> <input type="text" name="useremail" value=""/></td>
  </tr>


  <tr>
  <td align="left"> Contact No : </td>
  <td> <input type="text" name="usercontact" value=""/></td>
  </tr>

  <tr>
  <td align="left"> Designation : </td>
  <td> <input type="text" name="designation" value="" size="20" /></td>
  </tr>

  <tr>
  <td align="left"> Gender : </td>
  <td> 
  <input type="radio" name="gender" value="Male" /> Male &nbsp;&nbsp;<input type="radio" name="gender" value="Female" /> Female
  </td>
  </tr>

  <tr>
  <td align="left"> Country : </td>
  <td> 

  <select name="country">

     <option value="India">India</option>
     <option value="USA">USA</option>
     <option value="UK">UK</option>
  </select>
  </td>
  </tr>



  <tr>
  <td align="left"> Message/Comment: </td>
  <td> <textarea name="message" cols="20" rows="5"></textarea></td>
  </tr>

  <tr>
  <td align="left" colspan="2"> <input type="submit" name="Sub" value="Insert" /> &nbsp; <input type="reset"  value="Reset" /> </td>
  </tr>

  </table>
  </form>

带有表单域（输入、文本区域、选择框和单选按钮）。

我需要 java-script 函数或 jquery 代码来清除所有表单字段。我不能使用重置按钮，因为在表单 onsubmit 事件中我正在调用一个名为 CommonFunction() 的函数，该函数使用 jQuery.ajax 发布所有表单字段。问题是当我提交表单数据时成功发布但表单字段不会自动清除，因为我使用 jQuery.ajax 提交表单

提交数据后，我希望表格清晰。

需要帮助

【问题讨论】：

创建一个函数，清除字段并在 ajax 成功事件中调用它。

标签： jquery ajax forms

【解决方案1】：

这是一个可以做到这一点的小提琴。您可以对此进行扩展。但也许使用 jQuery.forms 会更好。

小提琴重置如下值。在您的情况下，您希望在 AJAX 帖子的回调成功中执行此操作。

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
     alert( "Data Saved: " + msg );
     // Clear the form
     $('input[type=text], textarea').val('');
     $('select').find('option').prop("selected", false);
     $('input[type=radio]').prop("checked", false);
});

最后你可以创建一个辅助函数来存储该代码。然后你也可以为其他形式调用它，你的代码会更干净。

http://jsfiddle.net/TZ6GR/1/

http://malsup.com/jquery/form/

【讨论】：

你应该避免使用.removeAttr(...)，而是使用.prop(..., false)。 .prop() 是专门在 jQuery 中设计的，并考虑了布尔属性（如 checked、disabled、selected、readonly 等）
不影响性能，但是正确使用jQuery方法的问题。众所周知，.attr() 在某些浏览器中处理布尔属性时会出现问题。 p/s：另外，不要使用.removeProp()。
@Terry 感谢您的提醒！
感谢#sidneydobber 的回答，但在表单onsubmit 事件中，我使用由$.ajax 组成的javascript 函数来发布表单而不重新加载页面，所以我无法使用上面的代码...我需要可以合并到我的 javascript 函数中的代码...这样，当我使用 $.ajax 方法发布我的表单时，它应该自动重置表单字段..谢谢。
您将在成功回调函数中使用它。 click() 仅用于说明目的。我会说得更清楚。

【解决方案2】：

试试这个

 $(function(){
   $("#formreg").find("input,textarea").val('');
 });

【讨论】：

【解决方案3】：

提交答案后，您可以运行这行代码：

$("form#formreg").find("input[type=text], textarea").val("");

这将清除表单中的所有文本字段和文本输入。

【讨论】：

但是如何将选择框带到原始位置并从选中的单选按钮中清除...
感谢您的回答