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>