Создайте ссылку на основе значений из формы 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 и ссылку

<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 2

После того, как функция goToPage в кнопке отправки подтвердит изменение ответа, атрибут src формы должен работать нормально.

Так JQuery это должно выглядеть примерно так

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); 

Answer 3

вы можете попробовать этот

HTML

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

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(); 
}