Solved

jQuery: Reset Form

Posted on 2012-03-18
5
324 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

696 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