Solved

jQuery: Reset Form

Posted on 2012-03-18
5
315 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 250 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 250 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
Clear input text 15 27
Link not working 6 42
How do I add counter to html listbox using jquery 2 26
disable open new tab with right mouse click in <a> tag 3 19
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

733 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