버튼 링크에 양식 입력 사용하기

Question

기본적으로 사용자가 사용자 이름을 입력 한 후 URL에서 사용하려고합니다. 입력이 "hello"인 경우 URL은/hello로 끝납니다. js를 사용하여 완료해야합니까?

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="inputUsername" class="col-sm-2 control-label">Username</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="inputUsername" placeholder="Username"> 
    </div> 
    </div> 

    <div class="o "> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <a class = "btn btn-default" href=inputUsername> Sign in/Sign up</a> 
    </div> 
    </div> 
</form> 

Answer 1

예, JavaScript를 사용하여 사용자 이름을 얻을 수 있습니다. 질문 주석에서 언급했듯이 onsubmit 속성을 포함하도록 양식을 업데이트하여 이름을 가져 오는 함수를 인스턴스화 할 수 있습니다.

inputUsername을 사용하여 리디렉션 위치 onsubmit을 정의하려면 'preventDefault()'메소드 (here)에 대해 jQuery를 사용하여 표준 조치 양식 제출을 중재해야 할 수도 있습니다.

<form class="form-horizontal" role="form" onsubmit="onFormSubmit()"> 
    <div class="form-group"> 
    <label for="inputUsername" class="col-sm-2 control-label">Username</label> 
    <div class="col-sm-5"> 
    <input type="text" class="form-control" id="inputUsername" placeholder="Username"> 
    </div> 
</div> 

    <div class="o "> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <a class = "btn btn-default" href=inputUsername> Sign in/Sign up</a> 
    </div> 
    </div> 
</form> 

그런 다음 같은 것을 수행

<script> 
function onFormSubmit() { 
    var inputUsername = document.getElementById("inputUsername").value; 
    window.location = "/" + inputUsername; 
} 
</script>