Basic Search and Advanced Search validation

Hi,

Hi,

Please find the attached files.

I have search screen. On first initial load, "Basic Search" page will be displayed. On click of Basic Search linkthen we display field4, field5,field6,field7 and Advanced Search will be displayed in place of Basic Search. Again on click of Advanced Search, field4, field5,field6,field7 should not be displayed (only first 4 fields should be displayed).

I want to do this in client side (javascript)
Pls find the below code but its not working. how to change name of button to Advanced Search in javascript?


  function BasicSearchClick(button, args)
{
    document.getElementById("field4").style.display = "";
    document.getElementById("field5").style.display = "";
    document.getElementById("field6").style.display = "";
    document.getElementById("field7").style.display = "";

}

<telerik:RadButton id="btnBasicSearch" runat="server" AutoPostBack="false" ButtonType="ToggleButton" ToggleType="None" Text="Basic Search" CausesValidation="false" Font-Underline="true" ForeColor="Blue" OnClientClicked = "BasicSearchClick" />

Any idea on how to do this?

Thanks,
basic-search.jpg
advanced-search.jpg
swathi111Asked:
Who is Participating?
 
swathi111Connect With a Mentor Author Commented:
Hi,

Thanks alot ingriT and sonawanekiran.

I am working with .net 4.0.

After changing ClientIdMode property of a button to "Static" it is working fine.


Thanks,
0
 
Kiran SonawaneProject LeadCommented:
Try like this

document.getElementById("<%=field4.ClientID%>").style.display = "";

instead of

document.getElementById("field4").style.display = "";
0
 
swathi111Author Commented:
actually with the above code controls or hiding and showing correctly but how to change the name of the button to Advanced Search in client side.
I tried as below but nothing is working.


document.getElementById("ctl00_PlaceHolderMain_btnBasicSearch").value = "Advanced Search";

document.getElementById("<%=btnBasicSearch.ClientID%>").Text = "Advanced Search"

what do u suggest? changing the same link button name to "Advanced Search" or placing another link button for Advanced Search?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Roopesh ReddyIT AnalystCommented:
Hi,

Instead of doing it for every control, you can group the controls which comes under Basic Search and advanced Search and you can enable/ disable them accordingly!

I just created a sample app for you -

<div id="basicSearch">
        <label>Name</label><asp:TextBox runat="server" ID="txtName" />
        <label>age</label><asp:TextBox runat="server" ID="txtAge" />
    </div>

    <div id="advSearch">
        <label>Branch</label><asp:TextBox runat="server" ID="txtBranch" />
        <label>Sal</label><asp:TextBox runat="server" ID="txtSal" />
    </div>

    <a href="javascript:void(0);" onclick="ShowBasicSearch();" >Basic Search</a>
    <a href="javascript:void(0);" onclick="ShowAdvSearch();" >Advanced Search</a>

    <script type="text/javascript">
        //Initally show Basic Search and hide Advanced Search
        ShowBasicSearch();

        function ShowBasicSearch() {
            document.getElementById("basicSearch").style.display = "block";
            document.getElementById("advSearch").style.display = "none";
        }

        function ShowAdvSearch() {
            document.getElementById("basicSearch").style.display = "none";
            document.getElementById("advSearch").style.display = "block";
        }

    </script>

Open in new window


Hope it helps u...
0
 
Kiran SonawaneConnect With a Mentor Project LeadCommented:
Sorry my mistake. you have to include # sign whenever you are playing the id

try like this..


document.getElementById("#<%=btnBasicSearch.ClientID%>").value = "Advanced Search";

from your attached screen shot the text (advance/basic search) is hyperlink at that time you need to do like





document.getElementById("#<%=btnBasicSearch.ClientID%>").innerHTML  = "Advanced Search";
0
 
swathi111Author Commented:
Hi sonawanekiran,

when I try

document.getElementById("#<%=btnBasicSearch.ClientID%>").value = "Advanced Search";

or

document.getElementById("#<%=btnBasicSearch.ClientID%>").innerHTML  = "Advanced Search";

it is showing below error message:

'document.getElementById(...)' is null or not an object


Thanks,
0
 
ingriTConnect With a Mentor Commented:
Can you do an alert like "alert('#<%=btnBasicSearch.ClientID%>');", to see what the id is that you get here?
And then check in your HTML if the button has this ID in the HTML.

I've sometimes had issues with an ID with a $ in it, and in javascript it would convert to an _ in some browsers.

To prevent this, you could set the ClientIdMode property of the button to "Static" if you're using .NET framework v4.0.
0
 
swathi111Author Commented:
Hi roopeshreddy,

when I try your code on first initial load you write code as below...

<script type="text/javascript">
        //Initally show Basic Search and hide Advanced Search
        ShowBasicSearch();

but when i try your code, ShoBasicSearch(); function is not getting executed on initial load when i write like this... so as a result it is showing both links and all fields in two div tags on first page load.....
0
 
Roopesh ReddyIT AnalystCommented:
Hi,
I tested the code at my end and posted!

Did you put the JavaScript at the end of the Page?

Anyway, you have resolved the issue! That's fine!
0
 
swathi111Author Commented:
Thanks roopeshreddy for your concern
0
 
swathi111Author Commented:
I didn't select my comment as the solution. i selected 2 expert's comments (ingriT and sonawanekiran) as a solution
0
All Courses

From novice to tech pro — start learning today.