Solved

Basic Search and Advanced Search validation

Posted on 2013-01-03
11
373 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…

615 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