Envoyer des données de variables de l'une des deux zones de texte à javascript

Question

Salutations, toutes! Je suis relativement nouveau à JS (mon expérience est en C++, les langages d'entreprise comme l'assemblage et COBOL, et quelques légers .NET), donc je me demandais si je pouvais obtenir des conseils sur l'envoi d'informations variables de l'une des deux zones de texte. certains javascript et ensuite le JS faire quelques vérifications de base et autres. Voici le pseudo-code pour ce que je suis en train de faire:

<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> 

Ainsi se termine la forme de base orienté vers l'avant que je voudrais utiliser. Maintenant, onClick ou onEnter, je voudrais que le formulaire passe le contenu de la zone de texte utilisée ainsi qu'un identifiant tel que "People" ou "Intranet", selon la case utilisée, à certains JS de base à l'arrière :

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 

Toutes les pensées/suggestions seraient grandement appréciées. Merci d'avance à tous!

Answer 1

Les formulaires HTML par défaut sont soumis en appuyant sur la touche Entrée - vous n'avez donc pas besoin d'utiliser JS. Tout ce que vous avez à faire est de créer deux formulaires HTML simples:

<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> 

Bien sûr, il y a d'autres - plus élégant - des moyens de le faire ...

Answer 3

tout d'abord ... bienvenue dans le monde du développement Web (c'est bien plus sexy que Cobol ... LOL). Puisque vous êtes relativement nouveau à JavaScript, je voudrais suggérer que vous commenciez avec jQuery. C'est beaucoup plus facile et plus propre que de faire la même chose dans les JS traditionnels. Voici le code que pour les deux champs de recherche:

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> 

Je divisé les champs de recherche en deux formes. De cette façon, vous pouvez éviter de passer un identifiant et le code devient plus évident (vous soumettez à deux pages différentes sur le serveur). Vous devez brancher jQuery, ajouter vos images de loupe et écrire les trucs côté serveur, mais j'espère que cela vous permet de démarrer.