2014-10-22 9 views
0

텍스트 버튼과 3 개의 라디오 버튼이있는 검색 버튼이 있습니다. 사용자가 검색 버튼을 클릭하면 선택한 라디오 버튼의 값을 url에 전달합니다. 현재 URL에 표시되는 유일한 것은 사용자가 텍스트 상자에 입력 한 모든 것입니다.URL의 라디오 버튼 값을 전달하십시오.

<input type="text" name="search-bar" id="search-bar" class="search-box" onkeypress="return submitEnter();"/> 

<button onclick="redirect();" class="search-button">Search</button><br/> 

<input type="radio" name="selection" value="Music" id="music-button" class="radio-button"><span class="radio-text">Music</span> 

<input type="radio" name="selection" value="Books" id="books-button" class="radio-button"><span class="radio-text">Books</span> 

<input type="radio" name="selection" value="Games" id="games-button" class="radio-button" ><span class="radio-text">Games</span>  

JS :

function redirect() 
{ 
    var url = "mylink.com"; 

    url = url+"&q="+document.getElementById("search-bar").value; 
    location.href=url; 
} 


function submitEnter() 
{ 
    var keycode; 
    if (window.event) 
     keycode = window.event.keyCode; 
    else if (e) 
     keycode = e.which; 
    else 
     return true; 

    if (keycode == 13) 
    { 
     redirect(); 
     return false; 
    } 
    else 
     return true; 
} 
+0

은 * 라디오 버튼 * 단순히 * 쿼리 문자열 *로'& 값 = 인 가치를 전달 안'다음'TRUE '또는'FALSE '일 수 선택? – Greg

+0

이 항목을 양식 요소로 묶었습니까? jsFiddle 예제를 만들 수 있습니까? – roughcoder

+0

나는 그렉 (Greg)을 모른다. 그래서 나는 롤을 요구하고있다. 이것은 나에게 다소 새로운 것입니다. 나는 그렇게 간단 할 것이라고 생각했지만 몇 시간 동안 온라인으로 검색을 해왔고 해결책을 찾지 못했습니다. – user2584238

답변

0
다음 사용자의 게임 라디오 버튼 해제 확인 및 검색을 명중한다면, URL에이 ...

HTML을 m = 게임과 같은 무언가를 보여줄 것이다

내가 오해하고있는 것이 아니라면 양식을 제출하면됩니다. form 요소로 묶고 buttontype="submit"으로 변경하십시오.

그러면 js 리디렉션을 제거하고 submitEnter 기능을 더 DRY 할 수 있습니다.

function submitEnter(form) { 
 
    var keycode; 
 
    if (window.event) 
 
    keycode = window.event.keyCode; 
 
    else if (e) 
 
    keycode = e.which; 
 
    else 
 
    return true; 
 

 
    if (keycode == 13) { 
 
    form.submit(); 
 
    return false; 
 
    } else 
 
    return true; 
 
}
<form method="get" action="http://www.example.com"> 
 
    <input type="text" name="search-bar" id="search-bar" class="search-box" onkeypress="return submitEnter(this);"/> 
 
    <button type="submit" class="search-button">Search</button> 
 
    <br/> 
 
    <input type="radio" name="selection" value="Music" id="music-button" class="radio-button"><span class="radio-text">Music</span> 
 

 
    <input type="radio" name="selection" value="Books" id="books-button" class="radio-button"><span class="radio-text">Books</span> 
 

 
    <input type="radio" name="selection" value="Games" id="games-button" class="radio-button"><span class="radio-text">Games</span> 
 
</form>

관련 문제