I am having checkbox in each itemTemplate of asp:gridview
I want to get ids or values of those many selected checkboxes using only javascript
In pure javascript I'm not sure about platform portability: you'd REALLY want jQuery or some other helper library here.
With jQuery:
var values = [];
var ids = [];
jQuery.each(jQuery("input:checkbox").find(":checked"), function(){
values.push(jQuery(this).val());
ids.push(jQuery(this).attr("id");
});
will give you the ids and values of all the checked checkboxes.
EDIT: ugly, but this might work...
var values = [];
var ids = [];
var inputs = document.getElementsByTagName("input");
var i;
for(i=0;i<inputs.length;i++){
if(inputs[i].hasAttributes() && inputs.getAttribute('type') == "checkbox" && inputs.getAttribute('checked')){
values.push(inputs[i].getAttribute('value'));
ids.push(inputs[i].getAttribute('id'));
}
}
Let me know if that does what you want.
I am not exactly sure on what you are trying to do but this might help you out. This will get all of the inputs on the screen and process only the checked ones.
var inputList = document.getElementsByTagName("input");
var resultsArray = [];
for(var i = 0; i < inputList.length; i++) {
if (inputList[i].getAttribute("checked") == true) {
resultsArray.push(inputList[i]);
}
}
Sorry, forgot to tell you that this would be a list of elements. You will then need to extract them however you want to from resultsArray.
Related
I have the below code, is there a way to put this in a simpler format.
I am having to blank out 50 or more fields when a date in a certain key field is changed or made blank.
if (zEntry ==""){
document.getElementById("Q229I1226").value="";
document.getElementById("DQ230I1227").value="";
document.getElementById("DQ231I1228").value="";
document.getElementById("Q4I1001").value="";
//Date from fall to arrival
document.getElementById("Q232I1229").value="";
document.getElementById("DQ233I1230").value="";
document.getElementById("DQ234I1231").value="";
document.getElementById("Q5I1002").value="";
//Date Time of referral to T&O surgery
document.getElementById("Q238I1235").value="";
document.getElementById("DQ239I1236").value="";
document.getElementById("DQ240I1237").value="";
document.getElementById("Q15I1012").value="";
document.getElementById("Q17I1014").value="";
//Date seen T&O 1st on call
document.getElementById("Q241I1238").value="";
document.getElementById("DQ242I1239").value="";
document.getElementById("DQ243I1240").value="";
document.getElementById("Q16I1013").value="";
}
Thank you
You have to add common class to your inputs.
var array = document.getElementsByClassName('className');
for (var i = 0, lng = array.length; i < lng; i++) {
array[i].value = '';
}
If you want to clear out all fields with same tag you can just use
document.getElementsByTagName(arg) while arg being 'input', 'option' etc.
But if you want specific inputs to be cleared, you have to give them a class and use
document.getElementsByClassName(arg)
Add class to the input fields and try
var array_container = document.getElementsByClassName('example');
for (var i = 0, i < array_container.length; i++) {
array_container[i].value = '';
}
You may try this approach too:
// store all the element ids in an array
var element_ids = ['Q229I1226', 'DQ230I1227', 'DQ231I1228', 'Q4I1001',
'Q232I1229'];
element_ids.forEach(function(element_id){
document.getElementById(element_id).value = '';
});
Here is a solution of how to clear all input boxes/fields by looping.
Loop though all input boxes and clear them
I was formulating this question:
Is it possible to make an array automatically from the .name and .value data used in all the inputs type text?
This is the reference doing manually:
var foo = [];
foo['bar'] = 'foo data';
foo['foo'] = 'bar data';
I got this idea... And it works...
var foo[];
for (var i = 0; i < document.getElementsByTagName('input').length; i++)
{
foo[document.getElementsByTagName("input")[i].name] = document.getElementsByTagName("input")[i].value;
};
The mission was to make it work automatically.
Get the .name of the input and get the .value of that input.
I was editing the question to post it here... When I figured out how to make it. I decided to leave here the reference, it'll be useful for someone, I guess.
Feedback is welcome.
Your code is reasonable enough, except for two things:
Use an object instead of an array.
Create the list of inputs only once.
So you could do:
var values = {};
var inputs = document.getElementsByTagName('input');
for( var i = 0; i < inputs.length; i++ ) {
values[inputs[i].name] = inputs[i].value;
}
Do you have to do anything special while passing in a dynamically created string as a clientID for document.getElementById?
I have a asp:gridview control that has a textbox column and a checkbox column. I added an onclick event to the checkboxes to set the textbox value of that row to the max value of all checked rows +1. I pass in the IDs of the grid and the controls of the row that was selected. I can getElementByID fine for these controls, but When I dynamically build the IDs of the other controls, I keep getting null, even though I know that the IDs are correct. My code is bellow.
function SetPriority(cbID, tbID, gridID) {
var cb = document.getElementById(cbID);
if (cb.checked) {
var tb = document.getElementById(tbID);
var grid = document.getElementById(gridID);
var maxv = 0;
for (var i = 0; i < grid.rows.length; i++) {
var indexID = 102 + i;
var cbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_chkGroup';
var tbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_txtPriority';
console.log("row" + i);
//just for example of how it should be working
console.log(cbID);
var cbx = document.getElementById(cbID);
console.log(cbx);
//get row checkbox
console.log(cbClientID);
var thisCB = document.getElementById(cbClientID);
console.log(thisCB);
//get row textbox
var thisTB = document.getElementById(tbClientID);
console.log(thisTB);
if (thisCB) {
if (thisCB.type == "checkbox") {
if (thisCB.checked) {
if (thisTB.value > maxv)
maxv = thisTB.value;
}
}
}
}
tb.value = parseInt(maxv) + 1;
}
}
Here is how its showing up in the console, where you can see the IDs for the first row are the same
For Those wondering about How I am calling the function, I am adding it on to a checkbox in a .net gridview control on row databind. It renders as follows:
<input id="LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup" type="checkbox" name="LeaveInfo$pnlMain$wgbLeaveSummary$gridSubmitted$ctl02$chkGroup" onclick="javascript:SetPriority('LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_txtPriority','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted');">
The vb .net code to add the function is this...(on-_RowDataBound)
Dim chk As CheckBox = CType(e.Row.FindControl("chkGroup"), CheckBox)
Dim tb As TextBox = CType(e.Row.FindControl("txtPriority"), TextBox)
chk.Attributes.Add("onclick", String.Format("javascript:SetPriority('{0}','{1}','{2}');", chk.ClientID, tb.ClientID, gridSubmitted.ClientID))
No, you don't have to do anything special when dynamically building a string. A string in javascript is the same string whether it was built dynamically or specified directly in your code. If document.getElementById() is not working, then one of the following is likely the cause:
Your string isn't what you think it is so it doesn't match the target id.
Your DOM id isn't what you think it is.
You have multiple elements with the same id (not likely here because you won't get null)
You are calling getElementById() before the DOM is ready or before the desired elements have been added to the DOM.
In this case, it seems more likely that 1) or 2) are the issues here, but you don't show us any context to know whether 4) could be the problem.
Not 100% sure, but I think it could be a context issue. Try this:
function ( id ) {
var ID = document.getElementById;
this.id = id;
this.newvar = ID.call( document, this.id );
...
}
Also, this question may help you — it has a good explanation on context and assigning a var to getElementById Why can't I directly assign document.getElementById to a different function?
I couldnt figure out why my IDs that seemed identical were not. I will leave this question open for anyone to add insight on how to remedy this. I ended up just getting my elements by cell and not by ID.
function SetPriority(cbID, tbID, gridID) {
var cb = document.getElementById(cbID);
if (cb.checked) {
var tb = document.getElementById(tbID);
var grid = document.getElementById(gridID);
var maxv = 0;
if (grid.rows.length > 0) {
for (row = 1; row < grid.rows.length; row++) {
var thisCB = grid.rows[row].cells[5].childNodes[1];
if (thisCB == cb) {
continue;
}
var thisTB = grid.rows[row].cells[6].childNodes[1];
if (thisCB.type == "checkbox") {
if (thisCB.checked) {
if (thisTB.value > maxv)
maxv = thisTB.value;
}
}
}
}
tb.value = parseInt(maxv) + 1;
}
}
I have a table that has checkboxes, if a checkbox is selected i want a raw in the DB to be deleted - using ajax.
with normal form i would simply name all the chexboxs some name lets say name="checkbox[]"
and then simply use foreach($_POST['checkbox'] as $value){}
now i am trying to get all the values of marked checkboxes then put them into an array. seems i am missing something though. here is what i go so far:
var checkboxes = jQuery('input[type="checkbox"]').val();
var temp = new Array();
jQuery.each(checkboxes, function(key, value) {
temp[] = value;
});
Late on i will just pass temp as variable to ajax call.
Is there anything i am missing ?
You can use :checked selector and map method:
var arr = $('input[type="checkbox"]:checked').map(function(){
return this.value
}).get();
You are trying to iterate over the Checkbox values which is wrong . Try this
var $checkboxes = jQuery('input[type="checkbox"]') ;
var temp = new Array();
jQuery.each($checkboxes, function(i) {
var value = $(this).attr('value');
temp[i] = value;
});
If you want to pass only checked items just add a condition.
if($(this).is(':checked')){
var value = $(this).attr('value');
temp[i] = value;
}
Just wrap the table in a form tag, and do this:
var myData = jQuery('#myform').serialize();
jQuery.ajax('myscript.php', {data:myData});
Hi I am new to Netui and Javascript so go easy on me please. I have a form that is populated with container.item data retuned from a database. I am adding a checkbox beside each repeater item returned and I want to add the container item data to an array when one of the checkboxes is checked for future processing.
The old code used Anchor tag to capture the data but that does not work for me.
<!--netui:parameter name="lineupNo" value="{container.item.lineupIdent.lineupNo}" />
here is my checkbox that is a repeater.
<netui:checkBox dataSource="{pageFlow.checkIsSelected}" onClick="checkBoxClicked()" tagId="pceChecked"/>
this is my Javascript function so far but I want to a way to store the container.item.lineupIdent.lineupNo in the array.
function checkBoxClicked()
{
var checkedPce = [];
var elem = document.getElementById("PceList").elements;
for (var i = 0; i < elem.length; i ++)
{
if (elem[i].name == netui_names.pceChecked)
{
if (elem[i].checked == true)
{
//do some code. }
}
}
}
I hope this is enough info for someone to help me. I have searched the web but could not find any examples.
Thanks.
var checkedPce = new Array();
//some other code
checkedPce[0] = stuff_you_want_to_add
If you merely want to add a value to an array, you can use this code:
var array = [];
array[array.length] = /* your value */;
You may need to use a dictionary approach instead:
var dictionary = {};
function yourCode(element) {
var item = dictionary[element.id];
if (item == null) {
item = /* create the object */;
dictionary[element.id] = item;
}
// Use the item.
}