Reset ascx User control using Jquery

Question

5.00/5 (1 vote)

See more:

I am working on a asp.net web application where we have search page. On this search page we have around 37 search filter control. All Input controls are different types like some are text boxes, Dropdownlist (which filled from Database on page load), Radio buttons and check box list.
On right side of page we are showing results of that search with the help of Jquery and Ajax. Now I create a .ascx User Control for left side Search filter and put all the Search filter controls in that user control. This page works fine for me the only issue is I have on Reset Search button on that page (i.e. Inside my ascx control) and I have to clear all the search filter controls value on that buttons click event( remember I don't want to reload my page so i use Jquery).
On solution for is, i have to write code for all 37 controls to reset its value to default.
Is there any trick or idea to reset or reload my user control from Jquery without refreshing page.

Note : Remember I can't put Update panel on aspx page for some reason.

Please give me any idea.

Posted 7-Aug-13 22:58pm

NileshKRathod

Add a Solution

Comments

Dholakiya Ankit 8-Aug-13 8:11am

http://scottonwriting.net/sowblog/archive/2010/12/23/resetting-form-field-values-in-an-asp-net-webform.aspx

here are the two approches which will give you more idea

3 solutions

Solution 1

Good question. I tried this some time back but left in middle and went ahead with another approach.

Btw, this link might help:

http://stackoverflow.com/questions/8386766/refresh-user-control-with-jquery[^]

Posted 7-Aug-13 23:03pm

Manas Bhardwaj

Comments

NileshKRathod 14-Aug-13 7:59am

Thanks but this is not a pure Jquery based solution.

Solution 2

you can try like

to clear all textBoxes in your page

JavaScript

$('input[type=text]).each(function(){
    $(this).val('');
});

to clear all textBoxes in your given div or some other container

JavaScript

$('#divContainer').find('input[type=text]).each(function(){
    $(this).val('');
});

And so on..

you can find how to clear other controls.

Hope this helps.

Posted 7-Aug-13 23:44pm

sumit_kapadia

Comments

NileshKRathod 14-Aug-13 8:01am

Sorry but this is the last way to achieve functionality. I want a short method or plugin in Jquery.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

NileshKRathod · Accepted Answer · 2013-08-14T02:09:00

Thanks to all for your suggestions. I found a short and simple way on google which is more easy and convenient for this.

You can use input type selector for minimal code ie. $(':input') will select all text box field. If you want to clear all controls on current form I have written a small plugin you can use it:

JavaScript

$.fn.clearForm = function () {
    return this.each(function () {
        var type = this.type, tag = this.tagName.toLowerCase();
        if (tag == 'form' || tag == 'div') 
            return $(':input', this).clearForm();
        if (type == 'text' || type == 'password' || tag == 'textarea')
            this.value = '';
        else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
        else if (tag == 'select')
            this.selectedIndex = -1;
    });
};
Usage:
 
$('#divId').clearForm();
$('.div_class').clearForm();
$('form').clearForm();

Source : Click Here

Reset ascx User control using Jquery

3 solutions

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us