2014-10-13 4 views
0

내가 가진 하나의 텍스트 필드에이 양식 :HTML 양식

사용자가 Submit에 예 "안녕하세요"와 클릭 수를 들어, 텍스트를 입력
<form class="navbar-form navbar-left"> 
    <div class="form-group"> 
    <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

, 내가 원하는 URL을로드하려면 /search-results/hello. 어떤 아이디어?

+3

자바 스크립트로 이것을 수행해야하거나 서버 측에서 리디렉션해야 할 경우 어떤 시나리오를 찾고 있습니까? – box86rowh

답변

1

이것을보고 사양에 맞게 편집 할 수 있는지 확인하십시오.

<form> 
<div class="form-group"> 
    <input type="text" id="var1" class="form-control" placeholder="Search"> 
    </div> 
<input type="button" id="URLGenerate" value="Generate" /> 
</form> 

//assign the button event handler 
document.getElementById('URLGenerate').addEventListener('click', onGenerate); 

//given the name of a radio button group, it returns the value of the selected radio button or null if none of them are selected 
function getRadioButtonValue (name) { 
    var allRadios = document.getElementsByName(name); 
    for (var i = 0; i < allRadios.length; i++) { 
    if (allRadios[i].checked) { 
     return allRadios[ i ].value; 
    } 
    } 
    return null;//or any other value when nothing is selected 
} 

function onGenerate() { 
    //the base url 
    var url = 'http://domain.com/file.php'; 
    //an array of all the parameters 
    var params = []; 
    //get the value from the edit box with id=var1 
    params.push('var1=' + document.getElementById('var1').value); 
    //get the value from the edit box with id=var2 
// params.push('var2=' + document.getElementById('var2').value); 

    //get the value of the radio box 
    params.push('var3=' + getRadioButtonValue('var3')); 

    //join all the parameters together and add to the url 
    url += '?' + params.join('&'); 
    alert(url); 
} 

코드 :

http://jsbin.com/itovat/22/edit?html,js,output

라이브 :

http://jsbin.com/itovat/22/

0

이 jQuery를 스크립트를 시도

$("button[type=submit]").click(function(e){ 
    e.preventDefault(); 
    var searchItem = $("#form-control").val(); 
    $("form").attr('action','search-results/'+searchItem); 
    $("form").submit(); 
});