Im getting text boxes instead of check boxes after submitting form

Frontend Web Development: The Big Nerd Ranch Guide Chapter 11: From Data to DOM
1

i dont get why I dont have check boxes

Capture.PNG1432×763 29.6 KB

here is my checkList file :frowning: data attribute is the same in my index.html)

(function(window) {
	
	// body...
	'use strict';
	var App=window.App || {};
	// importing APP and jQuery namespace line above and below
	var $=window.jQuery;
	function CheckList(selector){
		if(!selector){
			throw new Error('no selector provided');
		}
		this.$element=$(selector);
		if(this.$element.length===0){
			throw new Error('not find element with selector '+ selector);
		}

	}
	// the parameter, coffeorder is data passed that contains a
	//single coffe order like strength size etc...
	CheckList.prototype.addRow= function(coffeeOrder) {
		// pg 234
		var rowElement=new Row(coffeeOrder);
		//add the new row instance $row property to the checklist instance
		//this.$element with append() method
		this.$element.append(rowElement.$row);
	};

		// want mark up to appear after form submits, create another constructor!
		//accepts coffeOrder which is same data form createorder from Truck.js file
		function Row(coffeeOrder){
			// use jquery to build DOM elements, more on pgs 229-231
			var $div=$('<div><div>',{
				'data-coffee-order':'checkbox',
				'class':'checkbox'
			});
			var $label=$('<label><label>');
			
			var $checkbox=$('<input><input>',{
				type:'checkbox',
				value:coffeeOrder.emailAddress
			});
			var description=coffeeOrder.size + ' ';
			if(coffeeOrder.flavor){
				description+=coffeeOrder.flavor+ ' ';
			}
			description+=coffeeOrder.coffee+ ' , ';
			description+='(' + coffeeOrder.emailAddress + ')';
			description+= '[' + coffeeOrder.strength +' x ]';
			// below append() adds jquery collection or DOM elements
			// as child elements
			//start with inner tag, $checkbox and finish with outer tag, $div
			$label.append($checkbox);
			$label.append(description);
			
			$div.append($label);

			this.$row=$div;

	}
	// exporting checklist to app namespace below
	App.CheckList=CheckList;
	console.log('checklist running');
	window.App=App;
})(window);
2

Hi @Naomi, since it’s showing text boxes instead of checkboxes, there’s probably something going on when you create the checkbox. Since it’s creating 2 text boxes, I think the issue may be $('<input><input>').

Keep in mind that the $() function accepts arbitrary HTML code. In this case, you are passing two opening tags (so, two elements) and not closing them. So don’t forget to close your ending tag with a /:

$checkbox=$('<input></input>', {

This goes for your <div> and <label> creation code as well.

1 Like
3

Thanks solved it a while ago