Sending variable data from one of two text boxes to javascript

Question

Greetings, all! I am fairly new to JS (my background is in C++, enterprise languages like assembly and COBOL, and some light .NET), so I was wondering if I could get some advice regarding how to send variable information from one of two text boxes to some javascript and then have the JS do some basic checks and such. Here's the pseudocode for what I am trying to do:

<form = webForm>
<p>
_____________
textboxPeople| searchIcon      //a text box to search an online phonebook at my company.
-------------                  //It has a little "magnifying glass" icon to search
                               //(onClick), but I would also like them to be able to 
                               //search by hitting the "enter" key on their keyboards.
</p>
<p>

_____________
texboxIntranet| searchIcon     //Same as above search textbox, but this one is used if
-------------                  //the user wishes to search my corporate intranet site.

</form>

So ends the front-facing basic form that I would like to use. Now, onClick or onEnter, I would like the form to pass the contents of the text box used as well as an identifier such as "People" or "Intranet," depending on which box is used, to some basic JS on the back end:

begin JavaScript:

if(identifier = 'People')
  fire peopleSearch();

else
if(identifier = 'Intranet')
  fire intranetSearch();


function peopleSearch()
{
    http://phonebook.corporate.com/query=submittedValue    //This will take the person
                                             //that the user submitted in the form and
                                             //place it at the end of a URL, after which
                                             //it will open said complete URL in the 
                                             //same window.
}

function intranetSearch()
{
    http://intranet.corporate.com/query=submittedValue    //This will function in the
                                             //same way as the people search function.
}

end JavaScript

Any thoughts/suggestions would be greatly appreciated. Thank you all in advance!

Answer 1

HTML forms by default are submitted by hitting Enter key - so you do not have to use any JS. All you have to do is to create two plain HTML forms:

<form action="http://phonebook.corporate.com/" method="Get">
    <input type="text" name="query" />
</form>

<form action="http://intranet.corporate.com/" method="Get">
    <input type="text" name="query" />
</form>

Answer 2

<form id="search-form">
    <div><input type="text" name="query" id="query-people" /> <input type="submit" value="Search phonebook" /></div>
    <div><input type="text" name="query" id="query-intranet" /> <input type="submit" value="Search intranet" /></div>
</form>

<script>
    var search_form = document.getElementById('search-form'),
        query_people = document.getElementById('query-people'),
        query_intranet = document.getElementById('query-intranet');
    search_form.onsubmit = function() {
        if (query_people.value) {
            people_search();
        }
        else if (query_intranet.value) {
            intranet_search();
        }
        return false;
    };

    function people_search() {
        window.location = 'http://phonebook.corporate.com/?query='+ encodeURIComponent(query_people.value);
    }

    function intranet_search() {
        window.location = 'http://intranet.corporate.com/?query='+ encodeURIComponent(query_intranet.value);
    }
</script>

Of course, there are other - more elegant - ways to do it...

Answer 3

First of all... welcome to the Web development world (it's way more sexy than Cobol... LOL). Since you're fairly new to JavaScript, I would like to suggest that you start with jQuery. It's way easier and cleaner than doing the same task in traditional JS. Here's the code that for the two search boxes:

HTML:

<form id="peopleform" action="peoplesearch.aspx" method="post">
  <label for="peoplesearch">People:</label>
  <input type="text" name="peoplesearch" id="peoplesearch">
  <input type="image" id="peoplebutton" src="magnifyingglass.gif" alt="Search for people.">
</form>

<form id="intranetform" action="intranetsearch.aspx" method="post">
  <label for="intranetsearch">Intranet:</label>
  <input type="text" name="intranetsearch" id="intranetsearch">
  <input type="image" id="intranetbutton" src="magnifyingglass.gif" alt="Search the Intranet.">
</form>

JavaScript:

<script type="text/javascript">
  $(document).ready(function(){ 
    /* People Search */
    $('#peoplesearch').keydown(function(e){ /* Detect key presses in the people search field */
      if(e.keyCode==13) { /* Detect enter */
        $('#peopleform').submit(); /* Submit people search form */
      }
    });

    $('#peoplebutton').click(function(){ /* Detect click on people search magnifying glass */
      $('#peopleform').submit(); /* Submit people search form */
    });

    /* Intranet Search */
    $('#intranetsearch').keydown(function(e){ /* Detect key presses in the Intranet search field */
      if(e.keyCode==13) { /* Detect enter */
        $('#intranetform').submit(); /* Submit Intranet search form */
      }
    });

    $('#intranetbutton').click(function(){ /* Detect click on Intranet search magnifying glass */
      $('#intranetform').submit(); /* Submit Intranet search form */
    });
  });
</script>

I split the search boxes into two forms. That way you can avoid passing an identifier and the code becomes more obvious (you submit to two different pages on the server). You need to hook up jQuery, add your magnifying glass images and write the server side stuff, but I hope this gets you started.