Creating checkbox form inside getJSON() function ???

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
pizzipie
Forum Commoner
Posts: 87
Joined: Wed Feb 10, 2010 10:59 pm
Location: Hayden. ID

Creating checkbox form inside getJSON() function ???

Post by pizzipie »

Hi,
I am 1: listing all invoice records in my database.
2: checking the checkbox(s) of those invoices which I want to see details on.
3: traversing to the server PHP file using ?invid='checkbox value' of the particular invoice.
The problem I am having is that I keep getting an 'undefined error' re my form name.

The results of my getJSON call are roughly;

==================
Inv id 5
Inv No 807-A5
Vendor Home Depot
Date 2012-01-09

* Invoice Id (This is a check box) When checked - go to 'invoiceDetails.php' with value of this checkbox
==================
The above repeats for however invoices there are from the database.

Thanks in advance for help in solving this.

RP

The relevent code is contained in a.js file as follows: Again I can't get the damn file to upload.

Code: Select all

//GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";

//  ==================================

 $(document).ready(function() {	
 			$("#rbox").hide();
	window.getRadioClick=getRadioClick;
	//window.nextRecord=nextRecord;           // WITHOUT THIS NOTHING WORKS ????????
	//window.previousRecord=previousRecord;   // WISH I COULD FIND AN EXPLANATION FOR THIS !!
	//window.setCategoryData=setCategoryData;
	//window.reviseData=reviseData;
	
			$("#what").show();
			$("#what2").hide();		
		
//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();
	
	//alert("category " + category);
	
	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv">';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {
					//console.log("id "+ val.invid +"  inv no "+ val.invno+" vendor "+val.vendor);
		  			content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="checkbox" name="checkgroup" value=' + val.invid +'> Invoice Id.</input>';	
            			$(content).appendTo("#rbox");
          		}); // each
          		
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
          		
          		for(i=0;i<document.pickInv.checkgroup.length; i++) {       // ERROR pickInv not defined
					if(document.pickInv.checkgroup[i].checked==true) {
					alert("Checkbox for Invoice " + i + "is checked!" );
					}	
				} 
          		
          }); // getJSON
        } // if category
  } // get radio
  

  
  
}); // doc ready
Attachments
sagle.gz
(848 Bytes) Downloaded 205 times
User avatar
Tiancris
Forum Commoner
Posts: 39
Joined: Sun Jan 08, 2012 9:54 pm
Location: Mar del Plata, Argentina

Re: Creating checkbox form inside getJSON() function ???

Post by Tiancris »

I'm not pretty sure, but I guess the problem is that you have to access to the form using $("#pickInv") instead of "document.pickInv" (and add "id=pickInv" to the form).
My memory is not helping me right now, but if I'm not wrong the object "document" is not updated when other objects are added dynamically. That's why "document.pickInv" does not work.
pizzipie
Forum Commoner
Posts: 87
Joined: Wed Feb 10, 2010 10:59 pm
Location: Hayden. ID

Re: Creating checkbox form inside getJSON() function ???

Post by pizzipie »

Thanks Tiancris,

I'll give this a try.

RP
pizzipie
Forum Commoner
Posts: 87
Joined: Wed Feb 10, 2010 10:59 pm
Location: Hayden. ID

Re: Creating checkbox form inside getJSON() function ???

Post by pizzipie »

Hi Tiancris,

I tried out your suggestion and it works with some modifications on my part.

I found a problem with checking the 'checked' state of the <input>. Apparantly there is a new way to do this. In fact jquery 1.6 won't work the old way. Here is the new way .prop("checked",true).

HOWEVER, I now have a new problem that you might help me with. The following is the new code. What is happening now is that when you run it, the checkbox in the first data record is checked all by itself and the alert message is displayed. I can't figure why that would happen. Could it be doing this because I gave it a value??

Thanks in advance,

RP

Code: Select all

GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";

//  ==================================

 $(document).ready(function() {	

	$("#rbox").hide();

	window.getRadioClick=getRadioClick;
	//window.nextRecord=nextRecord;           // WITHOUT THIS NOTHING WORKS ????????
	//window.previousRecord=previousRecord;   // WISH I COULD FIND AN EXPLANATION FOR THIS !!
	//window.setCategoryData=setCategoryData;
	//window.reviseData=reviseData;
	
			//$("#what").show();
			//$("#what2").hide();		
		
//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();
	
	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv" id="pickInv" >';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {
				content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="checkbox" name="checkgroup" id="checkinput" value=' + val.invid +'> Invoice Id.</input>';	
            			$(content).appendTo("#rbox");
          		}); // each
          		
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
          		
          		if($("#checkinput").prop("checked",true)) {
					alert("Checkbox for Invoice is checked! ") ;
				} // if check 
		    		
          }); // getJSON
            
        } // if category
        
  } // get radio
  
}); // doc ready

User avatar
Tiancris
Forum Commoner
Posts: 39
Joined: Sun Jan 08, 2012 9:54 pm
Location: Mar del Plata, Argentina

Re: Creating checkbox form inside getJSON() function ???

Post by Tiancris »

Let see...

There is a conceptual mistake here:

Code: Select all

content += '<input type="checkbox" name="checkgroup" id="checkinput" value=' + val.invid +'> Invoice Id.</input>'; 
You are setting the same id to every checkbox, and this isn't right. Id values must be unique for each object. You could use something like:

Code: Select all

id="checkinput"+val.invid
On the other hand... to get only checked inputs:

Code: Select all

$("input[name='checkgroup']:checked").each(function(){
  alert("Checkbox " + $(this).attr('id') + " is checked!");
})
I have to read more about that new version of jQuery... :wink:
pizzipie
Forum Commoner
Posts: 87
Joined: Wed Feb 10, 2010 10:59 pm
Location: Hayden. ID

Re: Creating checkbox form inside getJSON() function ???

Post by pizzipie »

:D :D :D

I have been working on this all day and found the same error you did, plus some others. You, however, got me started on the right path!!! Thanks once more.

My final solution is as follows: It works well. Now I can take the checked value and go back to the server for detailed info on one record.

Code: Select all

//GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";


//  ==================================

 $(document).ready(function() {	
 			
 	$("#rbox").hide();
 			
	window.getRadioClick=getRadioClick;     // WITHOUT THIS NOTHING WORKS ????????



//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();

	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv" id="pickInv" >';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {

		  			content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="radio" name="invoice" id="radioinput';
            			content +=  val.invid +'"'; 
            			content += 'value=' + val.invid +'> Check to see details.</input>';
            			content += '<br/>---------------------------------------------<br/>';
            			
            			$(content).appendTo("#rbox");
          		}); // each
          		
				content = $('pickInv').submit( function() {return false;  });
				$(content).appendTo("#rbox");
				
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
 
          		$('input[name="invoice"]' ).click(function() {
 					alert("checked - Invoice Id ..." + $('input[name="invoice"]:checked').val());
				}); // click      
     	
      	}); // getJSON    
       } // if category
  } // get radio
}); // doc ready
User avatar
Tiancris
Forum Commoner
Posts: 39
Joined: Sun Jan 08, 2012 9:54 pm
Location: Mar del Plata, Argentina

Re: Creating checkbox form inside getJSON() function ???

Post by Tiancris »

I'm glad I could help a bit :D :D :D
trxtrainerssale
Forum Newbie
Posts: 2
Joined: Fri Feb 03, 2012 2:00 am

Re: Creating checkbox form inside getJSON() function ???

Post by trxtrainerssale »

This is great site and I am happy to have found it.Thank you for all the nice shares.
Post Reply