[RESOLVED]Is there a simple way in jquery to set all textbox values to empty and dropdownlists to their defaults?

Is there a simple way to set all controls to their defaults with JQuery?

If all the textboxes in that form has a common css class then, you can find them easily as

$('.classNameHere').val("");

If they are all inside a div element or so,

$("#divID").find("input:text").val('');

For the dropdowns, you need to have some source to set the default values. You can refer this article:
http://snipplr.com/view/67752/

Snippet from the above article

$(function(){
    $('select[value]').each(function(){
        $(this).val(this.getAttribute("value"));
    });
});

//The Markup Looks Like This
<select name="category" id="category" value="PHP">  //NOTICE value attribute!!!
      <option value="ARTICLE">ARTICLE</option>
      <option value="PHP">PHP</option>  //THIS IS THE DEFAULT OPTION
      <option value="MySql">MYSQL</option>
      <option value="jQuery">jQuery</option>
      <option value="CSS(3)">CSS(3)</option>
</select>

To target all textboxes in a page you can use
:text
selector like given below

You can try with the below code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        // A $( document ).ready() block.
        $(document).ready(function () {

            $("#Button1").click(function () {
                //Set Default value to dropdownlist
                $('select').each(function () {
                    $(this).find('option:eq(0)').prop("selected", "selected");
                });
                //Clear the values from textboxes
                $('input:text').each(function () {
                    $(this).val("");
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="Textbox1" runat="server" Columns="2"></asp:TextBox>
    <asp:TextBox ID="Textbox2" runat="server" Columns="2"></asp:TextBox>
    <asp:TextBox ID="Textbox3" runat="server" Columns="2"></asp:TextBox>
    <asp:DropDownList ID="drop1" runat="server">
        <asp:ListItem>Please select a value</asp:ListItem>
        <asp:ListItem>Item 1</asp:ListItem>
        <asp:ListItem>Item 2</asp:ListItem>
        <asp:ListItem>Item 3</asp:ListItem>
        <asp:ListItem>Item 4</asp:ListItem>
        <asp:ListItem>Item 5</asp:ListItem>
        <asp:ListItem>Item 6</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>Please select a value</asp:ListItem>
        <asp:ListItem>Item 1</asp:ListItem>
        <asp:ListItem>Item 2</asp:ListItem>
        <asp:ListItem>Item 3</asp:ListItem>
        <asp:ListItem>Item 4</asp:ListItem>
        <asp:ListItem>Item 5</asp:ListItem>
        <asp:ListItem>Item 6</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem>Please select a value</asp:ListItem>
        <asp:ListItem>Item 1</asp:ListItem>
        <asp:ListItem>Item 2</asp:ListItem>
        <asp:ListItem>Item 3</asp:ListItem>
        <asp:ListItem>Item 4</asp:ListItem>
        <asp:ListItem>Item 5</asp:ListItem>
        <asp:ListItem>Item 6</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Leave a Reply