JavaScript - Two Dropdowns With Search Button That Returns The Combined Results?

Hi all,


I'm having trouble paging from six to six the search results coming from a webservice, hope someone can help :

Let's see it with an example:

The variable that stores the number of elements of the search results array is called contentLenght.
Let's say that contentLenght equals 9. Then I need a div showing 6 elements an another sowing 3 elements.
If contentLenght equals 7, I need a div showing 6 elements an another showing one element.
If the value of contentLenght is 18, then I need three divs containing 6 elements each.. and so on.

Now the paging itself: if I have just one div there's no need for paging, but if I have two of more I have to show the page's numbers.
Then when a number is clicked the present div must hide and the div containing the elements for the page number should show.


Am I right with the approach?
I was about to paste some code but the only way I've come out with the six to six paging is with a long if else structure, and I'm sure there's a smarter way of doing it.


Thanks a ton in advance

Hello,

I need some help.. I'm using this example script and need the search results to post to a another frame and not a new window.

Code:

searchh.js
// Multi Search - Head Script
// copyright Stephen Chapman, 4th August 2005
// you may copy this clock provided that you retain the copyright notice
function start() {
var i = Math.floor(Math.random() * document.searchbox.engine.length);
document.searchbox.engine[i].selected = true;
}
window.onload = start;
function search() {
searchTerm = document.searchbox.term.value;
var searchVal = '';
if(searchTerm != '')
{
searchTerm = searchTerm.replace(/\s/ig, '+');
searchEngine = document.searchbox.engine[document.searchbox.engine.selectedIndex].value;
switch (searchEngine) {
case 'about': searchVal = 'http:\/\/search.about.com\/fullsearch.htm?terms=' + searchTerm; break;
...
default: break;}
if (searchVal != '') window.open(searchVal,'search');
}}

Code:

searchb.js
//copyright Stephen Chapman, 4th August 2005
// you may copy this script provided that you retain the copyright notice
document.write('<div align="center"><form name="searchbox" action="">\nSearch for: <input name="term" type="text" size="15" maxlength="80" \/> With:\n<select name="engine">\n<option value="about">About<\/option>\n<option value="accoona">Accoona<\/option>\n<option value="alltheweb">AllTheWeb<\/option>\n<option
...
value="yahoo">Yahoo<\/option>\n<\/select>\n<input type="button" value="Go!" onclick="search()" \/>\n<\/form><\/div>');

Sorry but i'm just newbie , just need a little hint on what to do. Need the results to showup in frame "test1"
Or if someone can direct me: looking for a multi search drop down list in a frame environment where after submitting the string the results would show in another frame

Thanks

Hey there everyone.

I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it.

I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear.

I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes.

For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear.

like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know.

thanks

I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.

I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
Code:

searchForms = new Ext.TabPanel({
    fullscreen: true,
    title: 'Search',
    displayField: 'text',
    sto  searchForm,
    iconCls: 'search',  
    items: [{
        id: 'searchSubmit',
        xtype: 'form',
        standardSubmit : true,
        scroll: 'vertical',
        items: [{
            xtype: 'fieldset',
            title: 'Keywords',
            defaults: {
                // labelAlign: 'right'
                labelWidth: '35%'
            },
            items: [{
                xtype: 'textfield',
                name: 'keywords',
             id: 'keywords',
                placeHolder: 'EG: Music, TV',
                autoCapitalize : true,
                required: true,
                useClearIcon: true
            }]
        }, {
            xtype: 'fieldset',
            title: 'Advanced Search',
            items: [{
                    xtype: 'selectfield',
                name: 'genre',
             id: 'genre',
                label: 'Genre',
                options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
                }]
            }, {
                xtype: 'selectfield',
                name: 'media',
             id: 'media',
                label: 'Media',
                options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
                }]
            }]
        }, {
            layout: 'vbox',
            defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
            items: [{
                text: 'Search',
                 ui: 'confirm',
                scope: this,
                hasDisabled: false,
                handler: function(){
                    searchForms.submit({
                    url: 'search.php'
                });
                }
            }, {
                text: 'Reset',
                ui: 'decline',
                handler: function(){
                    searchForms.reset();
                }
            }]
        }]
    }]
});

I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.

I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.

I've also tried to load the file in the app seperately by using:

