Only One Check Box Value Is Being Submitted

[johnnyg24]

I have a form where a user can select one or multiple check boxes and have their vaules used to filter xml. The filter works, but only the first values of the form are being submitted. For example, when the script runs, it is only using the values from the first "book" value and the first "color" value. I need it to be able to select either one, multiple or all(if no boxes are selected). I don't know what I am doing wrong. java script:

function drawTextTableTrial(form) {		 var newRow;   		var bookNumberEntry = document.getElementById("book").value;		var colorNumSelect = document.getElementById("color").value;		 deleteRows(document.getElementById("mainTableBody"));		 for (var i = 0; i < db.length; i++) {			newRow = document.getElementById("mainTableBody").insertRow(i);			if (db[i].book == bookNumberEntry)			if (db[i].pColorCode == colorNumSelect){			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCodeTXT);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);			appendImgCell(newRow, "Image", db[i].skuImg);			}		 }		 	  }

Form:

<form onsubmit="return false">   <p>Please Select a Book Number </p>   <p>	 <input type="checkbox" name="book" id="book" value="1032">	 1032	 <input type="checkbox" name="book" id="book" value="1033">	 1033   </p>   <p>Please Select a Color Number </p>   <p>	 <input type="checkbox" name="color" id="color" value="100">	 100	 <input type="checkbox" name="color" id="color" value="200">	 200	 <input type="checkbox" name="color" id="color" value="300">	 300	 <input type="checkbox" name="color" id="color" value="400">   400</p>   <p>	 <input type="button" name="process" value="Filter" onclick="drawTextTableTrial(this.form)">	   </p> </form>

[justsomeguy]

The checkboxes need different names and IDs.

[johnnyg24]

The checkboxes need different names and IDs.

What if I don't know which one the user will select? How do I set up my variables to get the right value? Currently I have :

var bookNumberEntry = document.getElementById("book").value;		var colorNumSelect = document.getElementById("color").value;

Do I need to set up a variable for each possible check box selection?

[jeffman]

use document.getElementsByTagName('input'). Then loop through the collection it returns. Filter out the ones that don't have the correct name. Then filter out the ones that are not checked. Do something with the ones that pass both tests.

[johnnyg24]

Could you show me an example of looping and filtering out the data I need. I am new to scripting and if I could see an example I could learn from it and hopefully use else where. Thanks.

[jeffman]

