基于 Html 表单中的值创建链接，并将其重定向到该链接

Create a link based on values from a Html form and redirect them to it

本文关键字：链接 重定向 基于 表单 创建 Html      更新时间：2023-09-26

我想做的是根据人们在表单上的内容将他们重定向到链接（链接是使用表单字段中的值构建的）

这是表格：

<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的值。

首先包含 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>

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

你可以试试这个

.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();
}
相关文章：