Code:

 
Ext.regModel('mobile', {
    fields: [
       {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php?keywords=test',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'

I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working

I don't know if this is of help, but the main javascript file is:

Code:

var tabPanel;

var homePanel = new Ext.Panel({
    title: 'Home',
    iconCls: 'home',
    fullscreen: true,
    scroll:{direction:'vertical',threshold:7},
    items: [{
        html: '<center><p>Home</p></center>'    
    }]
});

var servicePanel = new Ext.Panel({
    title: 'Services',
    iconCls: 'team',
    fullscreen: true,
    items: [{
        html: '<center>Please choose a service</center>'    
    }]
});

var searchPanel = new Ext.Panel({
    title: 'Search',
    iconCls: 'search',
    fullscreen: true,
    items: [{
        html: '<center>Search</center>' 
    }]
});

var feedtabpanel = new Ext.Carousel({
    title: 'More',
    iconCls: 'more',
    fullscreen: true,
    sortable  : true,
    xtype:'panel',
    scroll:{direction:'vertical',threshold:7},
    items: [
        {
            title: 'Contact',
            html : '<center><h1>Contact Us</h1></center>',
        },
        {
            title: 'Feedback',
            html : '<center><h1>Let us know what you think<h1></center>',
        },
        {
            title: 'Tell a friend',
            html : '<center><h1>Tell your friends how much you love this app</h1></center>',
        }
    ]
});


searchForms = new Ext.TabPanel({
        fullscreen: true,
        title: 'Search',
        displayField: 'text',
        sto  searchForm,
        iconCls: 'search',  
        items: [{
            id: 'searchSubmit',
            xtype: 'form',
            standardSubmit : true,
            scroll: 'vertical',
            items: [{
                xtype: 'fieldset',
                title: 'Keywords',
                defaults: {
                    // labelAlign: 'right'
                    labelWidth: '35%'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'keywords',
                 id: 'keywords',
                    placeHolder: 'EG: Music, TV',
                    autoCapitalize : true,
                    required: true,
                    useClearIcon: true
                }]
            }, {
                xtype: 'fieldset',
                title: 'Advanced Search',
                items: [{
                        xtype: 'selectfield',
                    name: 'genre',
                 id: 'genre',
                    label: 'Genre',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Country',
    value: '1'
    text: 'Sci-Fi',
    value: '2'
    text: 'Western',
    value: '3'
                    }]
                }, {
                    xtype: 'selectfield',
                    name: 'media',
                 id: 'media',
                    label: 'Media',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Music',
    value: '1'
    text: 'TV',
    value: '2'
    text: 'Movie',
    value: '3'
                    }]
                }]
            }, {
                layout: 'vbox',
                defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
                items: [{
                    text: 'Search',
                     ui: 'confirm',
                    scope: this,
                    hasDisabled: false,
                    handler: function(){
                        searchForms.submit({
                        url: 'search.php'
                    });
                    }
                }, {
                    text: 'Reset',
                    ui: 'decline',
                    handler: function(){
                        searchForms.reset();
                    }
                }]
            }]
        }]
    });

Ext.regModel('mobile', {
    fields: [
        {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var store = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'areas.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var nestedList = new Ext.NestedList({
    fullscreen: true,
    title: 'Location',
    displayField: 'text',
    sto  store,
    iconCls: 'locate',  
});

nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = nestedList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

var services = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'subcats.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var servicesList = new Ext.NestedList({
    fullscreen: true,
    title: 'Services',
    displayField: 'text',
    sto  services,
    iconCls: 'team',    
});

servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = servicesList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',

    onReady: function() {

        tabPanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'dark',
            animation: {
                type: 'cardslide',
                cover: true
            },
            items: [
                homePanel,
                nestedList,
                servicesList,
                searchForms,
                feedtabpanel
            ]
        }); 
    }
})

Hi all!,

I'm having a few challenges trying to create a link to a "new" search from a database search results page. This maybe a better example:

My goal is:
To allow website visitors to searches site for i.e. "Dog Collars", the results page lists every "dog collar" and store that carries "dog collars" (in database).

At that point I would like to have links (on the results page) to all brands of "dog collars" and stores that carry "dog collars".

I would like to then be able to click on a "brand" (text link) of "dog collars" and then generate a new results page that lists all store and vendor information.

thank you in advance!

Erick

p.s. this is a link to a site that has a similar featu http://69.0.211.58/~pubexpress/ami/html/index.html

Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help

Here is the code implemented on the search results page:

Code:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 500;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas?

I have been searching for a way to display facebook api friends.getAppUsers in set of 5.

I am able to do this if i hard code it but I cant seem to find and comprehend a method to do this dynamically.

What i want to achieve is, if i have 43 friends using the application, the code should allow users to view this result in set of 5.

-prevBtn- friend1 friend2 friend3 friend4 friend5 -nextBtn-

upon clicking on the nextBtn,

-prevBtn- friend6 friend7 friend8 friend9 friend10 -nextBtn-

