Javascript/Drupal/Search Box.

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
gstupar's picture

Hi Fellow Librarians,

I'm trying to make a search box with radio buttons, where one radio button searchs our sirsi catalog, the next searches our website, and the last searches google......................

I can get this piece of Javascript to work in an HTML file but am unable to install this in a block. Any thoughts? I noticed on ASU's library site and some other sites, you've all gotten this to work. If anyone can throw me a bone my email address is gstupar@northbrook.info. What am I doing wrong? It's almost like the block is stripping the tags. I tried full html, filtered html, and then php and then NOTHING for format. So yea. Thanks for your help!

function PerformSearch()
{
if(document.siteSearch.srchPlace[0].checked)
{
var field1 = document.createElement("input");
field1.id = "searchLibraryField";
field1.name = "searchdata1";
field1.type = "hidden";
field1.value = document.siteSearch.q.value;

    var field2 = document.createElement("input");
    field2.name = "user_id";
    field2.type = "hidden";
    field2.value = "nbkibistro";

    var field3 = document.createElement("input");
    field3.name = "password";
    field3.type = "hidden";
    field3.value = "ibistro"

    var field4 = document.createElement("input");
    field4.name = "library";
    field4.type = "hidden";
    field4.value = "NORTHBROOK"

    document.forms.siteSearch.appendChild(field1);
    document.forms.siteSearch.appendChild(field2);
    document.forms.siteSearch.appendChild(field3);
    document.forms.siteSearch.appendChild(field4);
document.siteSearch.action ="http://64.107.155.140/uhtbin/cgisirsi/x/x/x/57/5";                

}
else
if(document.siteSearch.srchPlace[1].checked)
{
document.forms.siteSearch.method="post";
var field1 = document.createElement("input");
field1.id = "searchField";
field1.name = "search_block_form";
field1.type = "hidden";
field1.value = document.siteSearch.q.value;

    var field2 = document.createElement("input");
    field2.id = "form-6af56005d14f8a14883ed97046620434";
    field2.name = "form_build_id";
    field2.type = "hidden";
    field2.value = "form-6af56005d14f8a14883ed97046620434";         

    var field3 = document.createElement("input");
    field3.id = "edit-search-block-form";
    field3.name = "form_id";
    field3.type = "hidden";
    field3.value = "search_block_form";                 
    document.forms.siteSearch.appendChild(field1);
    document.forms.siteSearch.appendChild(field2);
    document.forms.siteSearch.appendChild(field3);                        
document.siteSearch.action ="http://www.northbrook.info/search/node";

}
else
if(document.siteSearch.srchPlace[2].checked)
{
document.siteSearch.action ="http://www.google.com/search";
}
}

Test Form

Library Catalog
Library Website
Google

Comments

well, your tags got stripped

calebtr's picture

well, your tags got stripped here, certainly. any chance you can attach the working html file?

Javascript stripping

dchakrab's picture

I'm much more of a project manager than a developer, but I believe Javascript is always stripped if you're just entering the text into the "add new block" field. Have you tried wrapping this into a mini-module?

--
Dave Chakrabarti
Co-founder | Project Manager
Nonprofitable.org - Drupal for nonprofits
(708) 919-1026

I did it this way

generalelektrix's picture

Hi,

Here's how I did it to search my Website (/search/node) and another search engine in a single block:

<script language="Javascript">
  function OnSubmitForm() {
    if(document.myform.scope[0].checked == true) {
      document.myform.action = "https://rvmweb.bibl.ulaval.ca/recherche";
    }
    else if(document.myform.scope[1].checked == true) {
      document.myform.action = "/search/node";
    }
    return true;
  }
  function show_recherche() {
    document.getElementById('website').style.display = 'none';
    document.getElementById('website').style.visibility = 'hidden';
    document.getElementById('recherche').style.display = 'block';
    document.getElementById('recherche').style.visibility = 'visible';
  }
  function show_website() {
    document.getElementById('website').style.display = 'block';
    document.getElementById('website').style.visibility = 'visible';
    document.getElementById('recherche').style.display = 'none';
    document.getElementById('recherche').style.visibility = 'hidden';
  }
</script>
<div class="infobox">
  <h3>Search</h3>
  <form name="myform" method="get" id="simple-search-form" onSubmit="return OnSubmitForm();">
    <div id="website" style="display: none; visibility: hidden;">
      <input type="text" name="keys" id="simple-search-form-q" maxlength="300" />
    </div>
    <div id="recherche" style="visibility: visible;">
      <input type="text" name="t" id="simple-search-form-q" maxlength="300" />
    </div>
    <input type="submit" value="Find!" name="go" id="simple-search-form-submit" />
    <p>
      <input type="radio" onclick="show_recherche();" value="recherche" name="scope" checked="checked" id="simple-search-form-recherche" />
      <label for="simple-search-form-recherche">RVM Engine</label>
      <input type="radio" onclick="show_website();" value="website" name="scope" id="simple-search-form-website" />
      <label for="simple-search-form-website">Website</label>
    </p>
  </form>
</div>

I tested it in a page as well as in a block using Full HTML filter.

The only drawback I see of this method is that when you switch from an engine to another using the radio buttons, you lose the text already entered in the text input field.

you can simply switch the

calebtr's picture

you can simply switch the values of the input boxes in the same way you switch the visibility if you give your input boxes different ids.

in the html bit, give the inputs unique ids:

    <div id="website" style="display: none; visibility: hidden;">
      <input type="text" name="keys" id="website-search-form-q" maxlength="300" />
    </div>
    <div id="recherche" style="visibility: visible;">
      <input type="text" name="t" id="recherche-search-form-q" maxlength="300" />
    </div>

in the javascript bit:

  function show_recherche() {
    document.getElementById('website').style.display = 'none';
    document.getElementById('website').style.visibility = 'hidden';
    document.getElementById('recherche').style.display = 'block';
    document.getElementById('recherche').style.visibility = 'visible';

    if (document.getElementById('website-search-form-q').value) {
      document.getElementById('recherche-search-form-q').value = document.getElementById('website-search-form-q').value;
    }
  }
  function show_website() {
    document.getElementById('website').style.display = 'block';
    document.getElementById('website').style.visibility = 'visible';
    document.getElementById('recherche').style.display = 'none';
    document.getElementById('recherche').style.visibility = 'hidden';
    if (document.getElementById('recherche-search-form-q').value) {
      document.getElementById('website-search-form-q').value = document.getElementById('recherche-search-form-q').value;
    }
  }

i didn't test this, but that's the idea.

Thanks

generalelektrix's picture

Good idea, I will certainly give a shot at it!

Libraries

Group organizers

Group categories

Resources

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: