I have this code I am trying to implement that calls a function
<body>
<nav id="menu">
<div id="app">
<ul class="List">
<li><span>Enter Number below</span></li>
<div id="coachid">
<input type="text" name="coachid" id="textbox1" value="22984">
</div>
<li><span>Fitness Programs</span>
<ul id="programs">
<li class="Label"> </li>
<li><span>10-Minute Trainer</span>
<ul id="10min">
<li class="Label"> </li>
<li><span>Base</span>
<ul id="10minBase">
<li class="Label"> </li>
<label for="basic">Text Input:</label>
<input type="hidden" name="basic" id="basic" value="10MinTrainer"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="10min">
<li class="Label"> </li>
<input type="hidden" name="basic1" id="basic1" value="TMT"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="Deluxe">
<li class="Label"> </li><input type="hidden" name="basic3" id="basic3" value="TMTUpgrade"/>
<button id="getWebSite">Open Website</button><br/>
<ul>
</li>
</ul>
</li>
</li>
<ul>
</li>
</ul>
</div>
</nav>
</body>
and here is the function
$(function() {
$('#getWebSite').unbind().click(function(){
goUrl = 'http://www.example.com/' + $("#basic").val() + '?referringRepId=' + $("#textbox1").val();
window.location = goUrl;
});
});
I am trying to call the function multiple times throughout the code to redirect the button to a site based on info held within the html. Is this possible?
You need to name your function, apply a class to those elements that should have the click handler, and create the click function:
<button class="myClass">
$(function () {
function doSomething() {
goUrl = 'http://www.example.com/'
+ $("#basic").val()
+ '?referringRepId='
+ $("#textbox1").val();
window.location = goUrl;
}
$('.myClass').unbind().click(function () {
doSomething();
});
});
Related
enter image description hereI am trying to move items from one list to another on checkbox check but actually 1st list are select options and checked property is not coming in jquery , can anybody help how to achieve this ?
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFields').bind('change', function(option, checked, select) {
var selectedval = $('#GridFields option:selected').last().val();
if ($('.sort-selected li[field-id="+selectedval+"').length > 0) {
$('.sort-selected').remove(selectedval);
} else {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).find(':selected').last().val() + '">' + $(this).find(':selected').last().text() + '</li>');
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
}
enableSort();
});
<div class="form-group">
<select class="form-control input-sm multiselect" id="GridFields" multiple="multiple" name="GridFields" style="display: none;">
<option disabled="disabled" value="Remedy_Short_ID">Request ID</option>
<option value="Actuals_Per_Day">Actuals Per Day</option>
</select>
<div class="btn-group open" style="width: 100%;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Request ID, Summary, Request Category, Product Name, Comp Progress Level" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="true">
<ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 300px;"><li class="multiselect-item filter"><div class="input-group input-group-sm">
--First Five Elements
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
--Remaining Elements
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Actuals_Per_Day"> Actuals Per Day</label></a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
#Html.Label("Layout Columns", "Layout Columns", new { #class = "form-label" }) #Html.ListBox("GridFields", CommonEntities.getGridFieldsMultiList(), new { #class = "form-control input-sm multiselect"})
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<div class="panel-heading">Display Order (Drag n Drop an Item)</div>
<ul class="list-group sort-selected" style="height:276px;overflow-y:auto">
<li class="list-group-item disabled" field-id="">Request ID</li>
<li class="list-group-item disabled" field-id="">Summary</li>
<li class="list-group-item disabled" field-id="">Request Category</li>
<li class="list-group-item disabled" field-id="">Product Name</li>
<li class="list-group-item disabled" field-id="">Comp Progress Level</li>
</ul>
</div>
</div>
Based on your description, following should work :
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFieldsWrap input[type=checkbox]').bind('change', function() {
$('#GridFieldsWrap input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
if ( $(".sort-selected li[field-id=" + $(this).val() + "]").length==0) {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).val() + '">' + $(this).parent().text() + '</li>');
}
} else {
$(".sort-selected li[field-id=" + $(this).val() + "]").remove()
}
})
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
})
//enableSort();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group" id="GridFieldsWrap">
<ul id="GridFields">
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" value="Request_ID" checked> Request ID</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" checked value="Summary"> Summary</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" checked value="Request_Category"> Request Category</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Product_Name"> Product Name</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<ul class="list-group sort-selected" style="height:100px;overflow-y:auto">
<li class="list-group-item disabled" field-id="Request_ID">Request ID</li>
<li class="list-group-item disabled" field-id="Summary">Summary</li>
<li class="list-group-item disabled" field-id="Request_Category">Request Category</li>
</ul>
</div>
</div>
Adding id="GridFieldsWrap" on the form level helps you to get the checkbox property checked.
In List options if you want, checkbox property checked, please try to add one level above the id property and check there if checkbox property appears.
I use iCheck http://icheck.fronteed.com/ on my project
but it block my js code. Here is the code:
1) list of checkboxes
<div class="list_box">
<dl>
<dt><span>FORM-FACTOR</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_0_all" value="all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="AAA" name="cateChk_0_arr" checked="" >AAA</label></li>
<li class=""><label><input type="checkbox" value="BBB" name="cateChk_0_arr" checked="" >BBB</label></li>
<li class=""><label class=""><input type="checkbox" value="CCC" name="cateChk_0_arr" checked="" >CCC</label></li>
</ul>
</dd>
</dl>
<dl>
<dt><span>TYPES</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_1_all" value="t_all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="type_1" name="cateChk_1_arr" checked="" >type_1</label></li>
<li class=""><label><input type="checkbox" value="type_2" name="cateChk_1_arr" checked="" >type_2</label></li>
<li class=""><label class=""><input type="checkbox" value="type_3" name="cateChk_0_arr" checked="" >type_3</label></li>
</ul>
</dd>
</dl>
<div class="btn_search"> Search</div>
</div>
2) and list of products:
<ul class="thumb_list">
<li class="thumb_1 flower" data-category="AAA TYPE_1 ">
<a href="www.link_1.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#1 </span>
<span class="title1">Product#1 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_2 flower" data-category="BBB TYPE_2 ">
<a href="www.link_2.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#2 </span>
<span class="title1">Product#2 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_3 flower" data-category="CCC TYPE_3 ">
<a href="www.link_3.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#3 </span>
<span class="title1">Product#3 description </span>
</div>
</div>
</a>
</li>
</ul>
This script works without iChek.js, but not works with.
<script>
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];}
selectedFilters[this.name].push(this.value);});
var $filteredResults = $('.flower');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;}
});
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
});
</script>
So I need to show only checked products by FORM-FACTOR or TYPES filtering (using cklick the button "Search")
Could you help me please to work it using iCheck?
I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:
If the first step is selected, it will change background color of circle class.
If the second and third step is selected without first step, it will display error message.
I've tried many ways on SO and write myself but it doesn't work.
This is my code
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
JS
var sCircle = $('.steps ul li');
$('.step label').on('click', function(){
var $this = $(this),
sCircleIndex = parseInt(sCircle.index()),
sCircleChild = sCircle.children('div'),
currParent = $this.parents('ul').index();
console.log(currParent);
});
Above JS code always return 0. Hope anyone can figure me out this case. Thanks in advance.
Try using .closest()
$(".stepinstallment label").on("click", function() {
console.log($(this).closest("li").index())
});
$('.stepinstallment label').on('click', function(){
console.log($(this).closest("li").index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
I hope this example will help you out !!!
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
if(index!=0)
alert("error ")
else
alert("index is: " + index)
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<p>Some random tag</p>
</ul>
$('.step label') will not return any elements, since there is no html matching the css selector
I can't see the .steps and .step class in your html.
with your html, I guess this code will work
$('.stepinstallment').on('click', 'label', function (e) {
var $this = $(this);
var li = $this.parents('li');
console.log(li.index());
});
the steps of the code:
get the label element
get the li element contain the label
get the index
There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:
var sCircle = $('.steps ul li');
$('input[type=radio]').on('click', function(){
var liIndex=$(this).parents('li').index();
if(liIndex>0){
alert('error')
}
else{
$('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
}
});
JSFIDDLE
$(document).ready(function(){
var sCircle = $('.steps ul li');
$('.step label').on('click', function () {
var currentLi = $(this).parents('li')[0];
currentLiIndex = -1;
sCircle.each(function (index) {
if (sCircle[index] == currentLi) {
currentLiIndex = index;
}
});
console.log(currentLiIndex);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment steps">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class=" step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
This is what you need to do.
$('.step-content label').on('click', function(){
var clickedId = $(this).parents('li').index();
if(clickedId == 0) {
$('.circle').css('background-color','yellow');
} else {
alert('error');
}
});
Working example in jsfiddle https://jsfiddle.net/1uxus551/
I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.
$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.
$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });
I have two input fields, one for sorting one for the radius.
I want it to work if I set the sortby it should save and resubmit with the order I've selected, and the radis would work the same way, without getting the two input fields messing up each other. Right now whatever I set for radius is go over by the sortby field, even it get posted as a value and displayed under the wrong input.
Someone please look it over and help me to solve this.
Thank you, I would really appreciate any help with this problem.
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#shortby').val($(this).data('val'));
$('#order').submit();
});
});
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#radius').val($(this).data('val'));
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="index.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul>
<li data-val="10"> <a href="#" >10</a></li>
<li data-val="20"> <a href="#" >20</a></li>
<li data-val="30"> <a href="#" >30</a></li>
<li data-val="40"> <a href="#" >40</a></li>
<li data-val="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
See the problem is that you are setting the same data, i.e. val in both cases. Check the following
<script type="text/javascript">
$(document).ready(function($) {
$('input#shortby').val(<?php echo (isset($_POST['shortby'])) ? json_encode($_POST['shortby']) : ''; ?>);
$('input#radius').val(<?php echo (isset($_POST['radius'])) ? json_encode($_POST['radius']) : ''; ?>);
$('ul li').on('click', function() {
var shortbyVal, radiusVal;
if($(this).data('val') === undefined){
radiusVal = $(this).data('val2');
shortbyVal = $('input#shortby').val();
}
else if($(this).data('val2') === undefined){
shortbyVal = $(this).data('val');
radiusVal = $('input#radius').val();
}$('input#shortby').val(shortbyVal);
$('input#radius').val(radiusVal);
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="1.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul> <!-- Observe the change in data-val to data-val2 -->
<li data-val2="10"> <a href="#" >10</a></li>
<li data-val2="20"> <a href="#" >20</a></li>
<li data-val2="30"> <a href="#" >30</a></li>
<li data-val2="40"> <a href="#" >40</a></li>
<li data-val2="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
This should be a good workaround for that