etc

i am actually relatively new to Javascript and Facebook Codings.. so any help would really be great! Thanks!

here are my codes:
Code:

<div id="fb-root"></div> 

<table width="750px" height="185px" background="Image/friends.jpg">
<tr>
<td align="right">
<a href="#"onClick="prev();return false"><img src="Image/prevFriend.jpg" width="36" height="154"></a>
</td>
<td width="89%">
<div id="profile_pics" align="left"></div> 
</td>
<td>
<a href="#" onClick="next();return false">Image/nextFriend.jpg" width="36" height="154"></a>
</td>
</tr>
</table>
</div>



<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
var profilePicsDiv = document.getElementById('profile_pics');
var NameDiv = document.getElementById('name');
var containDiv = document.getElementById('container');
FB.init({ appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true });

FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
    window.location.reload();
} else {
    window.location.reload();

}
});
FB.getLoginStatus(function(response) {
if (!response.session) {
profilePicsDiv.innerHTML = '<em></em>';
containDiv.innerHTML = '<em>You are not connected </em> ';

return;

}
FB.api({ method: 'friends.getAppUsers' }, 
function(result) 
{

var markup = '';
var numFriends = result ? Math.min(5,result.length) : 1;
if (numFriends > 0) 
{
  for (var i=0; i<numFriends; i++) 
  {
    markup +=
    (

      '<fb:profile-pic size="square" ' +
                      'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
      '></fb:profile-pic>'
    );

    }

    }


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

 });

 });

 function next(){
 FB.api({ method: 'friends.getAppUsers' }, 
 function(result) 
 {


  var markup = '';

  var numFriends = result ? Math.min(10,result.length):1;

  if (numFriends > 5) 
{
  for (var j=5; j<numFriends; j++) 
  {

    markup +=
    (
      '<fb:profile-pic size="square" ' +
                      'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
      '></fb:profile-pic>'

    );


  }

}

 else{
     if (numFriends > 0) 
{
  for (var j=0; j<numFriends; j++) 
  {

    markup +=
    (
       '<fb:profile-pic size="square" ' +
                      'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
      '></fb:profile-pic> '

      );


     }

     }

  };


    profilePicsDiv.innerHTML = markup;

    FB.XFBML.parse(profilePicsDiv);

    });

    }

    function prev(){
 FB.api({ method: 'friends.getAppUsers' }, 
    function(result) 
    {



    var markup = '';

    var numFriends = result ? Math.min(5,result.length):1;

    if (numFriends > 0) 
{
    for (var j=0; j<numFriends; j++) 
  {

    markup +=
    (
      <fb:profile-pic size="square" ' +
                      'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
      '></fb:profile-pic>'

    );


  }

}


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

}

Hi All,

Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this:

When I use the input type = button or submit, then the calculator works fine

BUT

I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads

I have made the button line in bold. All help appreciated!!

Many thanks

Here is my code:

<html>
<head>


<script language="JavaScript">
function Framesize(BikeSizer)
{
var a = parseFloat(BikeSizer.Insleg.value);
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;

}
</script>


</head>
<body>

<Form name="BikeSizer">
<!--The visuals for the graphic-->

<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td>
</tr>
</table>

<table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;">
<tr>
<td colspan="2" valign="middle" align="left">
<div style="padding:2px 5px 5px 12px;">
<font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenh&ouml;he</font>
<br /><a href="#" style="font-size:10px">Wie messe ich die Schrittl&auml;nge richtig?</a></div>
</td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td>
<td><select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select></td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritth&ouml;e:</div></td>
<td><input name="Insleg"></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><div style="padding:6px 0 8px 0;">
<input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)>
</div></td>
</tr>

<tr>
<td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenh&ouml;e:</strong></div></td>
<td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> &nbsp;<strong>CM</strong>
<br /><br /><input name = "FramesizeInch"> &nbsp;<strong>Zoll</strong>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td>
</tr>
</table>
</FORM>

I'm using two simple CSS rollovers for a prev/next arrow nav, combined with a JS script that lets the user manually tab/flip/swap through a few testimonials. You roll over the "next" button, it's highlighted, you click it, a new testimonial appears in place of the old one.

Problem: the prev/next buttons are appearing and disappearing on click, seemingly randomly. I can't make any sense of it.

Image: http://img3.imageshack.us/img3/8924/jsproblem.jpg

I've tried adjusting the CSS container sizes, tried changing the positioning and even adding z-indexes in case the divs are accidentally overlapping. Gave items background colors to try to see the structure more clearly, for flaws. Nothing has worked.

Any help much appreciated.

I'm using this JS script for the tabs:

Code:

last_tab = 'tabTest1';
    function show(layerName) { 
    document.getElementById(layerName).style.display = '';}
    function hide(layerName) { 
    document.getElementById(layerName).style.display = 'none';}
    function show_next(tab_name) {
    document.getElementById(last_tab).className = '';
    var curr = document.getElementById(tab_name);
    curr.className='';
    hide(last_tab+'_data');
    show(tab_name+'_data');
    last_tab=tab_name;}

and this HTML:

Code:

        <!-- start: testimonials -->
        <div id="tabTest1_data">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <p class="spotlightnav-content-title">Testimonials</p>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    	<span class="color1">"</span>Excellent staff very courteous, friendly and professional, excellent stay, excellent meal.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Janice, Georgia</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>
          		</div>
             </div>
		</div>
        
        <div id="tabTest2_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Christine, Taiwan</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest3_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Belle, Taiwan</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest4_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Vaguely not-terrible. Acceptable in a somewhat amazing way. ffffffffuuuuuuuuu<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Grace, Texas</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest5_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Damn fine place, yo.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Slim, Bacon</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest6_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Blurry. But good.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Bob, California</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>

I'm assuming this is primarily a JS problem, but if taking a look at the CSS is necessary, let me know and I'll post it.

THANKS!!!!!

I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place.

My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript.

So I am appealing to the javascript programmer nation for some assistance in this endeavor.

Any help would be greatly appreciated, Thanks.

Hi all,

Only recently started, self-teaching, html and Java in order to get a project idea of mine up and running.

First barrier I've come across is trying to sort out a drop down with search button that will then reveal the connected hidden div, I've mangled together some code from a couple of sources with what I've learnt, but not really sure how to tie in the "Search" button to the showDiv(divname) function. Wondering if anyone could help out.

Many thanks in advance

Code:

<head>

	<title>Untitled</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	
	<script type="text/javascript"><!--

var lastDiv = "";
function showDiv(divname) {
	
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}

	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}
