• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

jQuery: Reset Form

Using jQuery, how can I reset a form?  I can do this using traditional JavaScript but I do not know how to do it with jQuery.  Please test the example below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('#abc').val('');
 $('#xyz').val('555');

 $('p a#reset1').click(function() {
  document.getElementById('myform').reset();
 });
 $('p a#reset2').click(function() {
  $('#myform').reset();
 });

});

</script>
</head>
<body>

<form action="/" method="get" id="myform">
<input name="abc" type="text" value="Hello" id="abc" />
<input name="xyz" type="text" value="" id="xyz" />
</form>

<p><a href="#" id="reset1">Reset Form using JavaScript</a></p>
<p><a href="#" id="reset2">Reset Form using jQuery</a></p>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
  • 2
2 Solutions
 
leakim971PluritechnicianCommented:
there's no way with jQuery.

check if you like the following :
 $('p a#reset2').click(function() {
  $('#myform').reset();
 });

Open in new window


test page : http://jsfiddle.net/wLhkY/2/
0
 
hankknightAuthor Commented:
$('#myform').reset(); gives me an error!  Is there any way to select the form to be reset using jQuery?
0
 
leakim971PluritechnicianCommented:
sorry check the test page, I forgot to modify the code snippet :
 $('p a#reset2').click(function() {
  $('#myform')[0].reset();
 });

Open in new window

0
 
ProculopsisCommented:
I disagree that there is no way with jQuery.

Take a look at this jsfiddle, as a simple example of what needs to be done.

The main bit of code is:

var reset = [];

$("#myform>input").each(function(index, field) {
    reset.push($(field).clone());
});

$("#reset").click(function() {
    $("#myform>input").each(function(index, field) {
        $(field).replaceWith($(reset[index]).clone());
    });
});

Open in new window

0
 
ProculopsisCommented:
There is an even more simpler solution.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now