javascript - 根据 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}-

每个带括号的部分都需要替换为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

你可以试试这个

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

Answer 3

在提交按钮上的 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);