</script>

</head>

<body>
	
<h1>
	<form name="form" >
		<select name="select">
		<option selected>Choose
		<option value="one"> one
		<option value="two"> two
		<option value="other"> other
		</select>

		<input type="button" value="Search" onClick="showDiv(this.value)">
	</form>	
</h1></br>

<h2>
	Results:
	<p id="one" class="hiddenDiv">one</p>
	<p id="two" class="hiddenDiv">two</p>
	<p id="other" class="hiddenDiv">other</p>
</h2>

</body>

</html>

From my stylesheet:

Code:

.hiddenDiv {
	display: none;
}

.visibleDiv {
	display: block;
}

Ok so im new to javascript and I have a button in an interface for an app. It's like drag and drop and i want this button to link you to a certain website searching for what the user types in the searchField1 box. The button is button16. Such as you type dogs into the text box and you click the google button among other search engines and it will redirect you to a google search doing a search for dogs. But how do I make this button search google and search for whats in searchField1. I would really appreciate the help. Im looking everywhere to learn this but just cant find it. If you could tell me how or send me a link to a tutorial that would be great. Thanks!
Here is the code:


I don't know where and what to add to do that. Please help.

I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this?

btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function.

Hello,

I am very new to HTML. Yesterday I have started learning HTML.

I want to make two Dropdown but should be linked with each other. There value should change after click "go" button.

In other word I want to make one html for Post Code/Pin Codes of my state.

Please Help Me!!!

I have made script till he

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>PIN CODES OF GOA</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>GOA</b><br />
BEACHES<br />
CHURCHES<br />
BARS
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
</body>
</html>
</body>
<form>
<select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
<option value=VASCO</option>
<option value=FATORDA</option>
</select>
<select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
<option value="403802"</option>
<option value="403602"</option>
</select>
<input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
</form>
<script type="text/javascript">
tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December");

function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();

if(nyear<1000) nyear=nyear+1900;

if(nhour == 0) {ap = " AM";nhour = 12;}
else if(nhour <= 11) {ap = " AM";}
else if(nhour == 12) {ap = " PM";}
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}


document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("GetClock()", 1000);
}
window.onload=GetClock;
</script>
<div id="clockbox"></div>

</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Search Your Post Code</td>
</tr>
</table>

I have a status page on my website, but I have multiple servers, and they cramp up the one page.
I was wondering if it was possible if I could have a link that says "CSS Server Status" and it drops down with the code for the CSS server, and say for "SAMP Server Status" drops down with the code/html for the samp server.

I haven't a clue about Javascript, so as much help as possible would be appretiated.