I would like to add checked checkbox values as url parameter to my link.
This is what I have amongst others:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<script>
$(".checkbox").on("change", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
var key = $(".link").html(values.join("&"));
document.write('Open here');
});
</script>
The expected result is "http://www.example.com/test.html?bx1=1&bx2=1".
I hope someone can help me with this.
Thanks for these lines:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {
console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
I get a &on& between my values and it does not work on IE. Any idea? Thanks!
You can do like this:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
Wrap the checkboxes in a form, give them names and let jQuery do the work with .serialize():
$(function() {
$("form").on("change", function() {
var href = "http://www.example.com/test.html",
params = $(this).serialize();
if (params.length > 0) {
href += "?" + params;
}
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1
<input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2
</form>
The correction you need to do is in the line
var key = $(".link").html(values.join("&"));
You need to change it to
var key = values.join("&");
Why?
Because there is no .link selector in your code.
try like this:
you need with document.write()
document.write('http://www.example.com/test.html?' + values.join('&')+'');
OR
$("button").on("click", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$('#url').attr('href','http://www.example.com/test.html?' + values.join('&') );
$('#url').html('http://www.example.com/test.html?' + values.join('&'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label>
<button >Go</button>
<a id="url"></a>
Related
the following is my code
<input type="checkbox" id="checkbox" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
my javascript/jquery script is
<script>
$(document).ready(function() {
var ckbox = $('#checkbox');
var url = '';
console.log(url);
$('input').on('click', function() {
if(ckbox.is(':checked')) {
var url = $(':checked').val();
console.log(url);
window.location = url;
}
});
});
I want the page to go to the newly checked checkbox.How to make that happen?
id should be a unique value in the whole document. Change your HTML to have unique id's for each checkbox and modify your jQuery selector based on class or input type.
Check below example.
$(document).ready(function() {
$('.chkbox').on('change', function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
window.location = url;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="chkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" id="checkbox2" class="chkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="chkbox" value="brand.php?brand=farari" name="farari" checked> Farari</li>
<input type="checkbox" id="checkbox4" class="chkbox" value="brand.php?brand=nissan" name="nissan" checked> Nissan</li>
$(document).ready(function() {
var ckbox = $('.clscheckboxes');
var url = '';
$('input[type=checkbox]').change(function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
alert(url);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="clscheckboxes" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox2" class="clscheckboxes" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="clscheckboxes" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox4" class="clscheckboxes" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
One more sample code. Hope it'll work.
JQuery Code
$( ".checkbox" ).click(function() {
if ($(this).is(":checked"))
{
var page_url = $(this).val();
window.location = page_url;
}
});
HTML
<input type="checkbox" class="checkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=farari" name="farari"> Farari</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=nissan" name="nissan"> Nissan</li>
I have a checkboxs 3-4 of them, when the user checks the checkbox I want to add the value of the checkbox to the array, if they uncheck the box I want to remove the item from the array, this is what I got so far:
$('ul.dropdown-menu input[type=checkbox]').each(function () {
$(this).change(function () {
if ($(this).attr("id") == 'price') {
if (this.checked) {
priceArray.push($(this).val());
}
else {
priceArray = jQuery.grep(priceArray, function (value) {
return value != $(this).val();
});
}
}
});
});
Adding the value to the array works perfectly, however removing items results in this error:
Cannot read property 'toLowerCase' of undefined
on this line:
return value != $(this).val();
Run the code snippet and check
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var priceArray=[];
$(document).ready(function(){
$('input[type=checkbox]').each(function () {
$(this).change(function () {
if (this.checked) {
priceArray.push($(this).val());
$("#displayarray").html("array=[" + priceArray+"]");
}
else {
var index = priceArray.indexOf($(this).val());
if (index > -1) {
priceArray.splice(index, 1);
}
$("#displayarray").html("array=[" + priceArray+"]");
}
});
});
});
</script>
<input type="checkbox" value="box1"/>box1
<input type="checkbox" value="box2"/>box2
<input type="checkbox" value="box3"/>box3
<input type="checkbox" value="box4"/>box4
<br/>
<div id="displayarray"></div>
Replace
priceArray = jQuery.grep(priceArray, function (value) {
return value != $(this).val();
});
By
val = $(this).val();
priceArray = jQuery.grep(priceArray, function (value) {
return value != val;
});
Don't forget the scope where your are in the callback function.
You can try using filter instead of $.grep:
var values = [];
$("input").on("change", function()
{
var $this = $(this);
if ($this.is(":checked"))
{
values.push($this.val());
}
else
{
values = values.filter(x => x != $this.val());
}
console.log(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />
filter() is a native function, I prefer using built-in function rather than 3rd party's, IMO. Also, avoid binding events within loops like this:
$('ul.dropdown-menu input[type=checkbox]').each(function () {
$(this).change(function () {
Use this method:
$('ul.dropdown-menu').on('change', 'input[type=checkbox]', function() { ...
This will work even if checkbox is dynamically added.
You could do this very cleanly with a functional style
<div class="checkboxes">
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
</div>
And
(function() {
$(".checkboxes input[type=checkbox]").on("click", function() {
var x = $(".checkboxes input[type=checkbox]:checked").map(function(a,b) {
return parseFloat(b.value);
}).toArray();
console.log(x)
});
})();
I had a similar situation and I was able to overcome it in the following way :
My jQuery :
$(document).ready(function(){
$("#dataFilterForm").on("input", function() {
var values = '';
var boxes = $('input[name=vehicle]:checked');
boxes.each(function(b){
values = values + boxes[b].id + ', ';
});
$('#filterResult').text(values.substring(0, values.length-2));
});
});
My HTML :
<form id="dataFilterForm">
<input type="checkbox" id="Filter1" name="vehicle" value="Bike">
<label for="Filter1">Filter1</label><br>
<input type="checkbox" id="Filter2" name="vehicle" value="Car">
<label for="Filter2">Filter2</label><br>
<input type="checkbox" id="Filter3" name="vehicle" value="Boat">
<label for="Filter3">Filter3</label><br>
</form>
<p>Result : </p>
<p id="filterResult"></p>
I'm trying to change a redirect link using check boxes that append to the URL and a button that uses the changed URL. Im still a beginner to JavaScript and am a little lost as to where i'm going wrong.
My code:
<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var new=original.concat(addition)
//for testing
window.alert(new)
document.getElementById("test1").innerHTML= new;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>
<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>
Currently in your code change the below, new to newurl - new is a reserved word.
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var newurl =original.concat(addition)
//for testing
window.alert(newurl)
document.getElementById("test1").innerHTML= newurl;
//for the real redirecting not active for now
//window.location=new
}
I dont see a tag with id=test1, so you will get null exception in the console browser. Add a tag based on that and test.
I have added a snippet, please check.
<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>
Just wondering if anyone can help. I currently have code like this:
<section>
<span class="tags"></span>
<label for="shoes">Shoes</label>
<input type="checkbox" id="shoes">
<label for="jeans">Jeans</label>
<input type="checkbox" id="jeans">
<label for="tops">Tops</label>
<input type="checkbox" id="tops">
</section>
<section>
<span class="tags"></span>
<label for="monkey">monkey</label>
<input type="checkbox" id="monkey">
<label for="lion">lion</label>
<input type="checkbox" id="lion">
<label for="dog">dog</label>
<input type="checkbox" id="dog">
</section>
Each 'section' is dynamically produced. How do I go about inserting the value of each input into the span of each section when checked. I have been playing around with Arrays but stumbling due to each section being produced dynamically.
Can any of you help me out?
Better give each checkbox input a value, anyway, I'll use id instead.
// Listen to all checkboxes
$('section input[type="checkbox"]').click(function(e) {
var $this = $(e.target);
// Find the container of same group.
var $parent = $this.parent('section');
// Find all checked ones.
var checked = $parent.find('input[type="checkbox"]:checked');
// Map the value or id, to an array.
var result = $.map(checked, function(ele) {
return $(ele).attr('id');
});
// Get the result, use it whatever you want.
$parent.find('.tags').text(result.join(' '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<span class="tags"></span>
<label for="shoes">Shoes</label>
<input type="checkbox" id="shoes">
<label for="jeans">Jeans</label>
<input type="checkbox" id="jeans">
<label for="tops">Tops</label>
<input type="checkbox" id="tops">
</section>
<section>
<span class="tags"></span>
<label for="monkey">monkey</label>
<input type="checkbox" id="monkey">
<label for="lion">lion</label>
<input type="checkbox" id="lion">
<label for="dog">dog</label>
<input type="checkbox" id="dog">
</section>
Use this javascript:
<script type="text/javascript">
window.addEventListener("load",function(){
var sections = document.getElementsByTagName("section");
for(var i=0; i<sections.length; i++){
var n = 0;
sections[i].span = sections[i].getElementsByTagName("span")[0];
sections[i].checkboxes = [];
var inputs = sections[i].getElementsByTagName("input");
for(var c=0; c<inputs.length; c++){
if(inputs[c].type!="checkbox"){continue}
sections[i].checkboxes[n++]=inputs[c];
inputs[c].onchange=function(){this.parentNode.getValues();}
}
sections[i].getValues = function(){
var o=[], n=0;
for(var i=0; i<this.checkboxes.length; i++){if(this.checkboxes[i].checked){o[n++] = this.checkboxes[i].id;}}
this.span.innerHTML = o.join(", ");
};
}
},false);
</script>
Scenario:
Three unchecked check-boxes, each with different id and value.
An empty paragraph (or label) with id = par.
[CB1] has value 1.
[CB2] has value 2.
[CB3] has value 3.
Now, when I click cb1 -> 'par' gets and prints the value of cb1.
Clicking on cb3, 'par' gets the value of cb1+cb3.
Clicking cb1, 'par' subtracts the value of cb1 and so on.. I think you get the point.
How can I achieve this with only HTML and JavaScript (without jQuery).
<input type="checkbox" id="1" value="1" />
<input type="checkbox" id="2" value="2" />
<input type="checkbox" id="3" value="3" />
<p id="par"></p>
This will do it: jsfiddle example (updated to remove alert)
HTML:
<input type="checkbox" id="1" value="1" onclick='checkClicked(event)'/>
<input type="checkbox" id="2" value="2" onclick='checkClicked(event)'/>
<input type="checkbox" id="3" value="3" onclick='checkClicked(event)'/>
<p id="par"></p>
JavaScript:
function checkClicked(element)
{
var targetElement = element.target;
var newVal = targetElement.value;
if( !targetElement.checked )
{
newVal *= -1;
}
var currentVal = document.getElementById('par').innerHTML;
if( currentVal )
{
newVal = parseInt(currentVal) + parseInt(newVal);
}
document.getElementById('par').innerHTML = newVal;
}
<label>
<input type="checkbox" id="check1" value="check1" onchange="alterP(this);"/>check1
</label>
<label>
<input type="checkbox" id="check2" value="check2" onchange="alterP(this);"/>check2
</label>
<label>
<input type="checkbox" id="check3" value="check3" onchange="alterP(this);"/>check3
</label>
<p id="par"></p>
js Code
function alterP(obj) {
var par = document.getElementById('par');
var txt = (obj.checked) ? obj.value : "";
par.innerHTML = txt;
}
<script>
document.getElementById("1").addEventListener("click", processCheck);
document.getElementById("2").addEventListener("click", processCheck);
document.getElementById("3").addEventListener("click", processCheck);
function processCheck() {
var theParagraph = document.getElementById("par");
var currentValue = 0;
if (!isNaN(parseInt(theParagraph.textContent))) {
currentValue = parseInt(theParagraph.textContent)
}
if (this.checked) {
theParagraph.textContent = currentValue + parseInt(this.value);
}
else {
theParagraph.textContent = currentValue - parseInt(this.value);
}
}
</script>