두 텍스트 상자 중 하나에서 변수 데이터를 자바 스크립트로 보냅니다.

Question

안녕하세요. 나는 JS에 상당히 익숙하다. (배경은 C++, 어셈블리 언어와 COBOL, 그리고 가벼운 .NET과 같은 엔터프라이즈 언어이다.) 그래서 두 개의 텍스트 상자 중 하나에서 변수 정보를 보내는 방법에 관한 조언을 얻을 수 있는지 궁금하다. 몇 가지 자바 스크립트를 누른 다음 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

기본적으로 HTML 양식 은 Enter 키를 눌러 제출됩니다. 따라서 어떤 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

먼저 ... 웹 개발 세계에 오신 것을 환영합니다 (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> 

자바 스크립트 :

<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를 연결하고 돋보기 이미지를 추가하고 서버 측 항목을 작성해야하지만이 작업이 시작되면 좋겠다.