將可變數據從兩個文本框之一發送到javascript

Question

大家好！ 我對JS非常陌生（我的背景是C ++，諸如匯編和COBOL之類的企業語言，以及一些簡單的.NET），所以我想知道我是否可以就如何從兩個文本框之一發送可變信息獲取建議？一些JavaScript，然后讓JS做一些基本的檢查等等。 這是我要執行的操作的偽代碼：

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

至此，我想使用的前端基本形式結束了。 現在，在onClick或onEnter上，我希望該表單將使用的文本框的內容以及諸如“ People”或“ Intranet”之類的標識符（取決於使用哪個框）傳遞給后端的一些基本JS。 ：

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

任何想法/建議將不勝感激。 謝謝大家！

Answer 1

默認情況下 ，通過按Enter鍵來提交HTML表單-因此您不必使用任何JS。 您要做的就是創建兩個簡單的HTML表單：

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

當然，還有其他-更優雅的方式-

Answer 3

首先...歡迎來到Web開發世界（它比Cobol ... LOL更性感）。 由於您剛接觸JavaScript，因此我建議您從jQuery開始。 與在傳統JS中執行相同任務相比，它更容易，更清潔。 這是兩個搜索框的代碼：

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>

我將搜索框分為兩種形式。 這樣，您可以避免傳遞標識符，並且代碼變得更加明顯（您提交到服務器上的兩個不同頁面）。 您需要連接jQuery，添加放大鏡圖像並編寫服務器端的內容，但我希望這可以幫助您入門。