2013-05-09 3 views
-2

계속 버튼을 누르면 선택 항목이 다른 index.html 링크로 리디렉션되는 라디오 버튼 양식을 만들어야합니다. 나는 이것을 할 수있는 쉬운 방법을 찾는 것처럼 보인다. 도움!!다른 링크로 리디렉션되는 HTML/Javascript 라디오 버튼 양식

는 기본적으로 다음과 같이 HTML에서

<form> 
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR> 
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR> 
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue"> 
</form> 
+1

StackOverflow의 당신에게 맞춤형 서비스를하지 않습니다 그만큼 커뮤니티에서 원하는 것을 선택하고 코드를 개발합니다. 지금까지 작성한 자바 스크립트 코드를 보여줌으로써 최소한의 노력을 기울임으로써 우리가 잘못된 점을 분류하는 데 도움이 될 것임을 보여줍니다. –

+0

그런 요구 사항으로 비즈니스 요구를 생각할 수 없습니다. 깨끗하고 단순하게 유지하기 위해 3 개의 앵커 태그를 사용하겠습니다. 왜 당신은 여러 번의 클릭을 사용하기를 원합니 까? – Tushar

답변

1

이 버튼을

<form> 
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR> 
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR> 
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue" id="btnFormSubmit"> 
</form> 

자바 스크립트 제출 각 버튼 및 ID에 대한 데이터 href 속성을 추가 jQuery를 사용

var submit = document.getElementById('btnFormSubmit'); 
submit.addEventListener('click', submitForm); 

function submitForm(event){ 
event.preventDefault(); 
event.stopPropagation(); 

var href = '', 
inputs = this.parentNode.getElementsByTagName('input') 
    for(var i=0;i<inputs.length;i++){ 
     if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){ 
      href = inputs[i].getAttribute('data-href'); 
      window.location = href; 
     } 
    } 
} 
0

을 것이다 그런 것처럼, 라디오의 가치 필드에 URL을 추가하십시오.

<form method="post"> 
    <input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR> 
    <input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>   
    <input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR> 
    <input type="submit" value="Continue"> 
</form> 

jQuery 코드 :

$(function(){ 
    $("form").submit(function(e) { 
     e.preventDefault(); 
     window.location = $(this).find('input[type="radio"]:checked').val(); 
    }); 
}); 

라이브 예 :

http://jsfiddle.net/nnEny/

0

이 너무 명백 할 수도 있지만

<form> 
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR> 
</form> 
<form> 
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR> 
</form> 
<form> 
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue"> 
</form> 
+0

이것은 작동하지 않습니다. 제출 버튼은 하나 뿐이며 양식이 3 개인 경우 – Tushar

+0

누구든지이 데이터를 수집하는 페이지로 이동하는지 알 수 있습니까? 데이터를 가져와 브라우저를 리디렉션하는 리디렉션 페이지를 만들 수 있습니다. – internetgho5t

관련 문제