var chex = document.getElementsByTagName('input');var len = chex.len;for (var i = 0; i < len; i++) {	if (chex[i].name = "color") {		if (chex[i].checked == true) {			// do something		}	}}

[johnnyg24]

It doesn't like having that for (statement). I don't know if its because it is using the same counting variable? Any suggestions?

[jeffman]

You asked for an example, not a plug-in, so I didn't try too much to make it fit your code. Yes, if you put a loop inside a loop, the increment variable should be different.If that's not it, maybe be more specific than "It doesn't like having that for (statement)".

[johnnyg24]

I was able to use a new index counter however the returned results are not what they are supposed to be. Could it be that I am not bilding my array right?

[jeffman]

I have no idea. There is obviously a lot of code you have not posted, and I have no idea how you integrated that little loop I showed you. I don't know what this means exactly: "the returned results are not what they are supposed to be." I don't know what array you're referring to.We might not need everything, but I think you need to post some more stuff. It's okay if some of it's reposted, too, so we don't have to scroll up and down the thread.

[johnnyg24]

Sorry about that, I've been communicating via blackberry because my internet was down, but now it's back.Here it is. It seems as though when I click the submit button, it resets the form and simply returns all values in my xml doc.java script:

	function filterResults(form) {		var chex = document.getElementsByTagName("input");		var len = chex.length;			for (var c = 0; c < len; c++) {				if (chex[c].name = "bookNumber") {				if (chex[c].checked == true) {					drawTextTableTrial();		}	}}}		 	function drawTextTableTrial() {	   var newRow;   			   deleteRows(document.getElementById("mainTableBody"));	   for (var i = 0; i < db.length; i++) {			newRow = document.getElementById("mainTableBody").insertRow(i);			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCodeTXT);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);			appendImgCell(newRow, "Image", db[i].skuImg);			}		 }

Form:

<form id="form1">	 Please choose a book number	 <p>	   <input type="checkbox" name="bookNumber" id="bookNumber" value="1032" />	 1032</p>	 <p>	   <input type="checkbox" name="bookNumber" id="bookNumber" value="1033" />	  1033  </p>	 <p>	   <input type="submit" name="Submit" value="Filter Results" onclick="filterResults(this.form)" />	 </p>   </form>

[jeffman]

Here it is. It seems as though when I click the submit button, it resets the form and simply returns all values in my xml doc.

That's what a submit button does. It's trying to submit your data. Since you have no action attribute in your form tag, it just reloads the page. If you don't ever want the form submitting, don't have a submit button. Change it to type="button".It looks like you're not actually doing anything with the checkbox filter. It calls your table function, but it's not passing any data. Are you still working on the mechanics of this thing?

[johnnyg24]

You bet I am. I have no background in javascript, I have a Javascript "Bible" sitting next to me which helps with some fundamentals. I have a small background in HTML (but no form usage) and PICK BASIC. So I understand some concepts, but can't seem to follow the logic. I understand if this is not a place for beginners, but I am just trying to get some help. All I am really looking for is a way to display my companies products based on user search inputs. These products and all its associating information is in an xml.doc. We don't want to continue running ASP because it ties up our operating system. I would like the xml to be filtered by the use of multiple checkboxes, and display the appropriate products. We have over 10,000 products to choose from which is why there are so many choice options. Any help would be appreciated. Sorry for all the confusing requests.

[jeffman]

No, this is a place for authors of all levels. Usually folks who show up with XML projects are not beginners, so maybe I've been assuming too much.Anyway, if you change that button type, your function should get called without the page reloading. I guess you next want to pass some data on to the table function.

[johnnyg24]

Thanks for your help. After some review, I think that my request for checkboxes my be above my head. I have however, figured out that I can use a dropdown list and get results I am looking for. But, when I add more than one dropdown list to filter out data, it seems as thought all the data is opposite of what I am looking for. For example, if I select book number 1033, I get all books 1032. I have attached my new javascript and the selects it is using.java script:

function drawTextTableTrial() {	   var newRow;   		   var bookSelect = document.getElementById("bookNumber").value;	   var colorSelect = document.getElementById("colorNumber").value;		   deleteRows(document.getElementById("mainTableBody"));	   for (var i = 0; i < db.length; i++) {			newRow = document.getElementById("mainTableBody").insertRow(i);			if (db[i].book == bookSelect){			}else if (db[i].pColorCode == colorSelect){			}else{			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCodeTXT);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);			appendImgCell(newRow, "Image", db[i].skuImg);			}		 }		}

Select:

<select id="bookNumber"		 onchange="drawTextTableTrial()"> 		 <option value="">All</option>		 <option value="1033" >1033</option> 		 <option value="1032" >1032</option> </select><select id="colorNumber"		 onchange="drawTextTableTrial()"> 		 <option value="">All</option>		 <option value="100" >100</option> 		 <option value="200" >200</option> 		 <option value="300" >300</option> 		 <option value="400" >400</option> </select>

[jeffman]

I'm clear what you mean here: "if I select book number 1033, I get all books 1032. "Here's what will happen the way you've got it written:A user selects bookNumber 1033.drawTextTableTrial() gets called.We loop through every item in db.We add a new (but empty) table row with each iteration.if db.book == 1033, we do nothing.if db.pColorCode == the value showing on "colorNumber", we do nothing.if db.book and db.pColorCode do not equal the selected values, then we add a whole bunch of table cells filled with certain values.In other words, we do nothing if there's a match, but we print out the non-matches. Is this what you want?

[johnnyg24]

I see what I did wrong. Thanks for the break down. But I don't know how to correct it. What I would like it to do is look at each drop down box, get the value selected and then return only those in the xml that passes the if test. If "All" is selected from the list than it needs to return all the xml data that it relates to. For example, a customer could choose "book" 1033 and "color" all. This should return 2 products. (book number 1033 color 100 and color 200)Or they could choose "book" 1033 and "color" 200. This should return 1 product. (book number 1033 color 200)Am I making any sense?

