Solved

Basic Search and Advanced Search validation

Posted on 2013-01-03
11
367 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now