如何在javascript或jquery中清除表单字段(输入,文本区域,选择和广播)

Question

我有简单的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脚本函数或jquery代码来清除所有表单字段.我不能使用重置按钮,因为在表单onsubmit事件我调用一个名为CommonFunction()的函数,它使用jQuery.ajax发布所有表单字段.问题是当我提交表单数据得到成功发布但表单字段没有自动清除,因为我使用jQuery.ajax提交表单

提交数据后,我希望表单清晰.

需要帮忙

Answer 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/