Solved

Basic Search and Advanced Search validation

Posted on 2013-01-03
11
369 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

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…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

803 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