Clear the Control using Jquery

Clear the Control using Jquery

   <div>
        <table>
        <tr>
            <td colspan="2" >
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Customer Details</label>
            </td>
        </tr>
            <tr>
                <td>
                    <label for="txtFirstName">First Name</label>
                </td>
                <td>
                    <input id="txtFirstName" type="text" name="txtFirstName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtLastName">Last Name</label>
                </td>
                <td>
                    <input id="txtLastName" type="text" name="txtLastName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtoccupation">Occupation:</label>
                </td>
                <td>
                    <input id="txtoccupation" type="text" name="txtoccupation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtlocation">Location:</label>
                </td>
                <td>
                    <input id="txtlocation" type="text" name="txtlocation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="ddlCountry">Country:</label>
                </td>
                <td>
                    <select id="ddlCountry" name="ddlCountry">
                        <option value="0" selected>Select</option>
                        <option value="India">India</option>
                        <option value="USA">USA</option>
                        <option value="UK">UK</option>
                        <option value="SA">SA</option>
                    </select>
                </td>

            </tr>


            <tr>
                <td>
                    <label for="txtComments">Comments:</label>
                </td>
                <td>
                    <textarea id="txtComments" name="txtComments" cols="40" rows="5"></textarea>
                </td>

            </tr>

            <tr>
                <td>
                    <input id="btnsumbit" type="submit" value="Add" />
                </td>
                <td>
                   <input id="btnCancel" type="submit" value="Cancel" onclick="" />
                </td>
            </tr>

        </table>
    </div>




Clear the Control using Jquery


function ClearFields() {
    $('#txtFirstName').val('');
    $('#txtLastName').val('');
    $('#txtoccupation').val('');
    $('#txtlocation').val('');
    $('#ddlCountry').prop('selectedIndex', 0);  
    $('#txtComments').val('');
}