pass variables from checkboxes to an onclick function - javascript

I've created a table and each row as a checkbox.
What i'm trying to do is when someone checks one or more rows a garbage can icon appears.
Clicking on the garbage can deletes the chosen rows.
This is the code i wrote so far:
The div where the garbage can appears:
<div class="hidden" id="adminPanelShow">
<img src="../images/garbage.jpg" class="adminPanelIcons"/><br>
<img class="hrLine" src="images/line.png"/>
</div>
The Table:
<table>
<tr><td><input type = "checkbox" name="idPriv[]" id="idPriv" onclick="evaluateIT(this)" data-related-item="adminPanelShow" value ="<?php echo $value["id"]?>" /></td>
<td><input type="text" name="userName[]" id="userName" class="adminPanel" value="<?php echo $value["userName"]?>"/></td>
<td><input name="firstName[]" type="text" id="firstName" class="adminPanel" value="<?php echo $value["firstName"]?>"/></td>
<td><input name="lastName[]" type="text" id="lastName" class="adminPanel" value="<?php echo $value["lastName"]?>"/></td>
</tr>
</table>
The javascript code:
function evaluateIT(obj){
var item = $(obj);
var relatedItem = $("#" + item.attr("data-related-item"));
var length = $("input:checked").length;
if(item.is(":checked") )
relatedItem.fadeIn();
else if(item.not(":checked") && length == 0)
relatedItem.fadeOut();
}
Now, everything is working good, But how can i pass the values (id numbers..) from the selected checkboxes into an onclick function of the garbage can?
That means, I want that each time i click the garbage can i can do some operations with the values of the chosen checkboxes.

I think when you said "everything is working good", you meant to say the code till garbage-can display is working, but not the implementation of garbage-can functionality. I assume this from the javascript function that you have. Please be more clear which will enable people to help you.
Now,
Look at this example, and you can implement on your case. I tried this, and it works
HTML:
<div id="garbagecan" style="border: 1px solid red">garbagecan</div>
<ul id="books">
<li><input id="book1" value="book1" type="checkbox"><span>Book1</span>
</li>
<li><input id="book2" value="book2" type="checkbox"><span>Book2</span>
</li>
<li><input id="book3" value="book3" type="checkbox"><span>Book3</span>
</li>
<li><input id="book4" value="book4" type="checkbox"><span>Book4</span>
</li>
</ul>
Javascript code [using jquery]
$(document).ready(function($) {
$("#garbagecan").hide();
$("#garbagecan").click(function() {
var selectedIds = $("#books :checkbox:checked").map(function() {
return $(this).val();
}).get();
alert(selectedIds);
});
$("#books :checkbox").click(function() {
if ($("#books :checkbox:checked").length > 0) {
$("#garbagecan").show();
} else {
$("#garbagecan").hide();
}
});
});
What this does: The garbage can div will be hidden until you select atleast one checkbox. When you have selected a minimum of one checkbox, and when you click the garbage can, i am alerting the array of selected values. When you call the .get() method, the resultant jquery object is converted to an array.
Hope this helps.

Related

how to hide unchecked box using jquery or php?

