[英]How can i pass an active tab value in javascript search function?
I'm currently creating a search function and i want to pass an extra parameter in search url based on active tab. 我当前正在创建一个搜索功能,我想基于活动选项卡在搜索URL中传递一个额外的参数。
By this time i can only pass selected values of dropdowns in each tab, but i can not pass the selected tab value. 到此时,我只能在每个选项卡中传递下拉列表的选定值,但是我不能传递选定的选项卡值。
PS.: Dont mind the styling, it's ok in my site. PS:不要介意样式,在我的网站上还可以。 The javascript is my main concern.
javascript是我主要关心的问题。
Here's my HTML and Javascript code so far: 到目前为止,这是我的HTML和Javascript代码:
$('#submit').on('click', function(search) { search.preventDefault(); var url = 'http://www.example.com/?s='; var fields = new Array("size", "color"); fields.forEach(function(f) { var v = $('#' + f).val(); if (v != '0') { url = url + f + '[' + v + ']' + ','; } }); window.location.href = url; });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <ul id="tabs" class="nav nav-tabs htabs"> <li class="active"> <a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a> </li> <li class="active"> <a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a> </li> </ul> </div> <div class="tabs-content"> <div class="tab-pane tab-content active" id="tshirt"> <div class="row"> <div class="xs-50 sm-50 md-33"> <select id="size" class="form-control"> <option value>--Select size--</option> <option value="xl">XLarge</option> <option value="xxl">XXLarge</option> </select> </div> <div class="xs-50 sm-50 md-33"> <select id="color" class="form-control"> <option value>--Select color--</option> <option value="red">Red</option> <option value="blue">Blue</option> </select> </div> <div class="button-group btn"> <input id="submit" class="btn" name="submit" value="Search" type="submit"> </div> </div> </div> <div class="tab-pane tab-content active" id="jacket"> <div class="row"> <div class="xs-50 sm-50 md-33"> <select id="size" class="form-control"> <option value>--Select size--</option> <option value="sm">Small</option> <option value="l">Large</option> </select> </div> <div class="xs-50 sm-50 md-33"> <select id="color" class="form-control"> <option value>--Select color--</option> <option value="red">Red</option> <option value="blue">Blue</option> </select> </div> <div class="button-group btn"> <input id="submit" class="btn" name="submit" value="Search" type="submit"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
This code works for me, its what you first posted (html) with the JavaScript code that should do what you need. 该代码对我有用,它是您首先发布(html)的JavaScript代码,该代码应该可以满足您的需求。 Does this not work for you?
这对您不起作用吗?
<div class="row">
<ul id="tabs" class="nav nav-tabs htabs">
<li class="active">
<a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab">T-shirts</a>
</li>
<li class="active">
<a href="#jacket" id="jacket" value="JACKET" data-toggle="tab">Jackets</a>
</li>
</ul>
</div>
<div class="tabs-content">
<div class="tab-pane tab-content active" id="tshirt">
<div class="row">
<div class="xs-50 sm-50 md-33">
<select id="size" class="form-control">
<option value>--Select size--</option>
<option value="xl">XLarge</option>
<option value="xxl">XXLarge</option>
</select>
</div>
<div class="xs-50 sm-50 md-33">
<select id="color" class="form-control">
<option value>--Select color--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="button-group btn">
<input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick()">
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
function myclick() {
var url = window.location.href ;
var hash = url.substring(url.indexOf("#")+1);
var mysize = document.getElementById("size").value;
var mycolor = document.getElementById("color").value;
window.location.href = "http://www.test.com/?tab=" + hash + "&Size=" + mysize + "&mycolor=" + mycolor;
}
</script>
Updated version 更新后的版本
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<ul id="tabs" class="nav nav-tabs htabs">
<li>
<button type="button" class="btn btn-link" onclick="mytype('TSHIRT')">T-shirts</button>
</li>
<li>
<button type="button" class="btn btn-link" onclick="mytype('JACKET')">Jackets</button>
</li>
</ul>
</div>
<div class="tabs-content">
<div class="tab-pane tab-content" id="tshirt" style="display:none">
<div class="row">
<div class="xs-50 sm-50 md-33">
<select id="tshirtsize" class="form-control">
<option value>--Select size--</option>
<option value="xl">XLarge</option>
<option value="xxl">XXLarge</option>
</select>
</div>
<div class="xs-50 sm-50 md-33">
<select id="tshirtcolor" class="form-control">
<option value>--Select color--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="button-group btn">
<input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('tshirt')">
</div>
</div>
</div>
<div class="tab-pane tab-content" id="jacket" style="display:none">
<div class="row">
<div class="xs-50 sm-50 md-33">
<select id="jacketsize" class="form-control">
<option value>--Select size--</option>
<option value="sm">Small</option>
<option value="l">Large</option>
</select>
</div>
<div class="xs-50 sm-50 md-33">
<select id="jacketcolor" class="form-control">
<option value>--Select color--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="button-group btn">
<input id="submit" class="btn" name="submit" value="Search" type="submit" onclick="myclick('jacket')">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
var passtype;
function mytype(mytype) {
switch (mytype) {
case "TSHIRT":
passtype = "TSHIRT";
document.getElementById("tshirt").style.display = "block";
document.getElementById("jacket").style.display = "none";
break;
case "JACKET":
passtype = "JACKET";
document.getElementById("jacket").style.display = "block";
document.getElementById("tshirt").style.display = "none";
}
}
function myclick(mytype) {
var url = window.location.href ;
var mysize = document.getElementById(mytype + "size").value;
var mycolor = document.getElementById(mytype + "color").value;
window.location.href = "results&searchfilter=category['" + mytype + "'],size['"+ mysize +"'],color['"+ mycolor +"']";
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.