Results 1 to 2 of 2
  1. #1

    How to Make a Search Form With Multiple Search Options > iFrame

    I discovered this site by looking at http://www.mediacollege.com/internet...ti-search.html. The tutorial is great and does help me some but I am having a bit of trouble with implementing this search bar.

    I am curious how you would change the java script to get the results open up in an iframe.

    Example of my page layout. I have removed most of the page and only kept the elements that I need adjusted. As you can see I have a nav banner across the top of the page. Links on the nav all appear in the iframe below the nav bar in an iframe. The frame page is called content.htm.

    Original Search bar code

    Before adding your code. I was using this as my search bar but I wanted to add multiple options. The results from the original search form would show up in the frame but I can't manage to figure out how to get the multi search results to work into the frame like I did with the previous single search form. Instead right now it obviously takes the current page to the search results.

    Any help you provide would be much appreciated. Please assist

    Original Search Form


    Code:
    <form class="searchform" action="http://www.google.com/search" method="get" target="content">
    <input class="searchfield" name="q" type="text" value="Google Search..." onFocus="if (this.value == 'Google Search...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Google Search...';}" />
    </form>

    Original Search form CSS


    Code:
    .searchform {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 6px #003399;
    padding: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -box-shadow: none !important;
    }
    .searchform input {
    font: normal 10px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
    background: #F5F5F5;
    padding: 2px 2px 0px 0px;
    width: 120px;
    border: solid 1px #003399;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -box-shadow: none !important;
    }

    New Code Using Multi Search Options


    Code:
    <html>
    <head>
    </head>
    <div id="framecontent">
    <div id="gsdnav" class="gsdnav">
    <ul>
    <li><a href="http://my.ford.com/" target="content">home</a></li>
    <li>   
    <form name="searchform" onSubmit="return dosearch();">
    <select name="sengines">
    <option value="http://www.google.com/search?q=" selected>Google</option>
    <option value="http://www.altavista.com/web/results?q=">Alta Vista</option>
    <option value="http://www.dogpile.com/info.dogpl/search/web/">Dogpile</option>
    </select>
    <input type="text" name="searchterms">
    <input type="submit" name="SearchSubmit" value="Search">
    </form>
    </li>
    <br style="clear: left" />
    </div>
    </div>
    <div id="maincontent">
    <iframe id="content" src="content.htm" name="content" frameborder="0"></iframe>
    </div>
    </body>
    </html>

  2. #2
    Never mind I figured it out.

    I used this and it works fine

    Code:
    window.open(submitto,"content");

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Subscribe to us on YouTube