I have a select option, I have a written function when I click a particular option it will fetch values related to that option and this particular value will be checked using the checkbox and other values will be unchecked.
I need to hide those unchecked values or else I need to keep unchecked values below the toggle button!! I am stuck right now!
<input type="checkbox" class="value" name="value[]" id="value<?=$i?>" value="<?=$brow["process"]?>" data-process-name="<?=$brow["process_name"]?>"/> <?=$brow["process_name"]?>
also, I am getting checkbox value as an array!
help me to solve this!
I added screenshot of checkbox where I get unchecked values below the checked values.
JS:
if(jsonProcessArr.length > 0){
$(".proces_name_value").each(function(){
if($.trim(this.value) != ""){
if ($.inArray(this.value, jsonProcessArr) != -1){
$(this).prop("checked",true);
}
else{
$(this).prop("checked",false);
} // here I check values from json and if there is the value inside json it will check otherwise uncheck//
after I receive checked and unchecked values together!!
mycode:
<div class="row form-group ">
<?php
$pquery = "SELECT distinct(process_name),process_nid FROM bi_process_info WHERE status=true";
$presult = mysqli_query($conn, $pquery);
$i =1;
while ($brow = mysqli_fetch_array($presult, MYSQLI_ASSOC))
{
?>
<div class="col-lg-3 col-md-3 col-sm-12 form-group">
<input type="checkbox" class="proces_name_value process_name" name="process_value[]" id="process_value<?=$i?>" value="<?=$brow["process_nid"]?>" data-process-name="<?=$brow["process_name"]?>"> <?=$brow["process_name"]?></input>
</div>
<?php
$i++;
} ?>
</div>
already i added my ajaxcall code !! so after that ajax call i added function where it hides unchecked checkbox :
function uncheck(){
$('.process_name').each(function(){
$t_this= $(this);
if($t_this.is(':checked')){
$t_this.show();
}
else
{
$t_this.parent().hide(); // this hides my element but when i click another option i hiding values but it hided values that are already hided
i dont want to do that!!
is there any way to refresh the hided elements?
}
});
}
Firstly you're getting the value back as an array because the name="value[]" contains '[]'. Drop the braces and it will return as a single value. Second, all child checkboxes that you want to hide should be in the nested html or have dedicated classes to handle this.
I would recommend the below (Note: the children could be an array if you desire)
<div>
<div>
<input type='checkbox' class='someCheckbox' name='value'>
<div class='children'>
<input type='checkbox' name='childValue1'>
<input type='checkbox' name='childValue2'>
</div>
</div>
<div>
<input type='checkbox' class='someCheckbox' name='value'>
<div class='children'>
<input type='checkbox' name='childValue3'>
<input type='checkbox' name='childValue4'>
</div>
</div>
</div>
<script>
jQuery(document).on('change','.someCheckbox',function(event){
let checkbox = jQuery(event.target);
if(checkbox.prop('checked')){
checkbox.siblings('.children').show();
}else{
checkbox.siblings('.children').hide();
}
})
</script>

Checkboxes, javascript runs 2 times through function if I click on text

I want to click on a checkbox and if I click this box it should run a function what gets an ID and saves it into an array or deletes it from the array if it still exists in the array.
That works, but if I click on the text beside the box the function runs twice. It first writes the ID into the array and then deletes it.
I hope you can help me so that I can click on the text and it just runs once
HTML
<label><input type="checkbox" value="XXX" >Active</label>
JavaScript/jQuery
function addOrRemoveBoxes(ID){
if(boxArr.indexOf(ID) != -1){
removeFromArray(ID)
}
else{
boxArr.push(ID);
}
}
$(".checkBoxes").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});
The problem is probably that your label and your input are picking the click. Try to bind it only to input. Like this:
$(".checkBoxes input").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});
Your HTML is structured bad. When your label is clicked it triggers a click event for the input so you have to separate the input form the label like: <input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label>. Also your jQuery makes no sense, why do you use unbind()? And we can't see what removeFromArray() does (we can guess but I prefer to see all code used or note that you use pseudo code).
I made this in 5 min: (hopes it helps you)
$(document).ready(function(){
window.boxArr = [];
$(document).on('click','[name=opt1]',function(){
addOrRemoveBoxes(this.value);
//show contents of boxArr
if(boxArr.length == 0){
$('#output').html('nothing :/');
}
else{
$('#output').html(boxArr.join(" -> "));
}
});
});
function addOrRemoveBoxes(ID){
var arrayIndex = boxArr.indexOf(ID);
if(arrayIndex > -1){
boxArr.splice(arrayIndex, 1);
}
else{
boxArr.push(ID);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Choose</h1>
<input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label> <br>
<input type="checkbox" name="opt1" id="opt1_2" value="DUT"> <label for="opt1_2">hallo</label> <br>
<input type="checkbox" name="opt1" id="opt1_3" value="SWE"> <label for="opt1_3">hej</label>
<br><br><h2>Array contains:</h2>
<div id="output">nothing :/</div>
Side note: with [name=opt1] we select all the elements with name="opt1" attribute.

Keeping data from detached Checkbox

I have an app I am creating, I've been able to get through it so far relatively hassle free. Until now. At the moment I need to find a way to keep the information produced by if statements for a check box. I have been able to get this working for a radio button by just storing the data in a global variable but I am not sure how to with a check box.
Code:
if ($('#Chk_0').is(':checked')) {
check = "Check1" + ", ";
countCheck++;
}
if ($('#Chk_1').is(':checked')) {
check = "Check2" + ", ";
countCheck++;
}
if (countCheck == 0) {
Check = "Nothing is checked";
}
Checkbox:
<div data-role="collapsible" id="cCheck" class="hCheck">
<h3>CheckBox</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Option</legend>
<input type="checkbox" name="Check" id="Check_0" class="custom" value="" />
<label for="Check_0">Check1</label>
<input type="checkbox" name="Check" id="Check_1" class="custom" value="" />
<label for="Check_1">Check2</label>
</fieldset>
</div>
</div>
You can use an array and a string.
var checkedOptions=[]
var checkedGroup="";
if ($('#Check_0').is(':checked')) {
if(checkGroup=="Check"){
checkedGroup.push("Check_0");
}
else
{
checkGroup="Check"
checkedGroup=["Check0"];
}
countCheck++;
}
BTW: You have an error in your code. The IDs of the input tags and the jQuery are not the same.
As i understand your question ,you need to know is any check box is checked and if any checked you need the ids so this may be help
var ids = '';
$(':checked').each(function (i, element) {
ids += $(element).prop('id')+",";
})
then you can chekc if ids has length
if (ids.length>0) {
//use ids variable here
}

Jquery - Append value to Paragraph

I have 4 groups of data that are tied to a click-bind event. I'm trying to add the value from a hidden field contained within each group to a paragraph later in the page, so that when the checkbox is clicked from one or more groups of data, the value from the hidden field displays within the paragraph area.
I'd also like to get it so that when the checkbox is unclicked, it removes the value from the paragraph, but for now I'm just trying to get the value to display when the checkbox is clicked.
Here's what I've tried:
This is the hidden field within the group of data that stores the value:
<input id="servicename_<?php echo $i;?>" name="servicename_<?php echo $i;?>"
type="hidden" value="<?php echo $service->PRODUCT;?>"></input>
This is the click-bind event:
$('input[id^=ckNow_]').each(function(){
$(this).bind('click',function(){
if($(this).prop('checked'))
{
var servicename = '#servicename_'+$(this).attr('value').split("_");
ServiceName += servicename;
$('#lblServiceName').append($(ServiceName));
EDIT to add the checkbox that is within each group:
<input type="checkbox" id="ckNow_<?php echo $i;?>" name="ckNow[<?php echo $i;?>]">
</input>
And then the paragraph text:
<p id="lblServiceName">Service Name
<input type="hidden" id="servicename" value="0"></input>
</p>
What am I doing wrong and how can I fix it? All responses are very appreciated and I'm completely open to any and all suggestions. Thank you.
Try
<p id="lblServiceName">Service Name
<span></span>
<input type="hidden" id="servicename" value="0"></input>
</p>
then
jQuery(function ($) {
var $checks = $('.group-data input[name^="ckNow["]').change(function () {
var vals = $checks.filter(':checked').map(function () {
return $(this).closest('.group-data').find('input[id^=servicename_]').val()
}).get();
$('#lblServiceName span').text(vals.join(', '))
})
})
Demo: Fiddle

Best way to find "next" form input element in jQuery?

Using jQuery, what's the best way to find the next form element on the page, starting from an arbitrary element? When I say form element I mean <input>, <select>, <button> or <textarea>.
In the following examples, the element with the id "this" is the arbitrary starting point, and the element with the id "next" is the one I want to find. The same answer should work for all examples.
Example 1:
<ul>
<li><input type="text" /></li>
<li><input id="this" type="text" /></li>
</ul>
<ul>
<li><input id="next" type="text" /></li>
</ul>
<button></button>
Example 2:
<ul>
<li><input id="this" type="text" /></li>
</ul>
<button id="next"></button>
Example 3:
<input id="this" type="text" />
<input id="next" type="text" />
Example 4:
<div>
<input id="this" type="text" />
<input type="hidden" />
<div>
<table>
<tr><td></td><td><input id="next" type="text" /></td></tr>
</table>
</div>
<button></button>
</div>
EDIT: The two answers provided so far both require writing a sequence number to all input elements on the page. As I mentioned in the comments of one of them, this is kind of what I'm already doing and I would much prefer have a read-only solution since this will be happening inside a plugin.
kudos,
What about using .index?
e.g $(':input:eq(' + ($(':input').index(this) + 1) + ')');
redsquare is absolutely right, and a great solution also, which I also used in one of my project.
I just wanted to point out that he is missing some parentheses, since the current solution concatenates the index with 1, instead of adding them together.
So the corrected solution would look like:
$(":input:eq(" + ($(":input").index(this) + 1) + ")");
Sorry about the double-post, but I couldn't find a way to comment his post...
This solution does not require indexes, and also plays nicely with tabindex - in other words, it gives you the exact element that the browser would give you on tab, every time, without any extra work.
function nextOnTabIndex(element) {
var fields = $($('form')
.find('a[href], button, input, select, textarea')
.filter(':visible').filter('a, :enabled')
.toArray()
.sort(function(a, b) {
return ((a.tabIndex > 0) ? a.tabIndex : 1000) - ((b.tabIndex > 0) ? b.tabIndex : 1000);
}));
return fields.eq((fields.index(element) + 1) % fields.length);
}
It works by grabbing all tabbable fields in the form (as allowed by http://www.w3.org/TR/html5/editing.html#focus-management), and then sorting the fields based on (http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute) to work out the next element to tab to. Once it has that, it looks at where the passed in field is in that array, and returns the next element.
A few things to note:
jQuery appears to support sort() on a jQuery object, but I can't find
it explicitly in the documentation, hence calling toArray() and then
rewrapping the array in a jQuery object.
There are other fields that
it is okay to tab to, but I left them out as they aren't standard
form fields.
The code I used to test this was (using jQuery 1.7):
<script>
$(function() {
$('a[href], button, input, select, textarea').click(function() {
console.log(nextOnTabIndex($(this)).attr('name'));
})
});
</script>
<form>
<input type='text' name='a'/>
<input type='text' name='b' tabindex='1' />
<a>Hello</a>
<input type='text' name='c'/>
<textarea name='d' tabindex='2'></textarea>
<input id='submit' type='submit' name='e' tabindex='1' />
</form>
After trying every code I could find (and having issues between browsers), I found one that works in the top browsers. Couldn't use the previous routines because of some weird issues.
$(document.body).keydown(function(event) {
if(event.keyCode == 13 ) {
$(":input")[$(":input").index(document.activeElement) + 1].focus();
return false;
}
});
Hope this helps someone else. Enjoy.
You can do this to take a complete list of the form elements you are looking for:
var yourFormFields = $("yourForm").find('button,input,textarea,select');
Then, should be easy find the next element:
var index = yourFormFields.index( this ); // the index of your current element in the list. if the current element is not in the list, index = -1
if ( index > -1 && ( index + 1 ) < yourFormFields.length ) {
var nextElement = yourFormFields.eq( index + 1 );
}
You could give each form item an id (or unique class name) that identified it as a form element and also gave it an index. For example:
<div>
<input id="FormElement_0" type="text" />
<input id="FormElement_1" type="text" />
<div>
Then, if you want to traverse from the first element to the second you can do something like this:
//I'm assuming "this" is referring to the first input
//grab the id
var id = $(this).attr('id');
//get the index from the id and increment it
var index = parseInt(id.split('_')[0], 10);
index++;
//grab the element witht that index
var next = $('#FormElement_' + index);
The benefit of this is that you can tag any element to be next, regardless of location or type. You can also control the order of your traversal. So, if for any reason you want to skip an element and come back to it later, you can do that too.
Or you could use the html attribute 'tabindex' which is for when a user tabs around a form, it goes to tabindex="i" to tabindex="i+1". You can use jQuery to get the attribute very easily. Would make for a nice fall back to users without javascript enabled, also.
I came up with a function that does the job without explicitly defining indexes:
function nextInput(form, id) {
var aInputs = $('#' + form).find(':input[type!=hidden]');
for (var i in aInputs) {
if ($(aInputs[i]).attr('id') == id) {
if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') {
return aInputs[parseInt(i) + 1];
}
}
}
}
And here's a working example. The form tags are for consistency. All you really need is a common parent and could even just use the body tag as the parent (with a slight modification to the function).
Paste this into a file and open with firefox / firebug and you'll see it returns the correct element for all your examples:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
function nextInput(form, id) {
var aInputs = $('#' + form).find(':input[type!=hidden]');
for (var i in aInputs) {
if ($(aInputs[i]).attr('id') == id) {
if (typeof(aInputs[parseInt(i) + 1]) != 'undefined') {
return aInputs[parseInt(i) + 1];
}
}
}
}
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
console.log(nextInput('myform1', 'this1'));
console.log(nextInput('myform2', 'this2'));
console.log(nextInput('myform3', 'this3'));
console.log(nextInput('myform4', 'this4'));
});
</script>
</head>
<body>
<form id="myform1">
<ul>
<li><input type="text" /></li>
<li><input id="this1" type="text" /></li>
</ul>
<ul>
<li><input id="next1" type="text" /></li>
</ul>
</form>
<form id="myform2">
<ul>
<li><input type="text" /></li>
<li><input id="this2" type="text" /></li>
</ul>
<ul>
<li><input id="next2" type="text" /></li>
</ul>
</form>
<form id="myform3">
<input id="this3" type="text" />
<input id="next3" type="text" />
</form>
<form id="myform4">
<div>
<input id="this4" type="text" />
<input type="hidden" />
<div>
<table>
<tr><td></td><td><input id="next4" type="text" /></td></tr>
</table>
</div>
<button></button>
</div>
</form>
</body>
</html>
You can use jQuery field plugin which allows you to do that.
var elementSelector = "input:visible,textarea:visible";
var nextSibling = $(elementSelector )[$(elementSelector ).index() + 1];
//$(nextSibling).focus(); possible action
I just think above solution is simpler, or you can just add it all in one line if you want :-)
var nextSibling = $("input:visible,textarea:visible")[$("input:visible,textarea:visible").index() + 1];
This worked well for me, and it correctly skips over hidden inputs:
input_el.nextAll( 'input:visible:first' ).focus();
All solutions using index (or nextAll) will only work where all the form inputs are siblings, e.g. within the same <div> block. The following gets round that by creating an array of ids of all visible, non-readonly inputs on the page and picks out the first one after the current control, wrapping round if the current control is the last one on the page.
ids = $(":input:visible:not([readonly])").map(function () { return this.id });
nextId = ids[($.inArray($(this).attr("id"), ids) + 1) % ids.length];
$("#" + nextId).focus();
Using the map function makes it a little more succinct than solutions involving iterators.

Categories

Resources