[jeffman]

I'm getting a handle on this. I'll have more time to think on it later. (I teach a class in 15 minutes.)For now, put a button back in there. Like so<button type="button" onclick="drawTextTableTrial()">Submit (or something)</button>And get rid of the onchange handlers. You need your user to be able to select both before triggering the table-build. Also, users' fingers slip on drop-downs all the time, so you'll have a lot of needless table-builds. Having a definite button will control that.

[johnnyg24]

OK, thanks. I did that, and it seems to be a better option for our customers to select all the criteria first and then submit it. I'll wait to hear back on how to filter out the selected data. Thanks for you help, I appreciate it.

[jeffman]

My real contribution here is a more complicated if statement (which should be printed as one continuous line). I know nothing about your table functions, but it works in my test set-up, so it should work here also. Try it out. Let me know.

function drawTextTableTrial() {	var newRow;	   	var bookSelect = document.getElementById("bookNumber").value;	var colorSelect = document.getElementById("colorNumber").value;		deleteRows(document.getElementById("mainTableBody"));	for (var i = 0; i < db.length; i++) {		newRow = document.getElementById("mainTableBody").insertRow(i);		if ((db[i].book == bookSelect && db[i].pColorCode == colorSelect) || (bookSelect == "" && colorSelect == "") || (bookSelect == "" && db[i].pColorCode == colorSelect) || (db[i].book == bookSelect && colorSelect == "")) {			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCodeTXT);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);			appendImgCell(newRow, "Image", db[i].skuImg);		}	}}

[johnnyg24]

That Works!! Thanks for all your help.

[johnnyg24]

Here is the full function script in case anyone is interested:

function drawTextTableTrial() {	   	var newRow;   			var colorSelect = document.getElementById("colorNumber").value;		   	var classSelect = document.getElementById("classNumber").value;		var styleSelect = document.getElementById("styleNumber").value;		var consSelect = document.getElementById("constructionNumber").value;			   deleteRows(document.getElementById("mainTableBody"));	   for (var i = 0; i < db.length; i++) {			newRow = document.getElementById("mainTableBody").insertRow(i);			if ((db[i].pColorCode == colorSelect && db[i].construction == consSelect && db[i].pClass == classSelect && db[i].pStyle == styleSelect) || (colorSelect == "" && classSelect == "" && styleSelect == "" && consSelect == "") || (colorSelect == "" && classSelect == "" && styleSelect == "" && db[i].construction == consSelect) || (colorSelect == "" && classSelect == "" && db[i].pStyle == styleSelect && db[i].construction == consSelect) || (colorSelect == "" && db[i].pClass == classSelect && db[i].pStyle == styleSelect && db[i].construction == consSelect) || (db[i].pColorCode == colorSelect && classSelect == "" && db[i].pStyle == styleSelect && db[i].construction == consSelect) || (colorSelect == "" && db[i].pClass == classSelect && styleSelect == "" && db[i].construction == consSelect) || (db[i].pColorCode == colorSelect && db[i].pClass == classSelect && styleSelect == "" && db[i].construction == consSelect) || (db[i].pColorCode == colorSelect && classSelect == "" && styleSelect == "" && db[i].construction == consSelect) || (colorSelect == "" && classSelect == "" && db[i].pStyle == styleSelect && consSelect == "") || (colorSelect == "" && db[i].pClass == classSelect && db[i].pStyle == styleSelect && consSelect == "") || (db[i].pColorCode == colorSelect && classSelect == "" && db[i].pStyle == styleSelect && consSelect == "") || (db[i].pColorCode == colorSelect && db[i].pClass == classSelect && db[i].pStyle == styleSelect && consSelect == "") || (colorSelect == "" && db[i].pClass == classSelect && styleSelect == "" && consSelect == "") || (db[i].pColorCode == colorSelect && classSelect == "" && styleSelect == "" && consSelect == "") ||																																																																																																																																																																																																																																																																																																																																																																																																				 (db[i].pColorCode == colorSelect && db[i].pClass == classSelect && styleSelect == "" && consSelect == "")) {			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCode);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);			appendImgCell(newRow, "Image", db[i].skuImg);			}		 }		}