?
Solved

jQuery: Reset Form

Posted on 2012-03-18
5
Medium Priority
?
328 Views
Last Modified: 2012-03-19
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
Comment
Question by:hankknight
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37735877
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
 
LVL 16

Author Comment

by:hankknight
ID: 37735932
$('#myform').reset(); gives me an error!  Is there any way to select the form to be reset using jQuery?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 37735992
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
 
LVL 20

Accepted Solution

by:
Proculopsis earned 1000 total points
ID: 37736454
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37736467
There is an even more simpler solution.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question