양식 데이터를 URL에 통합하기

사용자가 무언가를 입력하는 텍스트 필드가있는 양식을 만들고 싶습니다. 그런 다음 사용자가 리디렉션 될 외부 사이트의 링크에 통합해야합니다.양식 데이터를 URL에 통합하기

사용자가 'foobar'라고 입력했다고 가정 해 보겠습니다. 그가 제출을 클릭 한 후 그는 http://example.com/foobar로 이동해야합니다.

PHP가 잘 작동하지만 이것은 JS에 있어야합니다. ?

가

<html> 
<head> 
<script type="text/javascript"> 

function genURL() { 
var user = document.getElementById('user'); 
window.location.href = "http://example.com/" + user; 
} 

</script> 
</head> 
<body> 

<form> 
username: <input type="text" name="user"> 
<input type="submit" value="Submit" name="user" onClick="genURL()"> 
</form> 

</body> 
</html>

이 수행하는 유일한 방법은 URL에 사용자 =는 foobar를 추가 할 수 있습니다 :

지금까지 나는이 있습니다.

이 작업을하려면 어떻게해야합니까?

출처

2012-04-24 Jamy Mahabier

당신은 제출되는 양식을 방지해야합니다

그럼 당신은 할 것이다. 함수를 양식의 onsubmit 처리기로 만들고 양식을 제출하지 않으려면 false을 반환하여이 작업을 수행 할 수 있습니다.

document.getElementById('').value에 .value을 사용하여 필드의 콘텐츠를 가져와야합니다.

자바 스크립트 :

function genURL() { 
    var user = document.getElementById("user").value; 
    window.location = "http://google.com/" + user; 
}

HTML :

<form onsubmit="genURL(); return false;"> 
    <input type="text" id="user" /> 
    <input type="submit" value="Submit" /> 
</form>

데모 : 일했다http://jsfiddle.net/jhogervorst/CFHtG/

출처

2012-04-24 20:05:20 Jonathan

감사합니다, 속임수! –

user 요소의 값을 원합니다.

var user = document.getElementById('user').value;

출처

2012-04-24 20:01:36

다음과 같이 시도하십시오 :

function genURL() { 
    var user = document.getElementById('user'); 
    window.location.href = "http://thisisnotarealurl.com/" + user.value; 
}

출처

2012-04-24 20:02:18 sarwar026

이는 통화 할 URL과 폼의 방법으로 GET에 양식의 동작을 설정하는 것이 더 쉬울 수 있지 않을까요? : 자바 스크립트를

<html> 
    <body> 
     <form action="http://example.com" method="GET"> 
      username: <input type="text" name="user"> 
      <input type="submit" value="Submit" name="user"> 
     </form> 
    </body> 
</html>

필요 없음을

출처

2012-04-24 20:03:21 verhage

function genURL() { 
    var user = document.getElementById('user'); 
    window.location.href = document.URL + user.value; 
}

출처

2012-04-24 20:05:24

양식 데이터를 URL에 통합하기

답변

관련 문제