Solved

Basic Search and Advanced Search validation

Posted on 2013-01-03
11
371 Views
Last Modified: 2013-01-08
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
0
Comment
Question by:swathi111
  • 6
  • 2
  • 2
  • +1
11 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 38742906
Try like this

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

instead of

document.getElementById("field4").style.display = "";
0
 

Author Comment

by:swathi111
ID: 38742921
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38742999
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 250 total points
ID: 38743028
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
 

Author Comment

by:swathi111
ID: 38743078
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
 
LVL 6

Assisted Solution

by:ingriT
ingriT earned 250 total points
ID: 38743091
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
 

Author Comment

by:swathi111
ID: 38743093
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
 

Accepted Solution

by:
swathi111 earned 0 total points
ID: 38743163
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38743293
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
 

Author Comment

by:swathi111
ID: 38743310
Thanks roopeshreddy for your concern
0
 

Author Closing Comment

by:swathi111
ID: 38754132
I didn't select my comment as the solution. i selected 2 expert's comments (ingriT and sonawanekiran) as a solution
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question