HTML 양식의 값을 기반으로 링크를 만들고 리디렉션합니다.

Question

내가하려는 것은 양식에서 요약 한 내용에 따라 사람들을 링크로 리디렉션하는 것입니다 (링크는

<form id="form"> 
<div class="formbox"> 
    <div class="radio-toolbar"> 
    <input type="radio" id="iconapp1" name="department" value="1250"/> 
     <label for="iconapp1">PP</label><br> 
    <input type="radio" id="iconapp2" name="department" value="944"/> 
     <label for="iconapp2">EP</label><br> 
</div> 

<div class="radio-bar1"> 
    <input type="radio" id="enginemake1" name="enginemake" value="6"/> 
     <label for="enginemake1">&nbsp;&nbsp;Chevrolet</label><br> 
    <input type="radio" id="enginemake2" name="enginemake" value="8"/> 
     <label for="enginemake2">&nbsp;&nbsp;Chrysler</label><br> 
</div> 

<div class="bodyvertdivision1"></div> 
    <div class="radio-bar3"> 
     <select name="powerrange"> 
      <option id="powerrange1" value="28">100</option> 
      <option id="powerrange2" value="128">200</option> 
      <option id="powerrange3" value="228" selected>300</option> 
     </select> 
    </div> 

    <div class="bodyvertdivision1"></div> 

    <div class="radio-bar4"> 
     <input type="radio" id="location1" name="location" value="store"/> 
      <label for="location1">&nbsp;&nbsp;America (NT - ST)</label><br> 
     <input type="radio" id="location2" name="location" value="store.au"/> 
      <label for="location2">&nbsp;&nbsp;Australia and Oceania</label><br> 
    </div> 

    <div class="radio-bar2"> 
     <input onclick="goToPage();" type="button" class="buttonmyapp" value="Submit" /> 
    </div> 
</div> 
</form> 

나는이 모양을 선택한 값을 사용하여 구축을 위해 노력하고있어 링크 :

이

http://{location}.mydomain.com/product-catalog.aspx?section=-{department}-{enginemake}-{powerrange}- 

각 괄호 부분은 할 필요를이 양식입니다

양식 필드) 바꾸다 d를 select의 값으로 해당 이름과 비교하십시오.

Answer 1

가 먼저 jQuery 라이브러리 링크 또는 다운로드 JS와 링크를 포함

처럼 보일 것이다

JAVASCRIPT

function goToPage() 
{ 
    var location; 
    var department; 
    var enginemake; 
    var powerrange; 
    pName = document.getElementById('powerrange'); 
    powerrange = pName.options[pName.selectedIndex].value; 
    var form = document.getElementById('form'); 
    var ele = form.getElementsByTagName('input'); 
    for(var i=0;i<ele.length;i++) 
    { 
      if(ele[i].getAttribute('type')=='checkbox') 
      { 
       if(ele[i].getAttribute('name')=='department') 
       { 
         if(ele[i].checked) 
         department = ele[i].value; 
       } 
       else if(ele[i].getAttribute('name')=='enginemake') 
       { 
         if(ele[i].checked) 
         enginemake = ele[i].value; 
       } 
       else if(ele[i].getAttribute('name')=='location') 
       { 
         if(ele[i].checked) 
         location = ele[i].value; 
       } 
       else; 
      } 
    } 

    var url = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-"; 

    form.setAttribute('action',url); 
    form.submit(); 
} 

Answer 2

제출 단추의 goToPage 기능이 응답 변경을 확인한 후 양식의 src 특성이 올바르게 작동해야합니다.

그래서 jQuery를에이

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
function goToPage(){ 
    var location = $('input[name=location]:checked').val(); 
    var department = $('input[name=department]:checked').val(); 
    var enginemake = $('input[name=enginemake]:checked').val(); 
    var powerrange = $('select[name=powerrange]').val(); 
    window.location.href = "http://"+location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-"; 
} 
</script> 

Answer 3

는이

HTML

<select id="powerrange" name="powerrange"> 

을 시도 할 수 있습니다

var location = $('input[name=location]:checked', '.radio-bar4').val(); 

var dept = $('input[name=location]:checked', '.radio-bar4').val(); 

var engine = $('input[name=enginemake]:checked', '.radio-bar1').val(); 

var power = $('powerrange').val() ; 

var domain = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+dept+"-"+engine+"-"+power+"-"; 

$("#form").attr("action", domain);