You must Sign In to post a response.
  • Category: HTML

    Search box with submit button has to be displayed when clicking on check box

    Hi ,
    i have a search-box with submit button it will display the search results but i want i to add checkbox to that text box so that when we click on check box the search -boxx with submit button has to be displayed can any one give me some sample code for that one
  • #754133
    Hi,

    Based on checkbox selection if you want to show your button control then you can do it in 2 ways.

    1) Client side scripts
    2) Server side coding

    my suggestion is better to do it in client side by using java scripts or jquery.

    This is the sample for the same, refer it and implement your task as per your requirement.


    $("#<%=gridCLM.ClientID%> input[id*='chkAll']:checkbox").click(function () {
    $("#<%=gridCLM.ClientID%> input[id*='chkKIFID']:checkbox").attr('checked', $(this).is(':checked'));

    var checkedCheckboxes = $("#<%=gridCLM.ClientID%> input[id*='chkKIFID']:checkbox:checked").size();
    if (checkedCheckboxes > 0) {
    $("#<%=btnApproved.ClientID %>").removeAttr('disabled');
    $("#spnReferBack").removeAttr('disabled');
    }
    else {
    $("#<%=btnApproved.ClientID %>").attr('disabled', 'disabled');
    $("#spnReferBack").attr('disabled', 'disabled');
    }
    });


    In above code checkbox is inside a gridview.

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #754141
    Hi,
    As naveen said you can do it by client side code(Jquery,Javascript) or server side script(C#)

    HTML CODE

    <input type="checkbox" id="chSearch" onclick="SetSerachBox()"/>
    <div id="DivSearch" style="display:none">
    <input type="text" id="txtSearch" /><input type="submit" id="btnSubmit" value="Seach"/>
    </div>


    2) Javascript Code

    <script>
    function SetSerachBox() {

    if (document.getElementById("chSearch").checked == true) {

    //jQuery code : $("#DivSearch").show();
    document.getElementById("DivSearch").style.display = "block";

    } else {

    //jQuery Code $("#DivSearch").hide();
    document.getElementById("DivSearch").style.display = "none";

    }
    }
    </script>


    And from code behind you can set visibiliy of a textbox and button from checkbox checked event of a code behind.

    I hope you got my point,if still you have an issue than i'll get back to you.

    Regards,
    Nirav Prabtani (Senior Web Developer)
    Email : niravjprabtani@gmail.com
    blog : niravprabtani.blogspot.in

  • #754148
    Thanks for the sample code its working.
    can i display the same code for displaying multiple checkboxs when i click on 1st check box it will display the texbox with submit button i am unable to get for 2nd check box it is displaying the 1st text box only can anyone explain about it

  • #754170
    Hi,

    It seems you found your solution on above answers.

    You can also use panels in ASP.NET to make grouped content visible or hidden at event.

    <asp:panel ID="panelSearch" runat="server">
    <asp:TextBox ID=...... </asp:TextBox>
    <asp:Button ID=........</asp:Button>

    </asp:panel>

    And on checking of CheckBox, you can fire event from backend.


    if(ckhSearchBox.Visible== True)
    panelSearch.Visible=true;
    else
    panelSearch.Visible=false;



    All the Best.

    -------------
    Glad to be,
    John Bhatt
    Editor - DNS Forums
    https://www.pyarb.com


  • Sign In to post your comments